深入淺出聊一聊js中的'this'關鍵字

前言

在JavaScript中‘this’關鍵字是一個非常重要的概念，然而許多的初學者們發現深度的理解它卻又十分困難，如果你正在或者將要被this折磨，那麼現在深呼吸放輕鬆點，你必須得知道實際上去理解‘this’這個關鍵字並不難；耐心的看完本文，相信你對‘this’會有更深的理解。下面我們將一起來討論‘this’關鍵字的工作原理。

什麼是'this'關鍵字

'this'關鍵字是為每個執行上下文(每個函數)建立的一個特殊變數；所以一般來說，在使用'this'關鍵字的函數中，'this'永遠是取其所有者的值。換句話的意思就是它指向該函數的所有者。這樣聽起來很抽象吧，那麼你現在只要記住'this'關鍵字的值不是靜態的，所以它總是不一樣。它的值取決於函數是怎麼被呼叫的，只有在實際呼叫函數時才分配它的值。就比如我們將x=4；那麼x的值就是4，但是'this'關鍵字的值取決於函數的呼叫方式；所以現在我們來分析四種不同的呼叫函數的方式。

四種方式---1.呼叫函數的第一種方法是：將函數作為一種方法

Example: this代表一個物件

const bruce={
    name:'bruce',
    birthYear:2001,
    calcAge:function () {
        return 2022-this.birthYear
    }
};
console.log(bruce.calcAge());//21`

在上面的bruce物件裡面有一個calcAge()函數,這個函數是一個被附加到了bruce物件裡面的函數。所以當我們呼叫一個方法的時候，calcAge()裡面的this將會指向這個物件；換句話來說，this所指的bruce這個物件正在呼叫這個方法。在程式碼的最後一行，我們呼叫了這個函數；在calcAge()函數裡面我們使用了this，那麼這個this的值應該是什麼呢？沒錯，這個this指的是bruce;所以this.birrhYear==bruce.birthYear==2001。

四種方式---2.呼叫函數的第二種方法是： 簡單的呼叫函數，不將函數作為方法，不附加到任何物件裡面

Example: 此時this=undefined

const calcAge=function(birthYear){
    console.log(2022-birthYear);
    //檢視此函數中的this
    console.log(this);
}
calcAge(2001)

結果如下：

像這樣常規的呼叫某個函數，只是簡單的呼叫某個函數，並沒有將這個函數新增到任何物件上面；可以這樣說這個this沒有主人，就是this指的就是window 。但是在嚴格模式下全域性物件無法進行預設繫結，所以導致this只能繫結在undefined上。這就是this的預設繫結規則：

• this所處的詞法作用域在哪裡生效this就係結在哪裡。
• 在嚴格模式下，全域性物件無法進行預設繫結，所以導致this只能繫結在undefined上

四種方式---3.呼叫函數的第三種方法是:呼叫箭頭函數

箭頭函數沒有自己的this關鍵字

Example:

//3.箭頭函數的呼叫
const calcAge= birthYear => {
    console.log(2022-birthYear);
    //檢視此函數中的this
    console.log(this);
}
calcAge()

執行結果：

因為箭頭函數沒有this，所以在箭頭函數裡面的this是它外層作用域裡面的非箭頭函數的this,而本例中外層作用域是window,所以這裡的this指的是window

四種方式---4.呼叫函數的第四種方式：該函數被呼叫作為事件監聽器

那麼此時的this將會指向處理程式函數所附加到的DOM元素

深入理解this指向的是呼叫該方法的物件

這就意味著this關鍵字不會簡單的指向在我們編寫方法的物件上面。

在第一種函數呼叫的方式中，因為bruce是呼叫calaAge()方法的物件，所以此時this是bruce; 那麼現在建立一個新物件：

const lucy={
   birthYear:2006,
}

我們都知道函數只是一個值，所以我們可以這樣：

const lucy={
    birthYear:2006,
}
lucy.calcAge=bruce.calcAge
console.log(lucy);

結果：

現在lucy裡面也有了一個calcAge()方法，我們再來執行lucy.calcAge()

const lucy={
    birthYear:2006,
}
lucy.calcAge=bruce.calcAge
console.log(lucy);
lucy.calcAge()

結果為：

這就說明lucy物件呼叫calcAge()方法時，此時函數calcAge()方法裡面的this指向的是lucy, 即呼叫該方法的物件。所以this關鍵字如上面所說，它不是靜態的，而是取決於函數的呼叫方式。

現在我們來定義一個常數y,並將bruce.calcAge()函數賦給它

const y=bruce.calcAge
y()

結果為：

那麼此時y()只是作為一個普通函數來進行呼叫，this是window

小結

this關鍵字是一個讓許多初學者感到困惑的東西，但是總的來說:

1.如果函數是以普通函數（非建構函式）的形式呼叫，this指的永遠都是window

2.如果函數是以方法的形式呼叫，this就是呼叫方法的那個物件

總結

到此這篇關於js中this關鍵字的文章就介紹到這了,更多相關js中this關鍵字內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！