前言

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

什么是'this'關(guān)鍵字

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

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

Example: this代表一個(gè)對(duì)象

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

在上面的bruce對(duì)象里面有一個(gè)calcAge()函數(shù),這個(gè)函數(shù)是一個(gè)被附加到了bruce對(duì)象里面的函數(shù)。所以當(dāng)我們調(diào)用一個(gè)方法的時(shí)候，calcAge()里面的this將會(huì)指向這個(gè)對(duì)象；換句話來(lái)說(shuō)，this所指的bruce這個(gè)對(duì)象正在調(diào)用這個(gè)方法。在代碼的最后一行，我們調(diào)用了這個(gè)函數(shù)；在calcAge()函數(shù)里面我們使用了this，那么這個(gè)this的值應(yīng)該是什么呢？沒(méi)錯(cuò)，這個(gè)this指的是bruce;所以this.birrhYear==bruce.birthYear==2001。

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

Example: 此時(shí)this=undefined

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

結(jié)果如下：

像這樣常規(guī)的調(diào)用某個(gè)函數(shù)，只是簡(jiǎn)單的調(diào)用某個(gè)函數(shù)，并沒(méi)有將這個(gè)函數(shù)添加到任何對(duì)象上面；可以這樣說(shuō)這個(gè)this沒(méi)有主人，就是this指的就是window 。但是在嚴(yán)格模式下全局對(duì)象無(wú)法進(jìn)行默認(rèn)綁定，所以導(dǎo)致this只能綁定在undefined上。這就是this的默認(rèn)綁定規(guī)則：

• this所處的詞法作用域在哪里生效this就綁定在哪里。
• 在嚴(yán)格模式下，全局對(duì)象無(wú)法進(jìn)行默認(rèn)綁定，所以導(dǎo)致this只能綁定在undefined上

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

箭頭函數(shù)沒(méi)有自己的this關(guān)鍵字

Example:

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

執(zhí)行結(jié)果：

因?yàn)榧^函數(shù)沒(méi)有this，所以在箭頭函數(shù)里面的this是它外層作用域里面的非箭頭函數(shù)的this,而本例中外層作用域是window,所以這里的this指的是window

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

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

深入理解this指向的是調(diào)用該方法的對(duì)象

這就意味著this關(guān)鍵字不會(huì)簡(jiǎn)單的指向在我們編寫(xiě)方法的對(duì)象上面。

在第一種函數(shù)調(diào)用的方式中，因?yàn)閎ruce是調(diào)用calaAge()方法的對(duì)象，所以此時(shí)this是bruce; 那么現(xiàn)在創(chuàng)建一個(gè)新對(duì)象：

const lucy={
   birthYear:2006,
}

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

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

結(jié)果：

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

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

結(jié)果為：

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

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

const y=bruce.calcAge
y()

結(jié)果為：

那么此時(shí)y()只是作為一個(gè)普通函數(shù)來(lái)進(jìn)行調(diào)用，this是window

小結(jié)

this關(guān)鍵字是一個(gè)讓許多初學(xué)者感到困惑的東西，但是總的來(lái)說(shuō):

1.如果函數(shù)是以普通函數(shù)（非構(gòu)造函數(shù)）的形式調(diào)用，this指的永遠(yuǎn)都是window

2.如果函數(shù)是以方法的形式調(diào)用，this就是調(diào)用方法的那個(gè)對(duì)象

總結(jié)

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

最新評(píng)論