更改this指向的三种方法及其区别

2023-09-06 05:39:21

在 JavaScript 中，this 表示当前正在执行的函数或方法的作用域。然而，有时我们需要更改 this 指向以执行特定的任务或访问特定的对象。本文将探讨更改 this 指向的三种方法及其主要区别：

1. call 方法

call() 方法允许我们显式地设置函数或方法的 this 指向。它接受两个参数：

thisArg： 要设置的 this 指向的对象。
arg1, arg2, ...： 传递给函数或方法的参数（可变数量）。

语法：

functionName.call(thisArg, arg1, arg2, ...);

示例：

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

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

greet.call(person); // 输出："Hello, my name is John Doe"

2. apply 方法

apply() 方法与 call() 方法类似，但它接受的参数列表不同。它接受两个参数：

thisArg： 要设置的 this 指向的对象。
args： 一个数组，其中包含传递给函数或方法的参数。

语法：

functionName.apply(thisArg, [args]);

示例：

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

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

greet.apply(person, ["John Doe"]); // 输出："Hello, my name is John Doe"

3. bind 方法

bind() 方法创建了一个新的函数，该函数的 this 指向固定为指定的对象。它接受两个参数：

thisArg： 要设置的 this 指向的对象。
arg1, arg2, ...： 可选的参数，将被预先绑定到新函数中。

语法：

const boundFunction = functionName.bind(thisArg, arg1, arg2, ...);

示例：

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

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const boundGreet = greet.bind(person);
boundGreet(); // 输出："Hello, my name is John Doe"