布拉布拉布拉..

好的，聽(tīng)我說(shuō)..!!

數(shù)百篇部落格和教學(xué)解釋了呼叫、綁定和應(yīng)用。哎呀，甚至 ChatGPT 和 Copilot 都可以為您簡(jiǎn)化它們！

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

即使在前端開(kāi)發(fā)了 8 年後，我有時(shí)也會(huì)混淆這些方法。事實(shí)證明，這種混亂往往源於它們?cè)诿嬖噯?wèn)題中的分組方式。這次讓我以一種容易記住的方式為您分解。

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

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

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

通話、綁定和應(yīng)用之間有什麼共同點(diǎn)？

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

呼叫、綁定和應(yīng)用之間有什麼區(qū)別？

當(dāng) Call 和 Apply Immediately 呼叫該函數(shù)時(shí)，Bind 方法不會(huì)立即呼叫函數(shù)。相反，它會(huì)傳回一個(gè)新函數(shù)，並將 this 設(shè)為指定值，並且可以稍後呼叫/執(zhí)行此傳回的函數(shù)。

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

雖然 Call 和 Apply 都會(huì)立即使用自訂 this 呼叫函數(shù)，但它們?nèi)绾螔?cǎi)用附加參數(shù)來(lái)區(qū)分它們。

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

範(fàn)例

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

一些額外的例子

使用呼叫:從另一個(gè)物件借用方法：

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進(jìn)行事件處理:

let button = document.getElementById("myButton");
let user = {
    name: "Nandan",
    greet() {
        console.log(`Hello, ${this.name}`);
    }
};

button.addEventListener("click", user.greet.bind(user));

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

這就是全部，夥計(jì)們！我希望這篇關(guān)於呼叫、應(yīng)用和綁定的簡(jiǎn)短說(shuō)明對(duì)您有所幫助。如果您喜歡這個(gè)，請(qǐng)?jiān)谖业木W(wǎng)站上查看更多文章，https://nandan.dev/

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

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

以上是另一個(gè)關(guān)於呼叫、應(yīng)用和綁定的部落格..!!的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！