手写理解call、apply、bind

2024-02-12 00:53:37

为什么手写call、apply、bind？

随着JavaScript的广泛应用，理解函数调用和this绑定机制变得尤为重要。call、apply、bind这三个函数是JavaScript中用来改变函数this指向和传递参数的重要方法。通过手写它们，可以深入理解其内部运行机制，并对JavaScript函数的本质有更透彻的认识。

call和apply的异同

call和apply都是用于调用函数的方法，但它们在参数传递方式上有所区别。call方法接收函数执行所需的参数，并将它们逐个传递给函数。而apply方法接收一个数组，该数组包含了函数执行所需的所有参数，然后将数组中的元素一一传递给函数。

bind方法的独特之处

bind方法与call和apply的不同之处在于，它不会立即执行函数，而是返回一个新的函数，这个新函数的this指向和参数都已经绑定好了。这使得bind方法非常适合于创建新函数，而无需重新编写整个函数。

手写实现步骤

1. call的实现

Function.prototype.myCall = function(context) {
  // 保存调用函数的this值
  const context = context || window;

  // 将函数本身保存在context上
  context.fn = this;

  // 将参数从第二个参数开始收集
  const args = [];
  for (let i = 1; i < arguments.length; i++) {
    args.push(arguments[i]);
  }

  // 调用函数，并将this值设置为context
  const result = context.fn(...args);

  // 删除context上的fn属性
  delete context.fn;

  // 返回调用结果
  return result;
};

2. apply的实现

Function.prototype.myApply = function(context) {
  // 保存调用函数的this值
  const context = context || window;

  // 将函数本身保存在context上
  context.fn = this;

  // 将参数从第二个参数开始收集
  const args = arguments[1];

  // 调用函数，并将this值设置为context
  const result = context.fn(...args);

  // 删除context上的fn属性
  delete context.fn;

  // 返回调用结果
  return result;
};

3. bind的实现

Function.prototype.myBind = function(context) {
  // 保存调用函数的this值
  const context = context || window;

  // 返回一个新函数
  return function() {
    // 将参数从第一个参数开始收集
    const args = [];
    for (let i = 0; i < arguments.length; i++) {
      args.push(arguments[i]);
    }

    // 调用函数，并将this值设置为context
    const result = this.myCall(context, ...args);

    // 返回调用结果
    return result;
  };
};