从手写 call、apply 和 bind 中了解函数的作用域和绑定

前端

2023-10-12 06:23:40

函数的作用域
在 JavaScript 中，函数的作用域是指函数可以访问的变量的集合。函数的作用域由函数的执行上下文决定。执行上下文包含函数被调用的环境信息，包括函数的参数、局部变量和全局变量。

函数的绑定

函数的绑定是指将函数与特定的执行上下文相关联的过程。在 JavaScript 中，函数的绑定可以通过以下三种方式实现：

默认绑定：当函数被直接调用时，默认绑定会发生。在这种情况下，函数的作用域是全局作用域或当前执行上下文的作用域。
显式绑定：显式绑定允许我们手动指定函数的执行上下文。我们可以使用 call、apply 或 bind 方法来显式绑定函数。
隐式绑定：隐式绑定发生在函数作为对象的方法被调用时。在这种情况下，函数的作用域是对象本身。

手写实现 call、apply 和 bind 函数

为了更好地理解函数的作用域和绑定，我们现在将手写实现 call、apply 和 bind 函数。

call 方法

call 方法允许我们显式地指定函数的执行上下文。它接受两个参数：第一个参数是要调用的函数，第二个参数是要作为函数的 this 值的对象。

Function.prototype.call = function(context, ...args) {
  if (typeof this !== "function") {
    throw new TypeError("this is not a function");
  }
  context = context || globalThis;
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

apply 方法

apply 方法与 call 方法类似，但它接受一个数组作为函数的参数。

Function.prototype.apply = function(context, args) {
  if (typeof this !== "function") {
    throw new TypeError("this is not a function");
  }
  context = context || globalThis;
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

bind 方法

bind 方法与 call 和 apply 方法不同，它不立即调用函数，而是返回一个新的函数。这个新的函数已经绑定了指定的执行上下文。

Function.prototype.bind = function(context, ...args) {
  if (typeof this !== "function") {
    throw new TypeError("this is not a function");
  }
  const fn = this;
  return function(...restArgs) {
    return fn.apply(context, args.concat(restArgs));
  };
};