在JavaScript中了解'此”及其在各種情況下的行為

>曾經被javaScript的this關鍵字困擾嗎？ 你並不孤單！ 抓住它的細微差別就像學習新技能一樣 - 它需要練習，但是一旦您得到它，一切都會點擊。

>本博客文章揭開this的神秘信息，並在不同上下文中探索了其行為。讓我們開始！

什麼是this？ 在JavaScript中，是代表函數屬於對象的關鍵字。 它通過在運行時確定其值來啟用可重複使用的動態函數。 函數呼叫的上下文決定了

的價值，使其既強大又有時令人困惑。

this密鑰點：this

是一個關鍵字，而不是變量。

>

您不能將值直接分配給
• >this>
它的值在運行時動態確定。
• this
• 現實世界類比：

想像

作為博物館導遊。 在藝術博物館中，該指南代表藝術博物館；在歷史博物館中，它們代表歷史博物館。 同樣，適應其上下文。 > 在不同的方案中

this：this

1。全局上下文（默認綁定）：this

>外部功能，

指的是全局對象。 這取決於環境：

瀏覽器（沒有嚴格模式）：this是

> object。

• > node.js（沒有嚴格模式）： this>示例：window
• >嚴格模式：this在嚴格的模式下，{}在瀏覽器中保留

，在node.js.

中

>示例：

<code class="language-javascript">console.log(this); // Browser: window object; Node.js: {}</code>

this 2。常規功能內部：window undefined

在常規函數中，

>的值取決於函數的調用方式。 >

>沒有嚴格的模式：

<code class="language-javascript">'use strict';
console.log(this); // Browser: window object; Node.js: undefined</code>

在瀏覽器中，

是>對象;在node.js中，它是全局對象。 > 嚴格模式：

：this

。

• >示例： this window
• 3。內部對象方法（隱式綁定）：> 當函數是對象的方法時，this指向該對象。 undefined
>示例：

4。箭頭功能：

<code class="language-javascript">function showThis() {
  console.log(this);
}
showThis(); // Without strict mode: Browser - window; Node.js - global object; With strict mode: undefined</code>

箭頭功能沒有自己的。他們從周圍的詞彙範圍繼承了它。

this>示例：

<code class="language-javascript">console.log(this); // Browser: window object; Node.js: {}</code>

5。構造函數函數（新綁定）：

使用new>關鍵字，this是指新創建的對象。 >

>示例：

6。類：

<code class="language-javascript">'use strict';
console.log(this); // Browser: window object; Node.js: undefined</code>

在ES6類中，的行為與構造函數函數相似。

>示例：this

7。

，

<code class="language-javascript">function showThis() {
  console.log(this);
}
showThis(); // Without strict mode: Browser - window; Node.js - global object; With strict mode: undefined</code>

，

（顯式綁定）：call()> apply()這些方法允許明確設置bind()>>

this：立即調用該函數，單獨傳遞參數。

>

• ：類似於call()>，但是將參數作為數組傳遞。
>
• apply()：返回一個新功能，call()綁定到特定對象。
>
• bind()this>示例：

8。事件聽眾：

<code class="language-javascript">const book = {
  title: 'JavaScript Mastery',
  showTitle: function() {
    console.log(this.title);
  }
};
book.showTitle(); // Output: JavaScript Mastery</code>

在事件聽眾中，通常是指觸發事件的元素。 >

>示例：this

優先順序：：

>

<code class="language-javascript">const techBook = {
  title: 'Advanced JavaScript',
  showTitle: function() {
    const arrowFunc = () => {
      console.log(this.title);
    };
    arrowFunc();
  }
};
techBook.showTitle(); // Output: Advanced JavaScript</code>

新綁定 顯式綁定

隱式綁定
>默認綁定
3. 結論：
>掌握

對於編寫清潔，上下文感知的JavaScript至關重要。 在最初具有挑戰性的同時，在不同方案中理解其行為使您能夠編寫更有效和可維護的代碼。 練習是關鍵！ 在下面的評論中分享您的經驗！

>

以上是在JavaScript中了解'此”及其在各種情況下的行為的詳細內容。更多資訊請關注PHP中文網其他相關文章！