手写 call、apply、bind，前端进阶必备技能

前端

2023-12-01 09:47:30

改变函数执行上下文的神奇三剑客：call、apply、bind

在前端开发的广阔世界中，call、apply 和 bind 三个函数如同变幻莫测的魔术师，拥有改变函数执行上下文的超能力。通过它们，我们可以让函数在不同的环境中尽情施展自己的魔力。

执行上下文的奥秘

在函数执行时，它会被赋予一个执行上下文，其中包含着一些关键的信息，诸如：

全局对象：函数可以访问的全局变量和函数的集合。
活动对象：与函数执行关联的对象。
作用域链：函数可以访问的变量和函数的层次结构。

call、apply、bind 的登场

当直接调用一个函数时，它的执行上下文是固定的，但有时我们需要打破这种局限，让函数在不同的上下文中执行。这时，call、apply 和 bind 就粉墨登场了。

call ：call 方法允许我们指定函数的执行上下文和参数，赋予函数新的生命。
apply ：apply 方法与 call 类似，但它接受一个参数数组，为函数提供更加灵活的输入方式。
bind ：bind 方法创建了一个新的函数，该函数的执行上下文永久绑定到指定的上下文，创造了一个函数分身。

代码示例

为了更好地理解这些函数的用法，让我们通过代码示例来揭开它们的真面目：

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

// 使用 call 改变执行上下文
sayHello.call(null, "John"); // 输出：Hello, John!

// 使用 apply 改变执行上下文和参数
sayHello.apply(null, ["Mary"]); // 输出：Hello, Mary!

// 使用 bind 创建一个绑定上下文的函数
const boundSayHello = sayHello.bind(null, "Alice");
boundSayHello(); // 输出：Hello, Alice!

模拟实现

为了深入理解这些函数的工作原理，我们不妨尝试自己模拟实现它们：

// 模拟 call
Function.prototype.myCall = function(context) {
  var args = Array.prototype.slice.call(arguments, 1);
  context = context || window;
  context.fn = this;
  var result = context.fn(...args);
  delete context.fn;
  return result;
};

// 模拟 apply
Function.prototype.myApply = function(context, args) {
  context = context || window;
  context.fn = this;
  var result = context.fn(...args);
  delete context.fn;
  return result;
};

// 模拟 bind
Function.prototype.myBind = function(context) {
  var args = Array.prototype.slice.call(arguments, 1);
  var fn = this;
  return function() {
    var bindArgs = Array.prototype.slice.call(arguments);
    return fn.myApply(context, args.concat(bindArgs));
  };
};

常见问题解答

call、apply 和 bind 有什么区别？
- call 和 apply 都可以改变函数的执行上下文，但 call 接受一个个的参数，而 apply 接受一个参数数组。bind 则创建了一个绑定了上下文的函数分身。
为什么要使用这些函数？
- 这些函数可以实现函数的动态调用，在解决某些问题（例如改变对象方法的上下文）时非常有用。
如何使用 bind 创建一个不可变函数？
- 可以使用 bind 来创建不可变函数，只需将 null 作为第一个参数传递，然后绑定需要的参数即可。
call、apply 和 bind 的性能如何？
- 这些函数会带来一些性能开销，因此在实际应用中应谨慎使用。
有没有其他改变函数执行上下文的方法？
- 除了 call、apply 和 bind 之外，还可以使用 Function.prototype.bind 和箭头函数（() => {}) 来改变函数的执行上下文。