JavaScript - 方法 apply()

您好，未來的 JavaScript 巫師們！今天，我們將要深入探討 JavaScript 中最強大和最靈活的方法之一：apply() 方法。在這個教程結束時，您將能像專家一樣使用 apply()！讓我們一起開始這個令人興奮的旅程。

什麼是 Function apply() 方法？

apply() 方法是一個內置的 JavaScript 函數，讓我們可以用給定的 this 值和作為數組（或類數組對象）提供的參數來調用函數。它就像一根魔杖，讓您可以控制函數的執行方式！

Why is apply() important?

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. 我們定義了一個使用 this.name 的 greet 函數。
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