理解 call，apply，bind 的不同之处，掌握 JavaScript 中 this 指向的奥秘
2023-06-01 15:24:57
在 JavaScript 中驾驭 call、apply 和 bind：赋予 this 以力量
简介
JavaScript 中的 this 代表当前执行函数的上下文，它是指向不同对象的动态值。call、apply 和 bind 方法提供了改变 this 指向的灵活方式，让你可以显式指定 this 的值，从而获得更大的代码控制和可维护性。
call() 方法
call() 方法将 this 绑定到指定的对象，并以该对象作为上下文调用函数。它接收至少两个参数：要绑定 this 的对象和一个或多个要传递给函数的参数。例如：
const person = {
name: "John Doe",
greet() {
console.log(`Hello, my name is ${this.name}.`);
}
};
person.greet(); // 输出：Hello, my name is John Doe.
const anotherPerson = {
name: "Jane Doe"
};
person.greet.call(anotherPerson); // 输出：Hello, my name is Jane Doe.
在上述代码中，call() 方法将 this 绑定到 anotherPerson 对象，使得 greet() 函数在另一个对象上被调用。
apply() 方法
apply() 方法类似于 call() 方法，但它将参数作为数组而不是参数列表传递给函数。它接收两个或多个参数：要绑定 this 的对象和一个包含要传递给函数的参数的数组。例如：
person.greet.apply(anotherPerson, ["Hello, world!"]); // 输出：Hello, world!
bind() 方法
bind() 方法与 call() 和 apply() 方法不同，它不会立即调用函数。相反，它返回一个新函数，该函数的 this 值被绑定到指定的对象。例如：
const boundGreet = person.greet.bind(person);
boundGreet(); // 输出：Hello, my name is John Doe.
在上述代码中，bind() 方法将 this 绑定到 person 对象，并返回 boundGreet 函数。boundGreet() 函数可以像普通函数一样被调用，但它的 this 值始终是 person 对象。
比较 call、apply 和 bind
- call() 和 apply() 都可以在函数调用时改变 this 值，但 call() 接收参数列表，而 apply() 接收数组。
- bind() 返回一个新的函数，而不是立即调用函数，该函数的 this 值被绑定到指定的对象。
何时使用 call、apply 或 bind
- 使用 call() 或 apply()： 当需要在函数调用时改变 this 值时，且参数列表或数组已知。
- 使用 bind()： 当需要创建一个新的函数，该函数的 this 值被绑定到指定的对象时，特别是在需要多次调用该函数的情况下。
结论
call、apply 和 bind 方法为 JavaScript 开发人员提供了显式指定 this 值的强大工具，从而提供了更大的代码控制和灵活性。通过理解这些方法的不同之处，你可以编写出更加健壮、可维护和灵活的 JavaScript 代码。
常见问题解答
- 什么是 this 关键字？ this 关键字代表当前执行函数的上下文对象。
- call() 方法如何改变 this 的值？ call() 方法将 this 绑定到指定的对象，并在该对象作为上下文的情况下调用函数。
- apply() 方法如何与 call() 方法不同？ apply() 方法类似于 call() 方法，但它将参数作为数组而不是参数列表传递给函数。
- bind() 方法与 call() 和 apply() 方法有什么区别？ bind() 方法不立即调用函数，而是返回一个新的函数，该函数的 this 值被绑定到指定的对象。
- 在哪些情况下使用 call、apply 或 bind？ call() 和 apply() 用于在函数调用时改变 this 值，而 bind() 用于创建新函数，该函数的 this 值被绑定到指定的对象。
