关于 JavaScript 中 call 方法的实现,附带详细解析!
【摘要】 大家好,我是 CoderBin,在面试当中,手撕代码的场景屡见不鲜,手写 JS 当中的方法更是最常见的一种,所以本文将全面的,详细解析`call`方法的实现原理,并手写出自己的`call`方法,相信看完本文的小伙伴都能从中有所收获💪。
创作不易,你们的点赞收藏留言就是我最大的动力💓
如果文中有不对、疑惑的地方,欢迎各位小伙伴们在评论区留言指正🌻
前言
大家好,我是 CoderBin,在面试当中,手撕代码的场景屡见不鲜,手写 JS 当中的方法更是最常见的一种,所以本文将全面的,详细解析call
方法的实现原理,并手写出自己的call
方法,相信看完本文的小伙伴都能从中有所收获💪。
创作不易,你们的点赞收藏留言就是我最大的动力💓
如果文中有不对、疑惑的地方,欢迎各位小伙伴们在评论区留言指正🌻
call 方法的实现
1. 函数作用
调用函数,可传入参数,改变this指向
2. 总体步骤
- 边界判断(this,context)
- 将调用的函数设置为对象(传入的context)的方法(改变this指向)
- 调用函数,得到返回值,并返回
3. 详细步骤
1. 边界判断
- 判断当前
this
是否为一个函数,否则返回错误消息 - 判断传入的
context
参数是否存在,存在则使用Object()
转换为对象赋给context
,否则将window
赋值给context
2. 将调用的函数设置为对象(传入的context)的方法(改变this指向)
3. 调用函数,得到返回值,并返回
- 调用函数,得到结果
- 删除
context
身上的fn
函数 - 返回结果
4. 代码实现
/**
* !实现 binCall() 方法
* @param {*} context 绑定的对象
* @param {...any} args 剩余参数
* @returns
*/
Function.prototype.binCall = function(context, ...args) {
if (typeof this !== 'function') console.error('type Error'); // 1
context = (context!==null && context!==undefined) ? Object(context) : window
context.fn = this // 2
const result = context.fn(...args) // 3
delete context.fn;
return result
}
5. 测试代码
// 测试
function sum(num1, num2) {
console.log('sum 被执行', this);
return num1 + num2
}
// 原生的 call() 方法
console.log(sum.call({name: 'bin'},1,2));
// 自定义的 binCall() 方法
console.log(sum.binCall({name: 'bin'},1,2));
经过原生的call
方法和手写的binCall
方法测试,我们手动实现的binCall
方法也能实现原生call
方法的功能
6. 细节解析
this
指向的就是调用binCall()
的那个函数(隐式绑定);- 传入的
context
参数表示:将this
的指向改为这个参数; - 改变
this
指向其实就是在context
上添加一个临时的方法,值为this
; - 调用
context.fn()
时,就已经改变了this
的指向,同时得使用展开运算符传入参数 delete context.fn
删除那个临时方法是因为已经不需要用了
7. 核心原理
通过在传入的对象上,临时新增一个方法,这个方法的值是当前 binCall
的调用者。然后 context.fn(...argArray)
调用这个函数,通过隐式绑定的方式改变了 this
的指向,最后得到结果并返回
每文一句:富贵必从勤苦得,男儿须读五车书。
本次的分享就到这里,如果本章内容对你有所帮助的话欢迎 点赞+收藏。文章有不对的地方欢迎指出,有任何疑问都可以在评论区留言。希望大家都能够有所收获,大家一起探讨、进步!
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)