摘要：首先，必須搞清楚在里面，函數(shù)的幾種調(diào)用方式普通函數(shù)調(diào)用作為方法來(lái)調(diào)用作為構(gòu)造函數(shù)來(lái)調(diào)用使用方法來(lái)調(diào)用方法箭頭函數(shù)但是不管函數(shù)是按哪種方法來(lái)調(diào)用的，請(qǐng)記住一點(diǎn)誰(shuí)調(diào)用這個(gè)函數(shù)或方法關(guān)鍵字就指向誰(shuí)。

本文主要解釋在JS里面this關(guān)鍵字的指向問(wèn)題(在瀏覽器環(huán)境下)。

首先，必須搞清楚在JS里面，函數(shù)的幾種調(diào)用方式:

普通函數(shù)調(diào)用

作為方法來(lái)調(diào)用

作為構(gòu)造函數(shù)來(lái)調(diào)用

使用apply/call方法來(lái)調(diào)用

Function.prototype.bind方法

es6箭頭函數(shù)

但是不管函數(shù)是按哪種方法來(lái)調(diào)用的，請(qǐng)記住一點(diǎn)：誰(shuí)調(diào)用這個(gè)函數(shù)或方法,this關(guān)鍵字就指向誰(shuí)。

接下來(lái)就分情況來(lái)討論下這些不同的情況：

    function person(){
        this.name="xl";
        console.log(this);
        console.log(this.name);
    }
    
    person();  //輸出  window  xl   
    

在這段代碼中person函數(shù)作為普通函數(shù)調(diào)用，實(shí)際上person是作為全局對(duì)象window的一個(gè)方法來(lái)進(jìn)行調(diào)用的,即window.person();
所以這個(gè)地方是window對(duì)象調(diào)用了person方法,那么person函數(shù)當(dāng)中的this即指window,同時(shí)window還擁有了另外一個(gè)屬性name,值為xl.

    var name="xl";
    function person(){
        console.log(this.name);
    }
    person(); //輸出 xl

同樣這個(gè)地方person作為window的方法來(lái)調(diào)用，在代碼的一開(kāi)始定義了一個(gè)全局變量name，值為xl,它相當(dāng)于window的一個(gè)屬性,即window.name="xl",又因?yàn)樵谡{(diào)用person的時(shí)候this是指向window的，因此這里會(huì)輸出xl.

在上面的代碼中，普通函數(shù)的調(diào)用即是作為window對(duì)象的方法進(jìn)行調(diào)用。顯然this關(guān)鍵字指向了window對(duì)象.

再來(lái)看下其他的形式

    var name="XL";
    var person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
    }
    person.showName();  //輸出  xl
    //這里是person對(duì)象調(diào)用showName方法，很顯然this關(guān)鍵字是指向person對(duì)象的，所以會(huì)輸出name
    
    var showNameA=person.showName;
    showNameA();    //輸出  XL
    //這里將person.showName方法賦給showNameA變量，此時(shí)showNameA變量相當(dāng)于window對(duì)象的一個(gè)屬性，因此showNameA()執(zhí)行的時(shí)候相當(dāng)于window.showNameA(),即window對(duì)象調(diào)用showNameA這個(gè)方法，所以this關(guān)鍵字指向window

再換種形式：

    var personA={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
    }
    var personB={
        name:"XL",
        sayName:personA.showName
    }
    
    personB.sayName();  //輸出 XL
    //雖然showName方法是在personA這個(gè)對(duì)象中定義，但是調(diào)用的時(shí)候卻是在personB這個(gè)對(duì)象中調(diào)用，因此this對(duì)象指向

    function  Person(name){
        this.name=name;
    }
    var personA=Person("xl");
    console.log(personA.name); // 輸出  undefined
    console.log(window.name);//輸出  xl
    //上面代碼沒(méi)有進(jìn)行new操作，相當(dāng)于window對(duì)象調(diào)用Person("xl")方法，那么this指向window對(duì)象，并進(jìn)行賦值操作window.name="xl".
    
    var personB=new Person("xl");
    console.log(personB.name);// 輸出 xl
    //這部分代碼的解釋見(jiàn)下
    

    //下面這段代碼模擬了new操作符(實(shí)例化對(duì)象)的內(nèi)部過(guò)程
    function person(name){
        var o={};
        o.__proto__=Person.prototype;  //原型繼承
        Person.call(o,name);
        return o;
    }
    var personB=person("xl");
    
    console.log(personB.name);  // 輸出  xl
    

在person里面首先創(chuàng)建一個(gè)空對(duì)象o，將o的proto指向Person.prototype完成對(duì)原型的屬性和方法的繼承

Person.call(o,name)這里即函數(shù)Person作為apply/call調(diào)用(具體內(nèi)容下方)，將Person對(duì)象里的this改為o，即完成了o.name=name操作

返回對(duì)象o。

因此`person("xl")`返回了一個(gè)繼承了`Person.prototype`對(duì)象上的屬性和方法，以及擁有`name`屬性為"xl"的對(duì)象，并將它賦給變量`personB`.
所以`console.log(personB.name)`會(huì)輸出"xl"

在JS里函數(shù)也是對(duì)象，因此函數(shù)也有方法。從Function.prototype上繼承到Function.prototype.call/Function.prototype.apply方法
call/apply方法最大的作用就是能改變this關(guān)鍵字的指向.

Obj.method.apply(AnotherObj,arguments);

    var name="XL";
    var Person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
    }
    Person.showName.call(); //輸出 "XL"
    //這里call方法里面的第一個(gè)參數(shù)為空，默認(rèn)指向window。
    //雖然showName方法定義在Person對(duì)象里面，但是使用call方法后，將showName方法里面的this指向了window。因此最后會(huì)輸出"XL";

    funtion FruitA(n1,n2){
        this.n1=n1;
        this.n2=n2;
        this.change=function(x,y){
            this.n1=x;
            this.n2=y;
        }
    }
    
    var fruitA=new FruitA("cheery","banana");
    var FruitB={
        n1:"apple",
        n2:"orange"
    };
    fruitA.change.call(FruitB,"pear","peach");
    
    console.log(FruitB.n1); //輸出 pear
    console.log(FruitB.n2);// 輸出 peach

FruitB調(diào)用fruitA的change方法，將fruitA中的this綁定到對(duì)象FruitB上。

    var name="XL";
    function Person(name){
        this.name=name;
        this.sayName=function(){
            setTimeout(function(){
                console.log("my name is "+this.name);
            },50)
        }
    }
    var person=new Person("xl");
    person.sayName()  //輸出  “my name is XL”;
                       //這里的setTimeout()定時(shí)函數(shù),相當(dāng)于window.setTimeout(),由window這個(gè)全局對(duì)象對(duì)調(diào)用,因此this的指向?yàn)閣indow, 則this.name則為XL 

那么如何才能輸出"my name is xl"呢？

    var name="XL";
    function Person(name){
        this.name=name;
        this.sayName=function(){
            setTimeout(function(){
                console.log("my name is "+this.name);
            }.bind(this),50)  //注意這個(gè)地方使用的bind()方法，綁定setTimeout里面的匿名函數(shù)的this一直指向Person對(duì)象
        }
    }
    var person=new Person("xl");
    person.sayName(); //輸出 “my name is xl”;

這里setTimeout(function(){console.log(this.name)}.bind(this),50);,匿名函數(shù)使用bind(this)方法后創(chuàng)建了新的函數(shù)，這個(gè)新的函數(shù)不管在什么地方執(zhí)行，this都指向的Person,而非window,因此最后的輸出為"my name is xl"而不是"my name is XL"

另外幾個(gè)需要注意的地方：
setTimeout/setInterval/匿名函數(shù)執(zhí)行的時(shí)候，this默認(rèn)指向window對(duì)象，除非手動(dòng)改變this的指向。在《javascript高級(jí)程序設(shè)計(jì)》當(dāng)中，寫(xiě)到：“超時(shí)調(diào)用的代碼(setTimeout)都是在全局作用域中執(zhí)行的，因此函數(shù)中的this的值，在非嚴(yán)格模式下是指向window對(duì)象，在嚴(yán)格模式下是指向undefined”。本文都是在非嚴(yán)格模式下的情況。

    var name="XL";
    function Person(){
        this.name="xl";
        this.showName=function(){
            console.log(this.name);
        }
        setTimeout(this.showName,50);
    }
    var person=new Person(); //輸出 "XL"
    
    //在setTimeout(this.showName,50)語(yǔ)句中，會(huì)延時(shí)執(zhí)行this.showName方法
    //this.showName方法即構(gòu)造函數(shù)Person()里面定義的方法。50ms后，執(zhí)行this.showName方法，this.showName里面的this此時(shí)便指向了window對(duì)象。則會(huì)輸出"XL";

修改上面的代碼：

    var name="XL";
    function Person(){
        this.name="xl";
        var that=this;
        this.showName=function(){
            console.log(that.name);
        }
        setTimeout(this.showName,50)
    }
    var person=new Person(); //輸出 "xl"
    //這里在Person函數(shù)當(dāng)中將this賦值給that，即讓that保存Person對(duì)象，因此在setTimeout(this.showName,50)執(zhí)行過(guò)程當(dāng)中，console.log(that.name)即會(huì)輸出Person對(duì)象的屬性"xl"

匿名函數(shù)：

    var name="XL";
    var person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
        sayName:function(){
            (function(callback){
                callback();
            })(this.showName)
        }
    }
    person.sayName();  //輸出 XL

    var name="XL";
    var person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
        sayName:function(){
            var that=this;
            (function(callback){
                callback();
            })(that.showName)
        }
    }
    person.sayName() ;  //輸出  "xl"
    //匿名函數(shù)的執(zhí)行同樣在默認(rèn)情況下this是指向window的，除非手動(dòng)改變this的綁定對(duì)象

該函數(shù)執(zhí)行的時(shí)候，this綁定到當(dāng)前作用域的對(duì)象上

    var name="XL";
    var person={
        name:"xl",
        showName:function(){
            eval("console.log(this.name)");
        }
    }
    
    person.showName();  //輸出  "xl"
    
    var a=person.showName;
    a();  //輸出  "XL"

es6里面this指向固定化，始終指向外部對(duì)象，因?yàn)榧^函數(shù)沒(méi)有this,因此它自身不能進(jìn)行new實(shí)例化,同時(shí)也不能使用call, apply, bind等方法來(lái)改變this的指向

   function Timer() {
        this.seconds = 0;
        setInterval( () => this.seconds ++, 1000);
    } 
    
    var timer = new Timer();
    
    setTimeout( () => console.log(timer.seconds), 3100);
    
    // 3
    
    在構(gòu)造函數(shù)內(nèi)部的setInterval()內(nèi)的回調(diào)函數(shù)，this始終指向?qū)嵗膶?duì)象，并獲取實(shí)例化對(duì)象的seconds的屬性,每1s這個(gè)屬性的值都會(huì)增加1。否則最后在3s后執(zhí)行setTimeOut()函數(shù)執(zhí)行后輸出的是0

javascript中this詳解

深入淺出javascript中的this

setTimeout中this的指向問(wèn)題