JavaScript 中的 this 關鍵字

JavaScript 中最令人困惑的關鍵字之一是 this 關鍵字。它是一個特殊的標識符關鍵字，在每個函數的作用域中自動定義，但它到底指的是什麼，即使是經驗豐富的 JavaScript 開發人員也會感到困惑。

this 關鍵字指的是一段程式碼（例如函數體）應該運行的上下文。最典型的是，它用在物件方法中，其中 this 指的是該方法所附加的對象，從而允許在不同的物件上重複使用相同的方法。

this 的值可以在函數執行的地方識別，而不是在函數宣告的地方

我們將檢查不同的規則來辨識 javascript 中的 this

預設綁定

我們將應用程式呼叫最常見情況的預設規則：獨立函數執行。當其他規則都不適用時，將此規則視為預設的包羅萬象的規則。

在獨立函數呼叫中，該值將是全域對象（在瀏覽器環境中，它是視窗對象，在節點環境中，它將是全域對象）

function bar() {
    console.log(this) // this will be global object (window)
}
bar()

但是......

這個值可以與程式碼在嚴格模式或非嚴格模式下運作的方式不同

如果當函數作為獨立函數呼叫時，這通常在非嚴格模式下引用全域對象，在嚴格模式下引用未定義

"use strict"
function bar() {
    console.log(this) // undefined
}
bar()

微妙但重要的是，只有當 bar() 的內容未在嚴格模式下運作時，全域物件才有資格進行預設綁定；

function bar() {
    console.log(this) // global object (window)
}
(function() {
    "use strict"
    bar()
})()

隱式綁定

當常規函數作為物件的方法 (obj.method()) 被呼叫時，this 指向該物件。

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    foo
}
obj.foo() // this here is object owing the function

首先，請注意聲明 bar() 以及隨後將其作為引用屬性新增至 obj 上的方式。無論 foo() 最初是在 obj 上聲明，還是稍後添加為引用（如此程式碼片段所示），在任何一種情況下，該函數都不會真正由 obj 物件「擁有」或「包含」。

隱式遺失：
使用回調時，隱式綁定函數會遺失該綁定，這通常意味著它會回退到全域物件或未定義的預設綁定，具體取決於嚴格模式。

function bar() {
    setTimeout(function() {
        console.log(this) // this will be global object
    }, 1000);
}
const obj = {
    name: "javascript",
    bar
}
obj.bar() // this will be global object

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    bar
}
const a = obj.bar
a() // this will be global object

顯式綁定

使用我們剛剛看到的隱式綁定，我們必須修改相關物件以包含其自身對函數的引用，並使用此屬性函數引用來間接（隱式）將 this 綁定到物件。

但是，如果您想要強制函數呼叫使用特定物件進行 this 綁定，而不是在該物件上放置屬性函數引用，該怎麼辦？

是的，這是可能的，javascript提供了很多方法，例如.map，.filter數組，我們在函數中只有很少的方法。它們是 apply 、 call 和 bind

這是這些方法的語法
打電話

function bar() {
    console.log(this) // this will be global object (window)
}
bar()

申請

"use strict"
function bar() {
    console.log(this) // undefined
}
bar()

apply 和 call 之間有細微的差別。語法相同，但我們在 apply 方法中將參數作為數組傳遞

function bar() {
    console.log(this) // global object (window)
}
(function() {
    "use strict"
    bar()
})()

透過 bar.call(..) 明確綁定呼叫 bar 允許我們強制其 this 為 obj。

新綁定

當一個函數用作建構函式時（使用 new 關鍵字），它的 this 會綁定到正在建構的新對象，無論建構函式是在哪個物件上存取的。 this 的值將成為 new 表達式的值，除非建構函數傳回另一個非原始值。

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    foo
}
obj.foo() // this here is object owing the function

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