摘要：本文總結(jié)了的各種情況，并從規(guī)范的角度探討了的具體實(shí)現(xiàn)，希望對(duì)大家理解有所幫助。規(guī)范規(guī)范里面詳細(xì)介紹了的實(shí)現(xiàn)細(xì)節(jié)，通過閱讀規(guī)范，我們可以更準(zhǔn)確的理解上述四種情況到底是怎么回事。由于本人能力有限，如有理解錯(cuò)誤的地方還望指出。

this是面向?qū)ο缶幊讨械囊粋€(gè)概念，它一般指向當(dāng)前方法調(diào)用所在的對(duì)象，這一點(diǎn)在java、c++這類比較嚴(yán)格的面向?qū)ο缶幊陶Z言里是非常明確的。但是在javascript中，this的定義要靈活許多，如果未準(zhǔn)確掌握，非常容易混淆。本人在面試過程中也發(fā)現(xiàn)，面試者很少有由能夠回答得非常全面的。本文總結(jié)了this的各種情況，并從Ecma規(guī)范的角度探討了this的具體實(shí)現(xiàn)，希望對(duì)大家理解this有所幫助。

在javascript里面，this的指向可以歸納為以下四種情況。只要能牢記這四種情況，大部分情況下就已經(jīng)夠用了。

1.在全局代碼或者普通的函數(shù)調(diào)用中，this指向全局對(duì)象，在瀏覽器里面既為window對(duì)象。

    console.log(this);//輸出window
    
    function foo(){
        console.log(this);
    }
    foo();//輸出window

在瀏覽器環(huán)境里運(yùn)行上述代碼，兩處輸出結(jié)果均為window對(duì)象。

2.通過call或apply方法調(diào)用函數(shù)，this指向方法調(diào)用的第一個(gè)參數(shù)。

    var obj = {name:"test"};
    
    function foo(){
        console.log(this);
    }
    
    foo.call(obj);//輸出obj
    foo.apply(obj);//輸出obj

在瀏覽器環(huán)境里執(zhí)行以上代碼，輸出結(jié)果均為對(duì)象obj。call和apply除了參數(shù)形式不一樣外其他都一樣，call采用逗號(hào)分割，apply采用數(shù)組。說到這里，順便介紹一個(gè)小技巧。如何在不生成新數(shù)組的情況下實(shí)現(xiàn)兩個(gè)數(shù)組的連接？請(qǐng)看下面的代碼。

    var arr1 = [1, 2 , 3],
        arr2 = [4, 5, 6];
    Array.prototype.push.apply(arr1, arr2);
    
    console.log(arr1);//輸出[1, 2, 3, 4, 5, 6]

執(zhí)行上述代碼后，輸出結(jié)果為[1, 2, 3, 4, 5, 6]。這是一個(gè)非常實(shí)用的小技巧，由于apply第二個(gè)參數(shù)為數(shù)組形式，所以我們可以把push方法“借”過來，從而實(shí)現(xiàn)兩個(gè)數(shù)組的連接。

3.調(diào)用對(duì)象的方法，this指向該對(duì)象。

    var obj = {name:"test"};
    
    function foo(){
        console.log(this);
    }
    obj.foo = foo;
    
    obj.foo();//輸出obj

執(zhí)行以上代碼后，控制臺(tái)輸出為obj對(duì)象。這就是我們常說的“誰調(diào)用，指向誰”。

4.構(gòu)造方法中的this，指向新構(gòu)造的對(duì)象。

    function C(){
        this.name = "test";
        this.age = 18;
        console.log(this);
    }
    var c = new C();//輸出 c
    console.log(c);//輸出 c

執(zhí)行以上代碼后，控制臺(tái)輸出均為c所指向的對(duì)象。當(dāng)new操作符用于函數(shù)時(shí)，會(huì)創(chuàng)建一個(gè)新對(duì)象，并用this指向它。

Ecma規(guī)范里面詳細(xì)介紹了this的實(shí)現(xiàn)細(xì)節(jié)，通過閱讀規(guī)范，我們可以更準(zhǔn)確的理解上述四種情況到底是怎么回事。
函數(shù)對(duì)象有一個(gè)叫[[Call]]內(nèi)部方法，函數(shù)的執(zhí)行其實(shí)是通過[[Call]]方法來執(zhí)行的。[[Call]]方法接收兩個(gè)參數(shù)thisArg和argumentList，thisArg和this的指向有直接關(guān)系，argumentList為函數(shù)的實(shí)參列表。thisArg又是怎么來的呢？我們可以和前面討論的四種情況對(duì)應(yīng)起來：

普通方法調(diào)用thisArg為undefined。

通過call或apply調(diào)用，thisArg既為第一個(gè)參數(shù)。

通過對(duì)象調(diào)用，thisArg指向該對(duì)象。

在構(gòu)造方法中，thisArg為新構(gòu)造的對(duì)象。

thisArg和this是什么關(guān)系？規(guī)范里的描述是這樣的：

If the function code is strict code, set the ThisBinding to thisArg.

Else if thisArg is null or undefined, set the ThisBinding to the global object.

Else if Type(thisArg) is not Object, set the ThisBinding to ToObject(thisArg).

Else set the ThisBinding to thisArg.

在嚴(yán)格模式下，thisArg和this是一一對(duì)應(yīng)的。

function foo(){
    "use strict";
    console.log(this);
}
foo();//輸出undefined

該示例輸出的結(jié)果為undefined。

第二點(diǎn)是說如果thisArg為null或者undefined則this指向全局對(duì)象。

function foo(){
    console.log(this);
}
foo.call(null);//輸出window

該示例的輸出結(jié)果為window。

第三點(diǎn)說如果thisArg為非對(duì)象類型，則會(huì)強(qiáng)制轉(zhuǎn)型成對(duì)象類型。

function foo(){
    console.log(this);
}
var aa = 2;
console.log(aa);//輸出2
foo.call(aa);//輸出 Number

這里的輸出結(jié)果分別為2和Number，它將基本類型轉(zhuǎn)型成了對(duì)象包裝類型。

第四點(diǎn)說明剩下的情況thisArg和this為一一對(duì)應(yīng)的關(guān)系。

規(guī)范里面對(duì)this指向的描述還是比較明確的。只要你搞清楚thisArg怎么確定，thisArg和this的對(duì)應(yīng)關(guān)系，那么你就能搞定所有this的情況了。

在實(shí)際使用this的過程中，遇到得最多得一個(gè)問題可能就是上下文丟失的問題了。因?yàn)閖avascript中的函數(shù)是可以作為參數(shù)傳遞的，那么其他對(duì)象在執(zhí)行回調(diào)函數(shù)時(shí)就可能造成回調(diào)函數(shù)原來的上下文丟失，也就是this的指向改變了。

var C = function(){
    this.name = "test";
    this.greet = function(){
        console.log("Hello,I am "+this.name+"!");
    };
}
var obj = new C();

obj.greet();//輸出 Hello,I am test!

setTimeout(obj.greet, 1000);//輸出 Hello,I am !

可見第二條輸出中this的值改變了，其實(shí)我們是希望this能夠指向obj的。解決該問題的方法有兩種。

1.bind方法。
bind方法通過閉包巧妙地實(shí)現(xiàn)了上下文的綁定，它實(shí)際上是將原方法包裝成了一個(gè)新方法。一般的實(shí)現(xiàn)如下：

Function.prototype.bind = function(){
    var args = arguments,
        thisArg = arguments[0],
        func = this;
    return function(){
        var arg = Array.prototype.slice.call(args, 1);
        Array.prototype.push.apply(args, arguments);
        return func.apply(thisArg, arg);
    }
}

前面的示例代碼我們只需要加上bind，就能夠得到我們希望的結(jié)果了。

...
setTimeout(obj.greet.bind(obj), 1000);//輸出 Hello,I am test!
...

2.es6箭頭函數(shù)。
es6里面提供了一個(gè)新的語法糖，箭頭函數(shù)。箭頭函數(shù)的this不再變幻莫測(cè)，它永遠(yuǎn)指向函數(shù)定義時(shí)的this值。

var C = function(){
    this.name = "test";
    this.greet = ()=>{
        console.log("Hello,I am "+this.name+"!");
    };
}
var obj = new C();

obj.greet();//輸出 Hello,I am test!

setTimeout(obj.greet, 1000);//輸出 Hello,I am test!

我們將前面的示例該成箭頭函數(shù)后，兩處的輸出結(jié)果一樣了。this的值不再改變了，這是我們想要的。

this看起來是個(gè)非常小的知識(shí)點(diǎn)，其實(shí)挖起來還是有很多細(xì)節(jié)的，特別是規(guī)范里面的一些定義，本人覺得對(duì)于一個(gè)js程序員來說是非常重要的。本人后面也準(zhǔn)備找些ecma規(guī)范里面的知識(shí)點(diǎn)和大家分享，希望能對(duì)大家有所幫助。由于本人能力有限，如有理解錯(cuò)誤的地方還望指出。