另一個關於呼叫、應用和綁定的部落格..!!-js教程-PHP中文網

另一個關於呼叫、應用和綁定的部落格..!!

DDD

發布： 2024-11-25 09:17:11

原創

928 人瀏覽過

Yet another blog on Call, Apply & Bind..!!
布拉布拉布拉..

好的，聽我說..!!

數百篇部落格和教學解釋了呼叫、綁定和應用。哎呀，甚至 ChatGPT 和 Copilot 都可以為您簡化它們！

那為什麼還要發一篇文章呢？好吧，這不是給你的，這是我在重新審視 JavaScript 基礎知識時的自我筆記。

即使在前端開發了 8 年後，我有時也會混淆這些方法。事實證明，這種混亂往往源於它們在面試問題中的分組方式。這次讓我以一種容易記住的方式為您分解。

我們可以跳到精彩的部分嗎？

為什麼面試的時候總是呼叫、綁定、申請？從功能上講，call 和 apply 更接近，它們立即呼叫該函數，而 bind 則傳回一個新函數。這就是為什麼我在標題中將它們分組。

讓我們看看它們的用法以更好地理解它。

通話、綁定和應用之間有什麼共同點？

call 、 bind 和apply 是函數上可用的方法，讓您明確設定this 的值並傳遞函數的參數。

呼叫、綁定和應用之間有什麼區別？

當 Call 和 Apply Immediately 呼叫該函數時，Bind 方法不會立即呼叫函數。相反，它會傳回一個新函數，並將 this 設為指定值，並且可以稍後呼叫/執行此傳回的函數。

那麼Call和Apply有什麼差別呢？

雖然 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));

登入後複製

另外，我希望這張表能幫助您更好地理解。

功能	執行	參數	用例
來電	立即執行函數	單獨通過	當你在呼叫時知道參數時
申請	立即執行函數	作為數組傳遞	當參數位於陣列中
綁定	傳回一個新函數（不執行）	可選擇預先填入新功能	當您需要可重複使用或預先設定的功能時