JavaScript 中的「this」關鍵字到底是什麼？

關鍵見解：

• 全域範圍：在全域上下文中，this 指的是全域物件（例如，視窗）。

• 函數上下文：在常規函數中，這在嚴格和非嚴格模式下表現不同，傳回未定義或全域物件。

• 方法：在物件方法中，this 指物件本身，允許存取其屬性。

• 呼叫、應用、綁定：這些方法允許透過更改 this 上下文來在物件之間共享函數。

• 箭頭函數：箭頭函數沒有自己的 this，而是從其封閉的詞法上下文繼承它。

• DOM 元素：在 DOM 事件處理程序中，這是指觸發事件的 HTML 元素。

---

全球範圍

首先，讓我們來看看「this」在全域範圍內的行為。在 JavaScript 中，當您在程式碼頂層引用「this」時，它指的是全域物件。在網頁瀏覽器中，這個全域物件是視窗。

例如：

    console.log(this); // Outputs: Window

然而，在 Node.js 中，全域物件是不同的，稱為 global.

因此，「this」的值可能會根據 JavaScript 程式碼執行的環境而變化。

---

理解“this”內部函數

接下來，讓我們探討一下「this」在函數內部的行為方式。當你定義一個函數並呼叫它時，該函數內「this」的值將取決於該函數的呼叫方式。

在非嚴格模式下，如果您在函數中記錄“this”，它也會引用全域物件：

    function test() {
        console.log(this);
    }
    test(); // Outputs: Window

但是，如果您透過新增「use strict」來啟用嚴格模式；在函數的頂部，「this」將是未定義：

    'use strict';
    function test() {
        console.log(this);
    }
    test(); // Outputs: undefined

此行為是 this 替換 的結果，它指出如果「this」在非嚴格模式下為 null 或未定義，則它預設為全域物件。

---

嚴格模式與非嚴格模式

理解嚴格模式和非嚴格模式之間的區別至關重要。在非嚴格模式下，「this」的值可以是全域對象，但在嚴格模式下，如果沒有明確綁定到對象，它就會變成未定義。

---

回顧一下：

• 在全域空間中，「this」指的是全域物件。
• 在函數中，「this」在非嚴格模式下可以引用全域對象，但在嚴格模式下未定義。

---

「this」在物件方法中如何運作

現在，讓我們討論「this」在物件方法中的行為方式。當函數在物件內部定義時，它被視為方法，並且在呼叫該方法時“this”將引用該物件：

    console.log(this); // Outputs: Window

這裡，「this」指的是“obj”，即定義該方法的物件。

---

透過 Call、Apply 和 Bind 共享方法

為了在物件之間共用方法，JavaScript 提供了三個函數：call、apply 和 bind。其中每一個都允許您明確設定「this」的值：

• call: 使用指定的 this 值和參數呼叫函數。
• apply: 與 call 類似，但接受參數陣列。
• bind: 傳回具有指定 this 值的新函數。

例如：

    function test() {
        console.log(this);
    }
    test(); // Outputs: Window

在這種情況下，printName中的「this」指的是student2而不是student1。

---

箭頭函數和“this”

箭頭函數的行為與傳統函數不同。他們沒有自己的「這個」上下文；相反，它們從封閉的詞彙上下文繼承「this」。這表示箭頭函數內的「this」與函數外的「this」指的是相同的值：

    'use strict';
    function test() {
        console.log(this);
    }
    test(); // Outputs: undefined

這裡，箭頭函數中的“this”指的是“obj”對象，演示了箭頭函數如何從其封閉上下文中捕獲“this”值。

---

DOM 中的“this”

最後，在使用 DOM 時，「this」可以指觸發事件的 HTML 元素。例如：

    const obj = {
        name: 'My Object',
        getName: function() {
            console.log(this.name);
        }
    };
    obj.getName(); // Outputs: My Object

在這種情況下，當單擊按鈕時，「this」將引用按鈕元素本身。

---

感謝您的閱讀，如果您發現本指南有幫助，請與其他開發人員分享，並繼續練習以鞏固您對 JavaScript 中「this」的理解！

以上是JavaScript 中的「this」關鍵字到底是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！