前言

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

什么是'this'關鍵字

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

四種方式---1.調用函數(shù)的第一種方法是：將函數(shù)作為一種方法

Example: this代表一個對象

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

在上面的bruce對象里面有一個calcAge()函數(shù),這個函數(shù)是一個被附加到了bruce對象里面的函數(shù)。所以當我們調用一個方法的時候，calcAge()里面的this將會指向這個對象；換句話來說，this所指的bruce這個對象正在調用這個方法。在代碼的最后一行，我們調用了這個函數(shù)；在calcAge()函數(shù)里面我們使用了this，那么這個this的值應該是什么呢？沒錯，這個this指的是bruce;所以this.birrhYear==bruce.birthYear==2001。

四種方式---2.調用函數(shù)的第二種方法是： 簡單的調用函數(shù)，不將函數(shù)作為方法，不附加到任何對象里面

Example: 此時this=undefined

const calcAge=function(birthYear){
    console.log(2022-birthYear);
    //查看此函數(shù)中的this
    console.log(this);
}
calcAge(2001)

結果如下：

像這樣常規(guī)的調用某個函數(shù)，只是簡單的調用某個函數(shù)，并沒有將這個函數(shù)添加到任何對象上面；可以這樣說這個this沒有主人，就是this指的就是window 。但是在嚴格模式下全局對象無法進行默認綁定，所以導致this只能綁定在undefined上。這就是this的默認綁定規(guī)則：

• this所處的詞法作用域在哪里生效this就綁定在哪里。
• 在嚴格模式下，全局對象無法進行默認綁定，所以導致this只能綁定在undefined上

四種方式---3.調用函數(shù)的第三種方法是:調用箭頭函數(shù)

箭頭函數(shù)沒有自己的this關鍵字

Example:

//3.箭頭函數(shù)的調用
const calcAge= birthYear => {
    console.log(2022-birthYear);
    //查看此函數(shù)中的this
    console.log(this);
}
calcAge()

執(zhí)行結果：

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

四種方式---4.調用函數(shù)的第四種方式：該函數(shù)被調用作為事件監(jiān)聽器

那么此時的this將會指向處理程序函數(shù)所附加到的DOM元素

深入理解this指向的是調用該方法的對象

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

在第一種函數(shù)調用的方式中，因為bruce是調用calaAge()方法的對象，所以此時this是bruce; 那么現(xiàn)在創(chuàng)建一個新對象：

const lucy={
   birthYear:2006,
}

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

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

結果：

現(xiàn)在lucy里面也有了一個calcAge()方法，我們再來執(zhí)行l(wèi)ucy.calcAge()

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

結果為：

這就說明lucy對象調用calcAge()方法時，此時函數(shù)calcAge()方法里面的this指向的是lucy, 即調用該方法的對象。所以this關鍵字如上面所說，它不是靜態(tài)的，而是取決于函數(shù)的調用方式。

現(xiàn)在我們來定義一個常量y,并將bruce.calcAge()函數(shù)賦給它

const y=bruce.calcAge
y()

結果為：

那么此時y()只是作為一個普通函數(shù)來進行調用，this是window

小結

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

1.如果函數(shù)是以普通函數(shù)（非構造函數(shù)）的形式調用，this指的永遠都是window

2.如果函數(shù)是以方法的形式調用，this就是調用方法的那個對象

總結

到此這篇關于js中this關鍵字的文章就介紹到這了,更多相關js中this關鍵字內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論