【JavaScript】Function的祖传方法call与apply

**函数的祖传方法: call 与 apply**

在 JavaScript 中，函数是第一类公民。每个函数都有自己的属性和行为，而其中一些行为尤其重要，它们使得函数能够与其他对象进行交互。在本文中，我们将讨论两个非常重要的函数方法：`call()` 和 `apply()`。

**什么是 call() 方法?**

`call()` 方法用于调用一个函数，并传递给它的参数。它接受两个参数：第一个是要调用的函数，第二个是作为参数传递给该函数的值。

javascriptfunction sayHello(name) {
 console.log(`Hello, ${name}!`);
}

sayHello('Alice'); // Hello, Alice!

// 使用 call() 方法var obj = { name: 'Bob' };
sayHello.call(obj, 'Bob'); // Hello, Bob!

在上面的例子中，我们定义了一个函数 `sayHello()`，它接受一个参数 `name`。然后我们使用 `call()` 方法来调用这个函数，并传递 `'Alice'` 作为参数。

**什么是 apply() 方法?**

`apply()` 方法与 `call()` 方法非常相似，它也用于调用一个函数并传递给它的参数。但是，`apply()` 方法接受两个参数：第一个是要调用的函数，第二个是一个数组作为参数。

javascriptfunction sayHello(name) {
 console.log(`Hello, ${name}!`);
}

sayHello('Alice'); // Hello, Alice!

// 使用 apply() 方法var obj = { name: 'Bob' };
var args = ['Bob'];
sayHello.apply(obj, args); // Hello, Bob!

在上面的例子中，我们使用 `apply()` 方法来调用函数 `sayHello()`，并传递一个数组作为参数。

**call() 和 apply() 的区别**

虽然 `call()` 和 `apply()` 都用于调用函数并传递给它的参数，但是它们有一个关键的区别：`call()` 方法接受多个参数，而 `apply()` 方法只接受一个数组作为参数。

javascriptfunction sayHello(name, age) {
 console.log(`Hello, ${name}! You are ${age} years old.`);
}

sayHello('Alice',25); // Hello, Alice! You are25 years old.

// 使用 call() 方法var obj = { name: 'Bob' };
sayHello.call(obj, 'Bob',30); // Hello, Bob! You are30 years old.

在上面的例子中，我们定义了一个函数 `sayHello()`，它接受两个参数 `name` 和 `age`。然后我们使用 `call()` 方法来调用这个函数，并传递 `'Alice'` 和 `25` 作为参数。

javascriptfunction sayHello(name, age) {
 console.log(`Hello, ${name}! You are ${age} years old.`);
}

sayHello('Alice',25); // Hello, Alice! You are25 years old.

// 使用 apply() 方法var obj = { name: 'Bob' };
var args = [30];
sayHello.apply(obj, args); // Hello, Bob! You are30 years old.

在上面的例子中，我们使用 `apply()` 方法来调用函数 `sayHello()`，并传递一个数组作为参数。

**call() 和 apply() 的应用场景**

`call()` 和 `apply()` 方法有很多应用场景。例如：

* 在 JavaScript 中，函数是第一类公民，每个函数都有自己的属性和行为。
* 当我们需要调用一个函数，并传递给它的参数时，我们可以使用 `call()` 或 `apply()` 方法。
* 如果我们需要传递多个参数，我们可以使用 `call()` 方法。如果我们需要传递一个数组作为参数，我们可以使用 `apply()` 方法。

javascriptfunction sayHello(name) {
 console.log(`Hello, ${name}!`);
}

sayHello('Alice'); // Hello, Alice!

// 使用 call() 方法var obj = { name: 'Bob' };
sayHello.call(obj, 'Bob'); // Hello, Bob!

在上面的例子中，我们定义了一个函数 `sayHello()`，它接受一个参数 `name`。然后我们使用 `call()` 方法来调用这个函数，并传递 `'Alice'` 作为参数。

javascriptfunction sayHello(name) {
 console.log(`Hello, ${name}!`);
}

sayHello('Alice'); // Hello, Alice!

// 使用 apply() 方法var obj = { name: 'Bob' };
var args = ['Bob'];
sayHello.apply(obj, args); // Hello, Bob!

在上面的例子中，我们使用 `apply()` 方法来调用函数 `sayHello()`，并传递一个数组作为参数。

**总结**

`call()` 和 `apply()` 方法是 JavaScript 中非常重要的函数方法，它们使得函数能够与其他对象进行交互。在本文中，我们讨论了这两个方法的定义、区别和应用场景。通过阅读本文，读者可以了解如何使用 `call()` 和 `apply()` 方法来调用函数并传递给它的参数。

**参考**

* MDN Web Docs：`call()`
* MDN Web Docs：`apply()`

**更新历史**

*2023-02-20：首次发布*2023-03-01：修订了部分内容