這是由調(diào)用函數(shù)的方式而不是定義的位置決定的。 2。按優(yōu)先順序順序排列的四個(gè)規(guī)則是：如果使用了新規(guī)則，則指的是新創(chuàng)建的實(shí)例；如果使用，使用或綁定，則將其明確設(shè)置為提供的對(duì)象；如果在對(duì)像上調(diào)用函數(shù)（例如，obj.func（）），則該函數(shù)是指點(diǎn)之前的對(duì)象。否則，此默認(rèn)為非圖案模式或在嚴(yán)格模式下未定義的全局對(duì)象。 3.箭頭功能沒(méi)有自己的功能，而是從封閉的詞彙範(fàn)圍中繼承它，使其可用於在封閉和回調(diào)中保存上下文。 4。可以使用bind（）或箭頭功能包裝器來(lái)固定常見(jiàn)的陷阱，例如在事件處理程序中丟失上下文，以維護(hù)預(yù)期的值。了解這些規(guī)則使開(kāi)發(fā)人員可以可靠地預(yù)測(cè)這種行為。

JavaScript this關(guān)鍵字使許多開(kāi)發(fā)人員感到困惑 - 不是因?yàn)樗举|(zhì)上是複雜的，而是因?yàn)槠鋬r(jià)值根據(jù)函數(shù)的調(diào)用方式而變化。一旦您理解了統(tǒng)治this規(guī)則的規(guī)則，它就不再是神秘的。讓我們以清晰度和實(shí)踐示例將其分解。

1。 this取決於執(zhí)行上下文

在JavaScript中， this是指函數(shù)的執(zhí)行上下文，即如何調(diào)用函數(shù)，而不是定義的位置。

與使用let或const聲明的變量不同， this與範(fàn)圍無(wú)關(guān)，而是關(guān)於調(diào)用上下文。

函數(shù)sayhi（）{
  console.log（this.name）;
}

根據(jù)sayHi()調(diào)用方式， this可能指向不同的對(duì)象。

2。為此this四個(gè)主要規(guī)則

確定this四種主要方法。他們遵循優(yōu)先順序。

?規(guī)則1：隱性綁定（最常見(jiàn)）

當(dāng)函數(shù)稱(chēng)為對(duì)象的方法時(shí)， this是指該對(duì)象。

 const user = {
  名稱(chēng)：“愛(ài)麗絲”，
  engret（）{
    console.log（`hi，我是$ {this.name}`）;
  }
};

user.greet（）; //“嗨，我是愛(ài)麗絲”

this = dot（ user ）之前的對(duì)象。

??警告：如果提取方法，則會(huì)失去上下文：

 const engre = user.greet;
迎接（）; //“嗨，我不確定”  - ``現(xiàn)在是全局（或在嚴(yán)格模式下``未定義''）

?規(guī)則2：明確綁定（ call ， apply ， bind ）

您可以使用.call() ，. .apply()或.bind()手動(dòng)設(shè)置this 。

函數(shù)介紹（）{
  console.log（`我是$ {this.name}，$ {this.age}年齡。
}

const person = {名稱(chēng)：“鮑勃”，年齡：30};

介紹。 //“我是鮑勃，30歲。”
介紹。 // 相同的

• call(thisArg, arg1, arg2, ...)
• apply(thisArg, [argsArray])
• bind(thisArg)使用this永久設(shè)置返回一個(gè)新功能。

 const boundintro =介紹。
boundintro（）; //始終將``一個(gè)人'作為``''

對(duì)於可能丟失上下文的回調(diào)或事件處理程序有用。

?規(guī)則3：新綁定（ new關(guān)鍵字）

當(dāng)使用new調(diào)用函數(shù)時(shí)， this是指新創(chuàng)建的對(duì)象。

功能人員（名稱(chēng)）{
  this.name = name; //`this` =新創(chuàng)建的實(shí)例
  this.greet = function（）{
    console.log（`您好，我是$ {this.name}`）;
  };
}

const p =新人（“查理”）;
p.greet（）; //“你好，我是查理”

在引擎蓋下， new做到了：

1. 創(chuàng)建一個(gè)新的空對(duì)象。
2. this功能內(nèi)部設(shè)置為該對(duì)象。
3. 返回對(duì)象（除非明確返回另一個(gè)對(duì)象）。

?規(guī)則4：默認(rèn)綁定（後備）

當(dāng)以上所有內(nèi)容都不適用時(shí)， this默認(rèn)為全局對(duì)象，或在嚴(yán)格模式下undefined 。

函數(shù)showthis（）{
  console.log（this）;
}

Shadthis（）; //在瀏覽器中：`window'（non-strict），`'undefined'

??這就是為什麼依靠全球this是危險(xiǎn)的原因 - 尤其是在模塊中（默認(rèn)情況下是嚴(yán)格的）。

3。箭頭功能改變遊戲

箭頭功能沒(méi)有自己的this 。相反，他們從封閉的詞彙範(fàn)圍中繼承了this 。

 const user = {
  名稱(chēng)：“ diana”，
  常規(guī)FUNC：function（）{
    console.log（this.name）; //“戴安娜”
  }，，
  arrowfunc：（）=> {
    console.log（this.name）; //不確定（從外部繼承`this'）
  }
};

user.regularfunc（）; //工作
user.arrowfunc（）; //無(wú)法正常工作

為什麼？在定義箭頭函數(shù)時(shí)，在外部範(fàn)圍中可能是this window或undefined ）。

？當(dāng)您想保留this時(shí)，請(qǐng)使用箭頭功能 - 在封閉和事件處理程序中常見(jiàn)。

功能計(jì)時(shí)器（）{
  this.seconds = 0;

  setInterval（（）=> {
    這第二個(gè)； //?`this`指計(jì)時(shí)器實(shí)例
  }，1000）;
}

如果您在此處使用了常規(guī)功能， this將指向全局對(duì)像或undefined 。

4。常見(jiàn)的陷阱和修復(fù)

?在回調(diào)中丟失上下文

const button = document.queryselector（'button'）;
const widget = {
  單擊：false，
  onclick（）{
    this.clicked = true;
    console.log（this.clicked）;
  }
};

button.AddeventListener（'click'，widget.onclick）;
//`this'是按鈕（dom元素），而不是``窗口''

?用.bind()修復(fù)：

 button.AddeventListener（'click'，widget.onclick.bind（widget））;

?或使用箭頭功能包裝器：

 button.addeventListener（'click'，（）=> widget.onclick（））;

摘要：如何this

按以下順序詢(xún)問(wèn)：

1. new用嗎？ → this =新實(shí)例。
2. call ， apply或bind使用嗎？ → this =指定的對(duì)象。
3. 該函數(shù)是否在對(duì)像上調(diào)用（例如， obj.func() ）？ → this =那個(gè)對(duì)象。
4. else→ this =全局（非圖案）或undefined （嚴(yán)格）。
5. 對(duì)於箭頭功能：查看封閉範(fàn)圍。

理解this不是關(guān)於記住邊緣案例的，而是了解這些規(guī)則並逐步應(yīng)用它們。一旦您內(nèi)化了四個(gè)綁定規(guī)則並記住箭頭功能的表現(xiàn)， this將變得可以預(yù)測(cè)。

基本上，只需關(guān)注呼叫網(wǎng)站即可。

以上是揭開(kāi)JavaScript的神秘面紗`this`關(guān)鍵字的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！