JavaScript - Function call() 方法

你好呀，未來的編程超新星！今天，我們將要深入探讨 JavaScript 的一個小巧思：call() 方法。別擔心如果你是編程新手；我會一步步引導你，就像我這些年來為無數學生做的那樣。所以，拿起你喜歡的飲料，讓我們展開這次刺激的冒險吧！

Function call() 方法是什麼？

在我們跳進 call() 方法之前，讓我們快速複習一下關於函數的知識。在 JavaScript 中，函數就像是一台執行特定任務的小機器。它們非常有用，一旦你掌握了它們，你會不斷地使用它們！

現在，call() 方法是函數擁有的特別超能力。它讓我們能夠調用（或 invoking）一個函數，並指定 this 鍵字在該函數內應該引用什麼。如果這聽起來有點混亂，別擔心！我們會通過一些例子來分解它。

語法

這是 call() 方法的外觀：

functionName.call(thisArg, arg1, arg2, ...)

• functionName 是我們想要調用的函數。
• thisArg 是我們希望 this 在函數內引用的對象。
• arg1, arg2, ... 是我們想要傳遞給函數的參數。

Function call() 方法的例子

讓我們來看看一些例子，看看 call() 是如何實際運作的！

示例 1：基本使用

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

const person = { name: 'Alice' };

greet.call(person);

如果你運行這段代碼，你會看到：

Hello, my name is Alice!

這裡發生了什麼？我們使用 call() 來調用 greet 函數，但我們告訴它使用 person 作為 this。所以當函數試圖訪問 this.name 時，它實際上是在訪問 person.name。

示例 2：傳遞參數

function introduce(hobby, food) {
console.log(`Hi, I'm ${this.name}. I love ${hobby} and my favorite food is ${food}.`);
}

const person1 = { name: 'Bob' };
const person2 = { name: 'Carol' };

introduce.call(person1, 'coding', 'pizza');
introduce.call(person2, 'painting', 'sushi');

這將輸出：

Hi, I'm Bob. I love coding and my favorite food is pizza.
Hi, I'm Carol. I love painting and my favorite food is sushi.

在這個例子中，我們不僅指定了 this 應該是什麼，還傳遞了參數給函數。call() 方法讓我們能夠同時做到這兩點！

示例 3：借用法

call() 最酷的事情之一就是它讓我們能夠從其他對象“借”方法。讓我告訴你我是什麼意思：

const calculator = {
multiply: function(a, b) {
return a * b;
}
};

const scientific = {
square: function() {
return this.multiply(this.number, this.number);
},
number: 5
};

console.log(scientific.square.call(scientific));  // 這個按預期工作
console.log(calculator.multiply.call(scientific, scientific.number, scientific.number));  // 這個借用了 multiply 方法

輸出：

25
25

在這個例子中，我們從 calculator 對象借用了 multiply 方法，並在 scientific 對象的上下文中使用它。相當酷，不是嗎？

示例 4：與內置方法一起使用 call()

你知道我們甚至可以使用 call() 與 JavaScript 的內置方法一起使用嗎？看看這個：

const numbers = [1, 2, 3, 4, 5];
const max = Math.max.call(null, ...numbers);
console.log(max);  // 輸出：5

在這裡，我們使用 call() 與 Math.max()。null 參數是因為 Math.max() 不使用 this，而我們將 numbers 數組展開為獨立的參數。

與 call() 相關的方法

為了讓你有一個全面的了解，讓我們看看一些與 call() 相關的方法：

方法	描述	語法
call()	使用給定的 this 值和個別提供的參數調用函數	func.call(thisArg, arg1, arg2, ...)
apply()	與 call() 相似，但參數作為數組傳遞	func.apply(thisArg, [argsArray])
bind()	創建一個新函數，具有固定的 this 值	func.bind(thisArg, arg1, arg2, ...)

這些方法的每個都有其使用案例，但當你確定要傳遞哪些參數時，call() 通常是最直接的方法。

結論

就是这样，我親愛的學生們！我們已經從頭到尾探讨了 call() 方法。記住，call() 就像一根魔杖，讓你能夠控制函數內部 this 的含義，並從其他對象借用法。

就像編程中的一切事物一樣，熟能生巧。所以不要害怕在你的代碼中實驗 call()。誰知道呢？你可能會發現自己比想像中更常使用 call()！

持續編程，持續學習，並記住：在 JavaScript 的世界中，你總是只差一個 call() 就能解鎖新的可能性！

Credits: Image by storyset