JavaScript - Function bind() 方法

您好，未来的 JavaScript 巫師們！今天，我們將踏上一段令人興奮的旅程，探索 bind() 方法的世界。別擔心如果你是編程新手——我將成為你的友好導遊，我們將一步步探索這個概念。所以，拿起你喜歡的飲料，舒適地坐好，我們一起來深入了解一下！

Function bind() 方法

想像你在一個化妝派對上，你有能力隨意改變自己的身份。聽起來很有趣，對吧？在 JavaScript 中，函數也有這樣的超级能力，叫做 bind()。它讓函數能夠改變其上下文——換句話說，當函數被調用时，決定 this 指的是什麼。

但等等，這個 this 是什麼東西？別擔心，我們會逐漸解釋！現在，只需將 this 想像成函數的自我身份認同。

語法

讓我們看一下如何使用 bind() 方法：

let boundFunction = originalFunction.bind(thisArg[, arg1[, arg2[, ...]]])

別被這個嚇到！其實它比看起來要簡單。讓我們分解一下：

• originalFunction：這是我們想要綁定的函數。
• thisArg：這是我們想在函數內部讓 this 指向的對象。
• arg1, arg2, ...：這些是我們可以為函數預設的可選參數。

不使用 Function bind() 方法

在我們看到 bind() 的實際作用之前，讓我們先看看一個可能會用到它的情景：

const person = {
name: "Alice",
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};

person.greet(); // 輸出：Hello, my name is Alice

const greetFunction = person.greet;
greetFunction(); // 輸出：Hello, my name is undefined

哇！發生了什麼？當我們調用 person.greet() 時，它正常工作。但是當我們將函數賦值給 greetFunction 並調用它時，突然 this.name 變成了 undefined。就像我們的函數失去了記憶一樣！

這是因為當我們調用 greetFunction() 時，this 不再指向 person。就像是函數忘了它屬於誰。

使用 Function bind() 方法

現在，讓我們看看 bind() 如何拯救這一天：

const person = {
name: "Alice",
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};

const greetFunction = person.greet.bind(person);
greetFunction(); // 輸出：Hello, my name is Alice

太棒了！通過使用 bind(person)，我們告訴函數："嘿，無論你走到哪裡，記住 this 永遠指向 person。" 現在我們的函數永遠會知道它的身份！

範例：將同一函數綁定到不同的對象

讓我們來點樂趣，看看我們如何將同一個函數用於不同的對象：

function introduce() {
console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
}

const alice = { name: "Alice", age: 25 };
const bob = { name: "Bob", age: 30 };

const introduceAlice = introduce.bind(alice);
const introduceBob = introduce.bind(bob);

introduceAlice(); // 輸出：Hi, I'm Alice and I'm 25 years old.
introduceBob();   // 輸出：Hi, I'm Bob and I'm 30 years old.

這不是很酷嗎？就像我們的 introduce 函數是一個變色龍，根據我們綁定的對象改變其身份！

範例：設定函數參數的默認值

bind() 還有一個絕招——它可以為函數預設參數：

function greet(greeting, punctuation) {
console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Charlie" };

const casualGreet = greet.bind(person, "Hey");
casualGreet("!"); // 輸出：Hey, Charlie!

const formalGreet = greet.bind(person, "Good day", ".");
formalGreet(); // 輸出：Good day, Charlie.

在這裡，我們使用 bind() 不僅設定了 this，還預設了一些參數。這就像準備一個部分填寫的表單——非常方便！

方法表格

這裡是我們討論過的方法的快速參考表格：

方法	描述	語法
bind()	創建一個具有固定 this 值的新函數	function.bind(thisArg[, arg1[, arg2[, ...]]])

記住，bind() 只是 JavaScript 中的許多強大工具之一。在你繼續編程之旅時，你會發現更多令人興奮的特性！

總結來說，bind() 就像一種神奇的膠水，能夠將函數和對象粘在一起，確保它們總是和諧地一起工作。它是一個強大的工具，可以使你的代碼更加靈活和可重用。

繼續練習，保持好奇心，很快你就能像專家一樣綁定函數了！祝編程愉快，未來的 JavaScript 大師們！

Credits: Image by storyset