全方位解读 Call 方法隐式绑定规则

2023-12-16 17:49:08

Call() 方法：深入理解隐式绑定

在前端面试中，候选人经常被要求手写 Call() 方法的源码。掌握这个方法的隐式绑定规则至关重要，不仅有助于面试表现，更能加深对 JavaScript 基础的理解。

隐式绑定规则

隐式绑定是指 JavaScript 引擎根据特定规则确定函数中 this 指向的对象，而不是显式指定。

Call() 方法的隐式绑定规则： 当 Call() 方法被调用时，this 指向它的第一个参数。

示例：

const obj1 = {
  name: '张三',
  sayHello: function() {
    console.log(`我叫 ${this.name}`);
  }
};

const obj2 = {
  name: '李四',
};

obj1.sayHello(); // 输出：我叫 张三
obj2.sayHello(); // 错误：obj2.sayHello is not a function

obj1.sayHello.call(obj2); // 输出：我叫 李四

在这个例子中，this 在 obj1.sayHello() 中指向 obj1，而在 obj1.sayHello.call(obj2) 中指向 obj2。

实现 Call() 方法

以下代码演示了如何实现自己的 Call() 方法：

Function.prototype.myCall = function(context, ...args) {
  if (typeof this !== 'function') {
    throw new TypeError('Error: Function.prototype.myCall is not a function');
  }

  if (context === null || context === undefined) {
    context = globalThis;
  }

  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};