JavaScript - Function apply() 方法

你好，未来的JavaScript大师们！今天，我们将深入探讨JavaScript中最强大和最灵活的方法之一：apply()方法。在本教程结束时，你将能够像专业人士一样使用apply()！让我们一起开始这段激动人心的旅程。

Function apply() 方法是什么？

apply()方法是JavaScript内置的函数，允许我们用给定的this值和作为数组（或类数组对象）提供的参数来调用函数。它就像一根魔法棒，让你可以控制函数的执行方式！

为什么apply()很重要？

1. 它让我们在调用函数时具有灵活性。
2. 它允许我们从其他对象借用方法。
3. 当处理可变数量的参数时，它超级有用。

现在，让我们看看语法，然后深入一些示例！

apply()的语法

以下是apply()方法的基本语法：

functionName.apply(thisArg, [argsArray])

让我们分解一下：

• functionName：你想调用的函数。
• thisArg：为函数调用提供的this值。
• argsArray：一个数组或类数组对象，指定调用functionName时应使用的参数。

现在看起来可能有点令人困惑，但别担心！我们会通过大量的示例来使其变得清晰。

apply()的使用示例

示例1：基本用法

让我们从一个简单的示例开始：

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

const person = { name: 'Alice' };

greet.apply(person, ['Bob']);

输出：

Hello, Bob! My name is Alice.

在这个示例中：

1. 我们定义了一个greet函数，它使用this.name。
2. 我们创建了一个带有name属性的person对象。
3. 我们使用apply()来调用greet，将this设置为person并传递'Bob'作为参数。

这里的魔法在于apply()允许我们设置函数内部this的指向。酷吧？

示例2：使用apply()和Math.max()

这是一个使用Math.max()的实际示例：

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);

输出：

7

在这种情况下：

1. 我们有一个数字数组。
2. 我们使用apply()直接将此数组传递给Math.max()。
3. 使用null作为第一个参数，因为Math.max()不使用this。

当有一个数字数组并想找到最大值时，这非常有用！

示例3：借用数组方法

现在，让我们看看如何使用apply()来借用方法：

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

const actualArray = Array.prototype.slice.apply(arrayLike);

console.log(actualArray);

输出：

['a', 'b', 'c']

这里发生了什么？

1. 我们有一个看起来像数组但实际上不是的对象。
2. 我们从Array.prototype借用slice()方法。
3. apply()允许我们在类数组对象上使用slice()，将其转换为真实数组。

当处理DOM元素或其他类数组对象时，这非常有用！

示例4：应用带有多个参数的函数

让我们尝试一些更复杂的内容：

function introduce(greeting, hobby) {
console.log(`${greeting}, I'm ${this.name}. I love ${hobby}!`);
}

const person1 = { name: 'Charlie' };
const person2 = { name: 'Diana' };

introduce.apply(person1, ['Hi there', 'coding']);
introduce.apply(person2, ['Hello', 'painting']);

输出：

Hi there, I'm Charlie. I love coding!
Hello, I'm Diana. I love painting!

在这个示例中：

1. 我们定义了一个introduce函数，它接受两个参数。
2. 我们创建了两个person对象。
3. 我们使用apply()为每个人调用introduce，传递不同的参数。

这展示了apply()如何用于带有多个参数和不同this值的情况。

函数方法的比较

让我们比较一下apply()和它的兄弟call()和bind()：

方法	语法	描述
apply()	func.apply(thisArg, [argsArray])	用给定的this值和参数数组调用函数
call()	func.call(thisArg, arg1, arg2, ...)	与apply()类似，但参数是单独传递的
bind()	func.bind(thisArg, arg1, arg2, ...)	创建一个新函数，具有固定的this值和初始参数

每个方法都有其用例，但apply()在参数为数组或需要处理类数组对象时最为出色。

结论

恭喜你！你已经深入了解了apply()的世界。从基本用法到借用方法以及处理多个参数，你已经看到了这个方法的多功能和强大。

记住，apply()就像是你在JavaScript工具包中的瑞士军刀。它可能需要一些练习才能掌握，但一旦你做到了，你会发现自己在各种情况下都会用到它。

继续尝试使用apply()，并且不要害怕发挥创意。谁知道呢？你可能会通过apply()自己成为JavaScript大师！祝编程愉快，未来的开发者们！

Credits: Image by storyset