關(guān)于javascript中this的指向

shinezejian 發(fā)布于2019-08-20 18:27 / 752人閱讀

摘要：關(guān)于中的指向我上的菜鳥倉庫地址點擊跳轉(zhuǎn)查看其他相關(guān)文章文章在我的博客上的地址點擊跳轉(zhuǎn)學(xué)習(xí)，必不可少的肯定要理解的指向。

關(guān)于javascript中this的指向

我GitHub上的菜鳥倉庫地址：點擊跳轉(zhuǎn)查看其他相關(guān)文章

文章在我的博客上的地址：點擊跳轉(zhuǎn)

? ? ? ? 學(xué)習(xí)javascript，必不可少的肯定要理解this的指向。要學(xué)習(xí)this指向之前，就要先理解了我前面寫的幾篇文章，會更容易理解this的指向。

? ? ? ? 前面的文章說到，執(zhí)行上下文的創(chuàng)建階段，主要有三個內(nèi)容：

? ? ? ? 1、創(chuàng)建變量對象；2、初始化作用域鏈；3、確定this的指向。

? ? ? ? 前兩個內(nèi)容我都作了詳細的解析了，在這里，是時候要說一下第三個內(nèi)容了，確定this的指向。其實this的指向從一些理論知識上理解，是很復(fù)雜的，看過不少文章都沒有說的很清楚，反而說得人懵逼了。其實，this的指向是非常簡單的，明確了它的規(guī)律，不要被太多代碼表達形式的改變而影響了正常的認識思維，那就可以了。

? ? ? ? 好了，來個普遍例子：

//全局環(huán)境
var a = 10;
function inner(){
    var a = 20;
    console.log(this.a);
}
inner();

? ? ? ? 當然了，打印結(jié)果是10，this就是指向全局對象。

? ? ? ? 好了，該解析this了，我們都知道this的指向是函數(shù)被調(diào)用的時候確定的。

? ? ? ? 簡單直接說結(jié)論：通過對象訪問屬性的方式執(zhí)行函數(shù)，this就是指向這個對象，其他情況，嚴格模式下都是指向undefined，非嚴格模式下都是指向全局對象。

? ? ? ? 先解析上面例子，上面的inner函數(shù)是在全局環(huán)境中直接調(diào)用的：inner( ? )，大家可以理解這個調(diào)用，就是這一對方括號（），所以它是指向全局對象，所以this.a就是10。

//全局環(huán)境
var a = 10;
var example = {
    a : 20,
    b : this.a + 10
}
console.log(example.b);

? ? ? ? 打印結(jié)果是多少？30嗎？錯了，不是通過example這個對象訪問b屬性，所以b里面的this就是指向example嗎？錯了。

? ? ? ? 我說的是對象訪問屬性的方式執(zhí)行函數(shù)，你這個b屬性內(nèi)容不是函數(shù)。由于example是在全局環(huán)境中聲明的，所以里面的this就是指向全局對象，或者說，this的確定是函數(shù)被執(zhí)行時候確定的，你的函數(shù)呢？往上找，就是全局對象這個大函數(shù)了，所以這個this就是指向全局對象。

? ? ? ? 當然了，如果你將example放進去某個函數(shù)里面，對照一下我的結(jié)論，就會知道這個this在嚴格模式下就會指向undefined，非嚴格模式就是指向全局對象。例子如下：

//非嚴格模式下的全局環(huán)境
var a = 10;
function outer(){
    var example = {
        a : 20,
        b : this.a + 10
    }
    return example.b;
}
outer();//打印結(jié)果為20

//嚴格模式下的全局環(huán)境
"use strict"
var a = 10;
function outer(){
    var example = {
        a : 20,
        b : this.a + 10
    }
    return example.b;
}
outer();//執(zhí)行會報錯，因為this指向undefined

? ? ? ? 還問為什么？因為outer函數(shù)被執(zhí)行時候這個this才確定啊，而outer這個函數(shù)是多帶帶調(diào)用啊，直接outer( ?)這樣調(diào)用啊，所以就是結(jié)論中那樣啊。

? ? ? ? 好了，那怎樣是屬于對象訪問屬性的方式執(zhí)行函數(shù)呢？再來例子：

//全局環(huán)境
var a = 10;
var example = {
    a : 20,
    b : function(){
        return this.a;
    }
}
console.log(example.b());

? ? ? ? 好了，這次打印結(jié)果是20了，因為通過了example訪問b屬性方式執(zhí)行函數(shù)的，通過這個一點運算符的屬性訪問方式，叫做成員訪問。稍微改改再來例子：

//全局環(huán)境
var a = 10;
var example = {
    a : 20,
    b : function(){
        return this.a;
    }
}
var c = example.b;
console.log(c());

? ? ? ? 還是20嗎？不是了，非嚴格模式是10，嚴格模式報錯（后面都是非嚴格模式的例子），因為調(diào)用函數(shù)c，前面只是通過example.b將函數(shù)的地址傳給了c而已，你調(diào)用函數(shù)時候，還是多帶帶調(diào)用啊。開始懂了對不對，再來例子：

//全局環(huán)境
var a = 10;
function runAway(){
    return this.a;
}
var example = {
    a : 20,
    b : runAway
}
console.log(example.b());

? ? ? ? 如果你不假思索就能說是20的話，證明你已邁出了一大步了，同一個道理，是通過對象訪問屬性的方式執(zhí)行函數(shù)的，我管你的b屬性是直接指向函數(shù)，還是通過函數(shù)聲明指向函數(shù)的，反正你的this就是指向?qū)ο骵xample。

? ? ? ? 好了，結(jié)合上面的再改一改例子：

//全局環(huán)境
var a = 10;
function runAway(){
    return this.a;
}

function worker(fn){
    fn();
}
var example = {
    a : 20,
    b : runAway
}
worker(example.b);

? ? ? ? 可能你會說，通過example.b這樣的的方式，我不管你有沒有跳出來的runAway，this肯定是指向example啦，那就要重溫一下我的結(jié)論了，我說的是通過對象訪問屬性的方式執(zhí)行函數(shù)，你執(zhí)行了嗎，你有一對方括號嗎？可能你會說，他們傳入去worker函數(shù)，里面就會加一對方括號執(zhí)行啊，那就錯了。

? ? ? ? 通過這種方式的執(zhí)行函數(shù)，其實已經(jīng)變味了，這種情況和上面的例子：var c = example.b，然后c( )執(zhí)行函數(shù)式一樣的，你只不過通過example.b將這個函數(shù)地址傳入了worker函數(shù)，然后執(zhí)行而已。

? ? ? ? 所以上面這個例子，就是結(jié)論中的其他情況咯，嚴格模式this指向undefined（當然這個例子會報錯，因為undefined沒有a屬性），非嚴格模式指向全局對象（當然這個例子會打印undefined，因為全局對象沒有b屬性）。

? ? ? ? 好了，最后再舉一下其他例子：

//全局環(huán)境
var a = 10;
var example = {
    a : 20,
    b : function(){
        return this.a;
    }
}
//例子一
console.log(example.b()); //打印結(jié)果為20
//例子二
console.log((example.b)()); //打印結(jié)果為20
//例子三
console.log((false || example.b)()); //打印結(jié)果為10

? ? ? ? 好了，在例子一中，很清楚明白就是常規(guī)的this指向了example。

? ? ? ? 例子二中，你加了一個括號也沒用啊，我沒有將它的函數(shù)地址賦值其他什么變量啊，所以和例子一也是一樣的。

? ? ? ? 至于例子三，我們可以這樣理解，你在括號里面進行了一些其他運算，所以通過example.b這個方式只是拿了函數(shù)地址出來運算，所以在例子三中，括號的結(jié)果是example.b這個結(jié)果，所以是拿到了一個函數(shù)的地址，最后調(diào)用的時候還是多帶帶調(diào)用啊，就類似前面例子的worker函數(shù)那樣啊。

? ? ? ? 網(wǎng)上還有很多像例子三那樣的古靈精怪的例子，其實很簡單，你運算過了，最后出來的東西再加方括號調(diào)用，就是多帶帶調(diào)用了。

? ? ? ? 最后，好像忘了個很常用的構(gòu)造函數(shù)的this指向：

//先來個構(gòu)造函數(shù)Mankind
function Mankind(name){
    this.name = name;
}
//實例化對象Dad
var Dad = new Mankind("BaBa");
console.log(Dad.name); //打印結(jié)果為BaBa

? ? ? ? 很明白了，通過構(gòu)造函數(shù)實例化對象，構(gòu)造函數(shù)里面的this就是指向這個實例化對象了。

GPU云服務(wù)器云服務(wù)器 this的指向 javascript中this詳解 javascript的this 改變this指向

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84529.html

發(fā)表評論

登陸后可評論

0條評論

shinezejian

男|高級講師

我要關(guān)注我要私信

TA的文章

#黑五#hostarmada：共享主機80%折扣，vps主機30%折扣，新加坡/美國等9機房

閱讀 976·2021-11-24 10:42
面試官問我Redis集群，我真的是

閱讀 3524·2021-11-19 11:34
C語言進階：動態(tài)內(nèi)存管理

閱讀 2660·2021-09-29 09:35
干貨|app自動化測試之Andriod WebView如何測試

閱讀 2544·2021-09-09 09:33
2020騰訊云產(chǎn)品采購季有獎問卷調(diào)查,認真填寫送騰訊云代金券獎勵

閱讀 690·2021-07-26 23:38
深入解析CSS FlexBox

閱讀 2535·2019-08-30 10:48
淺談 CSS 中的偽類 after

閱讀 1400·2019-08-28 18:07
數(shù)字孿生——思考IoT未來，UINO2019展會邀您蒞臨！

閱讀 434·2019-08-26 13:44

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

關(guān)于javascript中this的指向

我GitHub上的菜鳥倉庫地址：點擊跳轉(zhuǎn)查看其他相關(guān)文章

文章在我的博客上的地址：點擊跳轉(zhuǎn)

相關(guān)文章

關(guān)于javascript 中的高級定時器的若干問題

關(guān)于javascript中的bind、call、apply等函數(shù)的用法

關(guān)于JavaScript函數(shù)調(diào)用的幾種模式

關(guān)于JavaScript中this的相關(guān)知識點

關(guān)于javascript中的this指向

發(fā)表評論

0條評論

shinezejian

男|高級講師

TA的文章

#黑五#hostarmada：共享主機80%折扣，vps主機30%折扣，新加坡/美國等9機房

面試官問我Redis集群，我真的是

C語言進階：動態(tài)內(nèi)存管理

干貨|app自動化測試之Andriod WebView如何測試

2020騰訊云產(chǎn)品采購季有獎問卷調(diào)查,認真填寫送騰訊云代金券獎勵

深入解析CSS FlexBox

淺談 CSS 中的偽類 after

數(shù)字孿生——思考IoT未來，UINO2019展會邀您蒞臨！

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

關(guān)于javascript中this的指向

我GitHub上的菜鳥倉庫地址： 點擊跳轉(zhuǎn)查看其他相關(guān)文章

文章在我的博客上的地址： 點擊跳轉(zhuǎn)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

我GitHub上的菜鳥倉庫地址：點擊跳轉(zhuǎn)查看其他相關(guān)文章

文章在我的博客上的地址：點擊跳轉(zhuǎn)