布拉布拉布拉..

好的，聽我說..!!

數(shù)百篇博客和教程解釋了調(diào)用、綁定和應(yīng)用。哎呀，甚至 ChatGPT 和 Copilot 都可以為您簡化它們！

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

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

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

為什么面試的時候總是調(diào)用、綁定、申請？從功能上講，call 和 apply 更接近，它們立即調(diào)用該函數(shù)，而 bind 返回一個新函數(shù)。這就是為什么我在標(biāo)題中將它們分組。

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

呼叫、綁定和應(yīng)用之間有什么共同點？

call 、 bind 和 apply 是函數(shù)上可用的方法，允許您顯式設(shè)置 this 的值并傳遞函數(shù)的參數(shù)。

調(diào)用、綁定和應(yīng)用之間有什么區(qū)別？

當(dāng) Call 和 Apply Immediately 調(diào)用該函數(shù)時，Bind 方法不會立即調(diào)用該函數(shù)。相反，它返回一個新函數(shù)，并將 this 設(shè)置為指定值，并且可以稍后調(diào)用/執(zhí)行此返回的函數(shù)。

那么Call和Apply有什么區(qū)別呢？

雖然 Call 和 Apply 都會立即使用自定義 this 調(diào)用函數(shù)，但它們?nèi)绾尾捎酶郊訁?shù)來區(qū)分它們。

Call 接受單個參數(shù)，而 Apply 接受一組參數(shù)。

示例

讓我們看看下面的參數(shù)來了解 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

一些額外的例子

使用調(diào)用:從另一個對象借用方法：

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 :查找數(shù)組中的最大值：

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

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

這就是全部，伙計們！我希望這篇關(guān)于呼叫、應(yīng)用和綁定的簡短說明對您有所幫助。如果您喜歡這個，請在??我的網(wǎng)站上查看更多文章，https://nandan.dev/

歡迎發(fā)表評論，發(fā)送電子郵件至 connect@nandan.dev，或在 Twitter、Instagram 或 GitHub 上與我聯(lián)系。不要忘記訂閱我的時事通訊以獲取有關(guān) JavaScript 主題的定期更新！

推特 | Instagram | Github | 網(wǎng)站

以上是另一個關(guān)于呼叫、應(yīng)用和綁定的博客..!!的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！