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

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

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

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

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

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

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

? ? ? ? 好了，來個(gè)普遍例子：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

? ? ? ? 如果你不假思索就能說是20的話，證明你已邁出了一大步了，同一個(gè)道理，是通過對(duì)象訪問屬性的方式執(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);

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

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

? ? ? ? 所以上面這個(gè)例子，就是結(jié)論中的其他情況咯，嚴(yán)格模式this指向undefined（當(dāng)然這個(gè)例子會(huì)報(bào)錯(cuò)，因?yàn)閡ndefined沒有a屬性），非嚴(yán)格模式指向全局對(duì)象（當(dāng)然這個(gè)例子會(huì)打印undefined，因?yàn)槿謱?duì)象沒有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。

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

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

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

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

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

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