JavaScript 中最令人困惑的關(guān)鍵字之一是 this 關(guān)鍵字。它是一個(gè)特殊的標(biāo)識符關(guān)鍵字，在每個(gè)函數(shù)的作用域中自動定義，但它到底指的是什麼，即使是經(jīng)驗(yàn)豐富的 JavaScript 開發(fā)人員也會感到困惑。

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

this 的值可以在函數(shù)執(zhí)行的地方識別，而不是在函數(shù)宣告的地方

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

預(yù)設(shè)綁定

我們將應(yīng)用程式呼叫最常見情況的預(yù)設(shè)規(guī)則：獨(dú)立函數(shù)執(zhí)行。當(dāng)其他規(guī)則都不適用時(shí)，將此規(guī)則視為預(yù)設(shè)的包羅萬象的規(guī)則。

在獨(dú)立函數(shù)呼叫中，該值將是全域?qū)ο螅ㄔ跒g覽器環(huán)境中，它是視窗對象，在節(jié)點(diǎn)環(huán)境中，它將是全域?qū)ο螅?br>

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

但是......

這個(gè)值可以與程式碼在嚴(yán)格模式或非嚴(yán)格模式下運(yùn)作的方式不同

如果當(dāng)函數(shù)作為獨(dú)立函數(shù)呼叫時(shí)，這通常在非嚴(yán)格模式下引用全域?qū)ο螅趪?yán)格模式下引用未定義

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

微妙但重要的是，只有當(dāng) bar() 的內(nèi)容未在嚴(yán)格模式下運(yùn)作時(shí)，全域物件才有資格進(jìn)行預(yù)設(shè)綁定；

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

隱式綁定

當(dāng)常規(guī)函數(shù)作為物件的方法 (obj.method()) 被呼叫時(shí)，this 指向該物件。

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

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

隱式遺失：
使用回調(diào)時(shí)，隱式綁定函數(shù)會遺失該綁定，這通常意味著它會回退到全域物件或未定義的預(yù)設(shè)綁定，具體取決於嚴(yán)格模式。

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

顯式綁定

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

但是，如果您想要強(qiáng)制函數(shù)呼叫使用特定物件進(jìn)行 this 綁定，而不是在該物件上放置屬性函數(shù)引用，該怎麼辦？

是的，這是可能的，javascript提供了很多方法，例如.map，.filter數(shù)組，我們在函數(shù)中只有很少的方法。它們是 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 之間有細(xì)微的差別。語法相同，但我們在 apply 方法中將參數(shù)作為數(shù)組傳遞

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

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

新綁定

當(dāng)一個(gè)函數(shù)用作建構(gòu)函式時(shí)（使用 new 關(guān)鍵字），它的 this 會綁定到正在建構(gòu)的新對象，無論建構(gòu)函式是在哪個(gè)物件上存取的。 this 的值將成為 new 表達(dá)式的值，除非建構(gòu)函數(shù)傳回另一個(gè)非原始值。

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

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