掌握call ， apply和bind在JavaScript：綜合指南

本文探討了call ， apply和bind在JavaScript中的細(xì)微差別，重點(diǎn)介紹了它們?cè)诳刂?code>this價(jià)值方面的使用。

如何使用call ， apply和bind來(lái)控制JavaScript中“此”的值？

在JavaScript中， this關(guān)鍵字是指擁有當(dāng)前執(zhí)行函數(shù)的對(duì)象。但是， this的價(jià)值可能是不可預(yù)測(cè)的，尤其是在作為回調(diào)傳遞或在事件處理程序中使用的功能中。 call ， apply和bind提供了一種明確設(shè)置this值的方法，使您可以精確控制功能上下文。

• call() ：此方法立即調(diào)用一個(gè)函數(shù)，將this值設(shè)置為傳遞給它的第一個(gè)參數(shù)。隨后的參數(shù)作為單個(gè)參數(shù)將其傳遞給該函數(shù)。

 <code class="javascript">function greet(greeting) { console.log(greeting ", " this.name); } const person = { name: "Alice" }; greet.call(person, "Hello"); // Output: Hello, Alice</code>

• apply() ：類(lèi)似于call() ， apply()也立即調(diào)用功能并設(shè)置this值。但是，它沒(méi)有單個(gè)參數(shù)，而是接受參數(shù)的數(shù)組（或類(lèi)似數(shù)組的對(duì)象）。

 <code class="javascript">function sum(a, b) { return ab this.value; } const obj = { value: 10 }; const numbers = [5, 3]; const result = sum.apply(obj, numbers); // Output: 18</code>

• bind() ：與call()和apply()不同， bind()不會(huì)立即調(diào)用函數(shù)。取而代之的是，它創(chuàng)建了一個(gè)新函數(shù)，當(dāng)調(diào)用時(shí)，將其this值設(shè)置為提供的值。這對(duì)于創(chuàng)建部分應(yīng)用的功能或確保在回調(diào)中保持一致的this很有用。

 <code class="javascript">function sayHello() { console.log("Hello, " this.name); } const person = { name: "Bob" }; const boundSayHello = sayHello.bind(person); boundSayHello(); // Output: Hello, Bob</code>

在JavaScript中call ， apply和bind之間有什么實(shí)際差異？

關(guān)鍵區(qū)別在于當(dāng)他們執(zhí)行功能以及如何處理參數(shù)時(shí)：

• call()和apply() ：這些方法立即執(zhí)行該功能。 call()進(jìn)行單獨(dú)的參數(shù)，而apply()則采用一系列參數(shù)。對(duì)于少量固定的參數(shù)，請(qǐng)選擇call() ，然后在有數(shù)組或可變數(shù)量的參數(shù)時(shí)apply() 。
• bind() ：此方法返回一個(gè)新功能，稍后將其鍵入該功能，將this綁定到指定值。它不會(huì)立即執(zhí)行該功能。當(dāng)您需要預(yù)先設(shè)置this上下文以進(jìn)行以后執(zhí)行時(shí)，例如使用回調(diào)或事件處理程序時(shí)，請(qǐng)使用bind() 。

如何使用call ， apply和bind來(lái)解決JavaScript中的常見(jiàn)“此”關(guān)鍵字問(wèn)題？

常見(jiàn)的“此”問(wèn)題出現(xiàn)在回調(diào)中（例如， setTimeout ， addEventListener ），而將作為參數(shù)傳遞給其他函數(shù)的方法。 call ， apply和bind要約解決方案：

• 回調(diào)：在回調(diào)中， this通常是指全局對(duì)象（瀏覽器中的窗口或以嚴(yán)格模式不確定）。 bind()在這里是理想的：

 <code class="javascript">const myObject = { name: "Charlie", logName: function() { console.log(this.name); } }; setTimeout(myObject.logName.bind(myObject), 1000); // Ensures 'this' refers to myObject</code>

• 方法傳遞為參數(shù)：將方法作為參數(shù)傳遞給另一個(gè)函數(shù)時(shí)， this上下文可能會(huì)改變。 call()或apply()可以維護(hù)正確的上下文：

 <code class="javascript">function processData(callback) { const data = { value: 20 }; callback.call(data, data.value); //Ensures this refers to the data object } function myCallback(val){ console.log("Value is: " val " and this.value is: " this.value); } processData(myCallback); // Output: Value is: 20 and this.value is: 20</code>

我什么時(shí)候應(yīng)該選擇call ， apply或bind以操縱JavaScript函數(shù)的上下文？

選擇取決于特定情況：

• 立即執(zhí)行單個(gè)參數(shù)：使用call() 。
• 立即執(zhí)行一系列參數(shù)：使用apply() 。
• 延遲執(zhí)行，預(yù)先this ：使用bind() 。

通過(guò)了解這些差異并適當(dāng)?shù)貞?yīng)用它們，您可以在JavaScript代碼中有效地管理this上下文，避免出乎意料的行為并編寫(xiě)更強(qiáng)大和可維護(hù)的功能。

以上是我如何使用呼叫，應(yīng)用和綁定來(lái)控制'此”的價(jià)值。在JavaScript？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！