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

本文探討了call ， apply和bind在JavaScript中的細(xì)微差別，重點介紹了它們在控制this價值方面的使用。

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

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

• call() ：此方法立即調(diào)用一個函數(shù)，將this值設(shè)置為傳遞給它的第一個參數(shù)。隨后的參數(shù)作為單個參數(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() ：類似于call() ， apply()也立即調(diào)用功能并設(shè)置this值。但是，它沒有單個參數(shù)，而是接受參數(shù)的數(shù)組（或類似數(shù)組的對象）。

 <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()不會立即調(diào)用函數(shù)。取而代之的是，它創(chuàng)建了一個新函數(shù)，當(dāng)調(diào)用時，將其this值設(shè)置為提供的值。這對于創(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之間有什么實際差異？

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

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

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

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

• 回調(diào)：在回調(diào)中， this通常是指全局對象（瀏覽器中的窗口或以嚴(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ù)傳遞給另一個函數(shù)時， this上下文可能會改變。 call()或apply()可以維護正確的上下文：

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

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

選擇取決于特定情況：

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

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

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