深入探索call、apply、bind的神秘内核，领略原生之美

2024-02-14 00:26:08

call、apply、bind的共同使命：改变this指向

在JavaScript中，函数的执行离不开this对象的陪伴，this对象决定了函数内部this的指向。call、apply、bind等方法的共同使命就是改变this指向，让函数能够在不同的对象上执行。

call和apply：参数列表的细微差别

call和apply方法在改变this指向方面非常相似，它们都接受两个参数：第一个参数是要改变this指向的对象，第二个参数是参数列表。参数列表中的元素将作为函数的参数传递给被调用的函数。

然而，在参数列表的处理上，call和apply存在着细微的差别。call方法将参数列表中的元素逐个传递给被调用的函数，而apply方法则将参数列表作为一个整体传递给被调用的函数。

bind：预先绑定this指向，打造新函数

bind方法与call和apply略有不同，它不立即执行函数，而是返回一个新的函数，这个新函数的this指向已经被预先绑定为bind方法的第一个参数。换句话说，bind方法可以创建新的函数，而新的函数的this指向已经固定为bind方法的第一个参数。

从原生的角度理解call、apply、bind的实现

为了更深入地理解call、apply、bind的实现原理，我们不妨从原生的角度来剖析它们。

call的原生实现

Function.prototype.call = function(context, ...args) {
  // 检查this是否为函数
  if (typeof this !== "function") {
    throw new TypeError("Function.prototype.call - what is trying to be called is not a function");
  }

  // 确保context参数存在
  if (context === null || context === undefined) {
    context = window;
  }

  // 将函数的this指向修改为context对象
  context.fn = this;

  // 调用函数，并将参数列表传递给函数
  const result = context.fn(...args);

  // 删除context.fn属性，恢复函数的原始状态
  delete context.fn;

  // 返回函数的执行结果
  return result;
};

apply的原生实现

Function.prototype.apply = function(context, args) {
  // 检查this是否为函数
  if (typeof this !== "function") {
    throw new TypeError("Function.prototype.apply - what is trying to be called is not a function");
  }

  // 确保context参数存在
  if (context === null || context === undefined) {
    context = window;
  }

  // 将函数的this指向修改为context对象
  context.fn = this;

  // 将参数列表转换为数组
  args = Array.prototype.slice.call(args);

  // 调用函数，并将参数列表传递给函数
  const result = context.fn(...args);

  // 删除context.fn属性，恢复函数的原始状态
  delete context.fn;

  // 返回函数的执行结果
  return result;
};

bind的原生实现

Function.prototype.bind = function(context, ...args) {
  // 检查this是否为函数
  if (typeof this !== "function") {
    throw new TypeError("Function.prototype.bind - what is trying to be bound is not a function");
  }

  // 创建一个新的函数，并将其this指向绑定为context对象
  const boundFn = function(...innerArgs) {
    // 将参数列表合并为一个数组
    const allArgs = args.concat(innerArgs);

    // 调用函数，并将合并后的参数列表传递给函数
    return this.apply(context, allArgs);
  };

  // 绑定函数的prototype属性，以确保新函数的原型指向与原函数的原型指向一致
  boundFn.prototype = Object.create(this.prototype);

  // 返回新的函数
  return boundFn;
};