手把手教你：自定义实现 JavaScript 中的apply、bind、call函数

前端

2023-12-01 15:58:20

了解apply、bind、call函数

在JavaScript中，apply、bind、call函数都是函数调用相关的。它们可以改变函数的调用上下文，即改变函数内部的this指向。这三个函数都有一个共同点，就是都可以接受一个参数数组。这个参数数组将被作为函数的参数传递。

apply函数

apply函数的第一个参数是函数的调用上下文，即this指向的对象。第二个参数是一个数组，包含了要传递给函数的参数。

bind函数

bind函数与apply函数类似，但它返回一个新的函数，而不是直接调用函数。这个新的函数的this指向被绑定为bind函数的第一个参数，并且它接收的参数将被添加到bind函数的第二个参数数组中。

call函数

call函数与apply函数非常相似，唯一的区别是它将参数直接传递给函数，而不是通过数组。

实现apply、bind、call函数

以下是apply、bind、call函数的实现：

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

// bind函数
Function.prototype.myBind = function (context, ...args1) {
  if (typeof this !== "function") {
    throw new TypeError("Function.prototype.myBind is not a function");
  }
  const fn = this;
  return function (...args2) {
    return fn.myApply(context, [...args1, ...args2]);
  };
};

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

使用apply、bind、call函数

以下是apply、bind、call函数的使用示例：

// 使用apply函数
const obj = {
  name: "John"
};

function greet(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}

greet.myApply(obj, ["Hello"]); // Hello, John!

// 使用bind函数
const boundGreet = greet.myBind(obj);

boundGreet("Hi"); // Hi, John!

// 使用call函数
greet.myCall(obj, "Bonjour"); // Bonjour, John!