函数调用的上下文改变（bind、call 和 apply）

JavaScript 中的函数，我们称之为“一类对象”，拥有属于自己的属性和方法，通过函数调用来执行代码。而在函数调用时，函数的上下文，即 this 值，会被函数的调用者自动设置。

然而，在实际开发中，我们常常需要改变函数执行时的上下文，这时 JavaScript 提供了 bind()、call() 和 apply() 这三个方法来帮我们实现这一目的。

bind()

bind() 方法创建一个新的函数，该函数会绑定到指定的对象，无论该函数是如何调用的，this 值始终被绑定到该对象。

function greet() {
  console.log(this.name);
}

const person = {
  name: "John Doe"
};

// 使用 bind() 绑定 person 对象
const greetPerson = greet.bind(person);

// 调用 greetPerson()，此时 this 指向 person 对象
greetPerson(); // "John Doe"

call()

call() 方法直接调用函数，并将 this 值显式地设置为指定的对象。

function greet() {
  console.log(this.name);
}

const person = {
  name: "Jane Doe"
};

// 直接调用 greet()，this 指向全局对象（在浏览器中是 window）
greet(); // undefined（因为全局对象没有 name 属性）

// 使用 call() 显式设置 this 为 person 对象
greet.call(person); // "Jane Doe"

apply()

apply() 方法与 call() 类似，但它接受一个参数数组作为第二个参数，而不是单独的参数。

function sum(num1, num2) {
  return num1 + num2;
}

const args = [10, 20];

// 使用 apply() 传入参数数组
const result = sum.apply(null, args); // 30

选择哪种方法

选择 bind()、call() 或 apply() 方法取决于实际情况：

• bind()： 创建新函数，该函数始终绑定到指定对象。
• call()： 直接调用函数，并显式设置 this 值。
• apply()： 与 call() 类似，但参数以数组形式传入。

总结

bind()、call() 和 apply() 方法是 JavaScript 中用于改变函数执行上下文的有力工具。通过这些方法，我们可以更好地控制代码执行的方式，并编写更灵活、可重用的函数。