JavaScript 中 apply, call, bind 的区别及说明

在 JavaScript 中，apply、call 和 bind 是三个用于函数调用的方法，它们都允许你以不同的方式调用函数。下面将详细解释这三个方法的区别，并提供示例。

call 方法

call 方法立即调用某个函数，并且可以指定 this 值以及参数列表。

语法：

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

• thisArg：在调用函数时作为 this 的值。
• arg1, arg2, ...：函数的参数列表。

示例：

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'dragons96' };

greet.call(person, 'Hello', '!'); // 输出: Hello, dragons96

在这个例子中，call 方法将 person 对象作为 this 值传递给 greet 函数。

apply 方法

apply 方法与 call 类似，也是立即调用函数，但是它接受一个参数数组。

语法：

func.apply(thisArg, [argsArray]);

• thisArg：在调用函数时作为 this 的值。
• argsArray：一个数组或类数组对象，其中的元素将作为参数传递给函数。

示例：

function sum(a, b) {
  console.log(this.name + ' sees the sum as: ' + (a + b));
}

const person = { name: 'dragons96' };

sum.apply(person, [1, 2]); // 输出: dragons96 sees the sum as: 3

在这个例子中，apply 方法将 person 对象作为 this 值传递给 sum 函数，并且使用数组 [1, 2] 作为参数。

bind 方法

bind 方法不会立即调用函数，而是返回一个新的函数，其 this 值被设置为 bind 方法的第一个参数。

语法：

const newFunc = func.bind(thisArg, arg1, arg2, ...);

• thisArg：在调用函数时作为 this 的值。
• arg1, arg2, ...：当绑定函数被调用时，这些值将作为参数传入。

示例：

function thankYou(append) {
  console.log('Thank you for ' + append + ', ' + this.name + '!');
}

const teacher = { name: 'Teacher' };

const thankYouForTheGift = thankYou.bind(teacher, 'the gift');
thankYouForTheGift(); // 输出: Thank you for the gift, Teacher!

在这个例子中，bind 方法创建了一个新的函数 thankYouForTheGift，它在调用时将 teacher 对象作为 this 值，并且预设了参数 'the gift'。

区别总结

• call 和 apply 都是用来立即调用函数的，而 bind 用于创建一个新的函数，可以稍后调用。
• call 接受一系列的参数，而 apply 接受一个参数数组。
• bind 返回一个新的函数，这个函数的 this 值和参数已经被预设。

这三个方法都可以用来调用函数并设置其 this 值，但是它们在参数的传递和调用时机上有所不同。在实际开发中，根据需要选择合适的方法来使用。