了解JavaScript中的“此”關(guān)鍵字

JavaScript中的this關(guān)鍵字是指執(zhí)行當(dāng)前函數(shù)的對(duì)象。它的值不是固定的，並且取決於調(diào)用函數(shù)的方式。了解這種動(dòng)態(tài)行為至關(guān)重要，以避免JavaScript編程中的常見(jiàn)錯(cuò)誤。 this值是在運(yùn)行時(shí)確定的，而不是在編譯時(shí)確定。這意味著其值是根據(jù)調(diào)用函數(shù)的上下文來(lái)決定的。沒(méi)有一個(gè)靜態(tài)的定義；相反，這取決於四個(gè)主要上下文：

1. 全局上下文：在非圖案模式環(huán)境中，如果調(diào)用一個(gè)函數(shù)而不與對(duì)象關(guān)聯(lián)（例如，獨(dú)立函數(shù)調(diào)用）， this通常會(huì)參考全局對(duì)象（瀏覽器中的窗口或node.js中的global）。在嚴(yán)格的模式下（ 'use strict'; ），在這種情況下， this將是undefined 。
2. 方法上下文：當(dāng)函數(shù)稱為對(duì)象的方法（例如， object.method() ）時(shí)， this是指對(duì)象本身。這是最常見(jiàn)和最直接的用法。
3. 構(gòu)造函數(shù)上下文：在帶有new關(guān)鍵字的構(gòu)造函數(shù)函數(shù)中， this是指新創(chuàng)建的對(duì)象實(shí)例。這是JavaScript中面向?qū)ο蟮木幊痰幕A(chǔ)。
4. 顯式綁定：您可以使用call() ， apply()和bind()之類的方法明確設(shè)置this值。這些方法允許您調(diào)用具有this值的函數(shù)，從而覆蓋默認(rèn)上下文確定。

箭頭功能和這種綁定

是的，箭頭功能（ => ）在管理this綁定方面具有重要的優(yōu)勢(shì)。與常規(guī)功能不同，箭頭功能沒(méi)有自己的this 。相反，它們將this粘合到周圍（封閉）範(fàn)圍。這意味著在箭頭函數(shù)中的this取決於定義箭頭函數(shù)的位置，而不是稱為箭頭函數(shù)的位置。這種行為消除了與this相關(guān)的許多常見(jiàn)陷阱。

例如：

 <code class="javascript">const obj = { method: function() { setTimeout(function() { // Regular function, this will be the global object console.log(this); }, 1000); setTimeout(() => { // Arrow function, this will be obj console.log(this); }, 1000); } }; obj.method();</code>

在此代碼中，常規(guī)的setTimeout回調(diào)可能會(huì)記錄全局對(duì)象，而箭頭函數(shù)回調(diào)將正確記錄obj對(duì)象。這是因?yàn)榧^函數(shù)從其周圍範(fàn)圍（ method函數(shù)）繼承了this值。

直接函數(shù)調(diào)用與方法調(diào)用

當(dāng)函數(shù)被直接調(diào)用而不是作為方法調(diào)用時(shí)， this值將顯著不同。

• 直接函數(shù)調(diào)用：如上所述，在非圖案模式下， this通常指向全局對(duì)象。在嚴(yán)格的模式下，它是undefined 。
• 方法調(diào)用：當(dāng)函數(shù)稱為對(duì)象的方法（例如myObject.myMethod() ）時(shí)， this是指對(duì)象（在這種情況下為myObject ）。

考慮此示例：

 <code class="javascript">function myFunction() { console.log(this); } const myObject = { myMethod: myFunction }; myFunction(); // this likely refers to the global object (or undefined in strict mode) myObject.myMethod(); // this refers to myObject</code>

在復(fù)雜的應(yīng)用程序中管理“此”

在大型JavaScript應(yīng)用程序中管理this需要仔細(xì)的計(jì)劃和一致的編碼實(shí)踐。以下是一些常見(jiàn)策略：

• 箭頭功能：盡可能自由地使用箭頭功能，尤其是在回調(diào)和事件處理程序中，以避免this綁定問(wèn)題。
• 顯式綁定（ .bind() ，. .call() ，. .apply() ）：使用這些方法在必要時(shí)明確設(shè)置this值，尤其是在將函數(shù)傳遞為回調(diào)或參數(shù)時(shí)。 bind()創(chuàng)建一個(gè)具有永久綁定this值的新函數(shù)； call()並apply()立即使用指定的值調(diào)用this功能。
• 類：使用ES6類提供了一種更清潔，更結(jié)構(gòu)化的方法，可以在面向?qū)ο蟮拇a中管理this 。類方法中的this關(guān)鍵字正確指的是類的實(shí)例。
• 上下文保存庫(kù)： Lodash（例如Lodash）提供的一些庫(kù)提供實(shí)用程序功能，可幫助您更有效地管理上下文和回調(diào)。
• 一致的編碼樣式：建立明確的指導(dǎo)方針，以在團(tuán)隊(duì)中使用this來(lái)促進(jìn)一致性並減少錯(cuò)誤。避免在可能的情況下依靠this綁定。有利於明確的結(jié)合或箭頭功能，以清晰度和可預(yù)測(cè)性。

通過(guò)採(cǎi)用這些策略，您可以大大降低與JavaScript應(yīng)用程序中this關(guān)鍵字相關(guān)的意外行為的風(fēng)險(xiǎn)，從而導(dǎo)致更健壯和可維護(hù)的代碼。

以上是'這個(gè)”是什麼JavaScript中的關(guān)鍵字，其價(jià)值根據(jù)上下文如何變化？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！