手写call方法，以及call如何实现的解释、原理

1. call函数实现

Function.prototype.myCall = function(context, ...args) {
  // 判断调用对象
  if (typeof this !== "function") {
    console.error("type error");
  }
  // 判断 context 是否传入，如果未传入则设置为 window
  context = context || window;
  // 将调用函数设为对象的方法
  context.fn = this;
  // 调用方法
  const result = context.fn(...args);
  // 将属性删除
  delete context.fn;
  return result;
};

2. 例子

const foo = {
    name: 'hello',
    logName: function(...args) {
        console.log(args, 111);
        console.log(this.name, 333);
    }
}
const bar = {
    name: 'world'
}
console.log(foo.logName.myCall(bar, '1', '2'), 'res');
// 打印结果
// world 333
// [1, 2] 111

解释

• myCall是logName上的一个方法
• 根据this绑定规则，this指向最终调用它的对象，此时最终调用它的对象是foo.logName，而不是foo。
• 所以在myCall方法中打印this就是

ƒ (...args) {
    console.log(args, 111);
    console.log(this.name, 333);
}

• 然后给myCall方法传入多个参数，分别是一个对象，以及剩余参数
• myCall内部解释
• 第一步：判断传入的对象是否存在，如果不存在默认为window
• 第二步：给这个对象新增一个属性fn，并把this赋值给这个属性，也就是个函数(上面的代码块)
• 第三步：调用这个方法fn，根据this绑定规则，this执向最终调用它的对象，此时最终调用它的是context，现在的上下文对象是context
• 调用方法fn，会打印this.name，就会在上下文context上查找，并执行相应代码

3. 总结

• call方法用于改变this的指向，从而将一个对象的属性或方法在另一个对象方法中使用

• 实际上内部原理是结合this绑定的规则和给传入对象新增某个方法实现的