JavaScript 中Apply, Call与Bind 方法的差异

在 JavaScript 中，apply、call 和 bind 是用于调用函数的方法，它们可以用于改变函数的执行上下文（即函数内部的 this 值）。

• apply 方法：apply 方法允许您在调用函数时指定函数的执行上下文和参数。
• 它接受两个参数：第一个参数是要设置为函数执行上下文的对象，第二个参数是一个数组或类数组对象，包含要传递给函数的参数。

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

const person = {
  name: 'John'
};

greet.apply(person, ['Alice']);
// 输出：Hello, Alice! My name is John.

在上面的示例中，我们使用 apply 方法将 person 对象作为函数 greet 的执行上下文，并传递一个包含参数 'Alice' 的数组。

• call 方法：call 方法与 apply 方法类似，它也允许您指定函数的执行上下文和参数。
• 不同之处在于，call 方法接受的参数是一个逗号分隔的参数列表，而不是数组。

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

const person = {
  name: 'John'
};

greet.call(person, 'Alice');
// 输出：Hello, Alice! My name is John.

在上面的示例中，我们使用 call 方法将 person 对象作为函数 greet 的执行上下文，并传递一个参数 'Alice'。

• bind 方法：bind 方法创建一个新的函数，将指定的执行上下文绑定到原始函数，并返回这个新函数。
• 与 apply 和 call 不同，bind 方法不会立即调用函数，而是返回一个绑定了执行上下文的函数。

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

const person = {
  name: 'John'
};

const greetPerson = greet.bind(person);
greetPerson('Alice');
// 输出：Hello, Alice! My name is John.

在上面的示例中，我们使用 bind 方法将 person 对象作为函数 greet 的执行上下文，并创建了一个新的函数 greetPerson。然后，我们调用 greetPerson 并传递参数 'Alice'。

apply、call 和 bind 方法非常有用，可以在需要更改函数执行上下文的情况下灵活地使用它们。