手写apply、call、bind函数

2023-11-27 17:56:24

概述

在JavaScript中，函数是对象，可以作为参数传递给其他函数，也可以作为返回值返回。函数的调用者称为函数的上下文，决定了函数中的this指向的对象。apply、call和bind函数允许我们显式地设置函数的调用者，从而改变this指向的对象。

apply函数

apply函数接受两个参数：要调用的函数和一个数组，该数组包含要作为函数参数传递的值。apply函数将数组中的值作为函数的参数，并设置函数的调用者为数组的第一个元素。

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

greet("Hello", "John"); // 输出: Hello, John!

let person = {
  name: "Jane"
};

greet.apply(person, ["Hi", "Jane"]); // 输出: Hi, Jane!

在这个例子中，greet函数被调用两次。第一次，greet函数被直接调用，this指向window对象。第二次，greet函数通过apply函数调用，this指向person对象。

call函数

call函数与apply函数相似，但它接受单独的参数列表，而不是数组。call函数将参数列表中的值作为函数的参数，并设置函数的调用者为第一个参数。

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

greet("Hello", "John"); // 输出: Hello, John!

let person = {
  name: "Jane"
};

greet.call(person, "Hi", "Jane"); // 输出: Hi, Jane!

在这个例子中，greet函数被调用两次。第一次，greet函数被直接调用，this指向window对象。第二次，greet函数通过call函数调用，this指向person对象。

bind函数

bind函数与apply函数和call函数不同，它不立即调用函数，而是返回一个新的函数，该函数的调用者被绑定到bind函数的第一个参数。

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

let person = {
  name: "Jane"
};

let greetJane = greet.bind(person);

greetJane("Hi"); // 输出: Hi, Jane!