布拉布拉布拉..
好的，聽我說..!!
數百篇部落格和教學解釋了呼叫、綁定和應用。哎呀，甚至 ChatGPT 和 Copilot 都可以為您簡化它們！
那為什麼還要發一篇文章呢？好吧，這不是給你的，這是我在重新審視 JavaScript 基礎知識時的自我筆記。
即使在前端開發了 8 年後，我有時也會混淆這些方法。事實證明，這種混亂往往源於它們在面試問題中的分組方式。這次讓我以一種容易記住的方式為您分解。
為什麼面試的時候總是呼叫、綁定、申請？從功能上講，call 和 apply 更接近，它們立即呼叫該函數，而 bind 則傳回一個新函數。這就是為什麼我在標題中將它們分組。
讓我們看看它們的用法以更好地理解它。
call 、 bind 和apply 是函數上可用的方法，讓您明確設定this 的值並傳遞函數的參數。
當 Call 和 Apply Immediately 呼叫該函數時，Bind 方法不會立即呼叫函數。相反，它會傳回一個新函數，並將 this 設為指定值，並且可以稍後呼叫/執行此傳回的函數。
雖然 Call 和 Apply 都會立即使用自訂 this 呼叫函數，但它們如何採用附加參數來區分它們。
Call 接受單一參數，而 Apply 接受一組參數。
讓我們看看下面的參數來了解 call、apply 和 bind 的用法。
function Greetings(greeting,punctuation){
return `${greeting} ${this.name} ${punctuation}`
}
var person = {
name : "Nandan"
}
// Call: Immediately invokes the function with individual arguments
console.log(Greetings.call(person,"Hello","!")); // Output : Hello Nandan !
// Apply: Immediately invokes the function, but takes arguments as an array
console.log(Greetings.apply(person,["Hello","!"])); // Output : Hello Nandan !
// Bind: Returns a new function with `this` bound to the specified value
let greet = Greetings.bind(person,"Hello","!");
console.log(greet()); // Output : Hello Nandan !
//Note:
console.log(Greetings.bind(person,"Hello","!")); // Output : It will return a function
使用呼叫:從另一個物件借用方法：
let person1 = { name: "Nandan" };
let person2 = { name: "Kumar" };
function introduce() {
console.log(`Hi, my name is ${this.name}`);
}
introduce.call(person1); // Hi, my name is Nandan
introduce.call(person2); // Hi, my name is Kumar
使用 apply :找出陣列中的最大值：
let numbers = [1, 2, 3, 4, 5]; console.log(Math.max.apply(null, numbers)); // 5
使用綁定:使用自訂this進行事件處理:
let button = document.getElementById("myButton");
let user = {
name: "Nandan",
greet() {
console.log(`Hello, ${this.name}`);
}
};
button.addEventListener("click", user.greet.bind(user));
另外，我希望這張表能幫助您更好地理解。
功能 |
執行 |
參數 |
用例 |
來電 |
立即執行函數 |
單獨通過 |
當你在呼叫時知道參數時 |
申請 |
立即執行函數 |
作為數組傳遞 |
當參數位於陣列中 |
綁定 |
傳回一個新函數（不執行） |
可選擇預先填入新功能 |
當您需要可重複使用或預先設定的功能時 |
這就是全部，夥計們！我希望這篇關於呼叫、應用和綁定的簡短說明對您有所幫助。如果您喜歡這個，請在我的網站上查看更多文章，https://nandan.dev/
歡迎發表評論，發送電子郵件至 connect@nandan.dev，或在 Twitter、Instagram 或 GitHub 上與我聯繫。不要忘記訂閱我的電子報以獲取有關 JavaScript 主題的定期更新！
推特 | Instagram | Github | 網站
以上是另一個關於呼叫、應用和綁定的部落格..!!的詳細內容。更多資訊請關注PHP中文網其他相關文章！
