详解JS中 call 方法的实现

摘要：本文将全面的，详细解析call方法的实现原理

本文分享自华为云社区《关于 JavaScript 中 call 方法的实现，附带详细解析！》，作者：CoderBin。

本文将全面的，详细解析call方法的实现原理，并手写出自己的call方法，相信看完本文的小伙伴都能从中有所收获。

call 方法的实现

1.函数作用

调用函数，可传入参数，改变this指向

2.总体步骤

1. 边界判断（this,context）
2. 将调用的函数设置为对象（传入的context）的方法（改变this指向）
3. 调用函数，得到返回值，并返回

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
}