前端小知识：如何巧妙改变 this 的指向？

2023-11-12 22:19:36

在 JavaScript 中，this 是 JavaScript 对象模型（DOM）中一个至关重要的概念，它表示当前执行代码的作用域或上下文对象。然而，有时我们需要改变 this 的指向，以便在不同的上下文中执行方法或访问属性。JavaScript 提供了三种方法来实现 this 的指向改变：call、apply 和 bind。

call、apply 和 bind 的相似点

call、apply 和 bind 这三种方法都能够改变 this 的指向问题，且第一个传递的参数都是 this 指向的对象。三者都是通过修改函数内部的 this 指向来实现的，从而使得函数能够在不同的对象作用域下执行。

call、apply 和 bind 的差异

1. 参数传递方式

call 方法接收参数列表作为单独的参数，而 apply 方法将参数列表封装在一个数组中作为参数传递。bind 方法与 call 和 apply 类似，但它返回一个新的函数，该函数的 this 值被永久绑定到指定的 this 值。

2. 返回值

call 和 apply 方法都返回函数执行的结果，而 bind 方法返回一个新的函数。

代码示例

以下代码示例演示了如何使用 call、apply 和 bind 来改变 this 的指向：

// 使用 call 方法改变 this 指向

const person = {
  name: "John Doe",
  greet: function () {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

const anotherPerson = {
  name: "Jane Doe",
};

// 使用 call 方法将 this 指向 anotherPerson 对象
person.greet.call(anotherPerson); // 输出：Hello, my name is Jane Doe.

// 使用 apply 方法改变 this 指向

const numbers = [1, 2, 3, 4, 5];

// 使用 apply 方法将 this 指向 numbers 数组
Math.max.apply(Math, numbers); // 返回：5

// 使用 bind 方法改变 this 指向

const boundFunction = person.greet.bind(anotherPerson);

// 此时，boundFunction 的 this 值已永久绑定到 anotherPerson 对象
boundFunction(); // 输出：Hello, my name is Jane Doe.