在前端javascript中，最難理解的就是this的指向問(wèn)題，這也是面試中最常見(jiàn)的問(wèn)題。那就看下this存在哪些場(chǎng)景中。

先來(lái)看下幾個(gè)場(chǎng)景

存在對(duì)象之中

 var name = 'window_leon'
 var obj = {
     name:'leon',
     fn:function(){
         console.log(this.name);
     }
 };
obj.fn();  

這時(shí)候斷點(diǎn)this的時(shí)候，this顯示的是對(duì)象obj?？梢垣@取到對(duì)象的name和fn，所以最后控制臺(tái)輸出的是leon。再來(lái)看下在普通函數(shù)之中的this。

var age = '33333';
var getAge = function(){
    console.log(this.age);
}
getAge();

執(zhí)行普通函數(shù)時(shí)，打印出33333。此時(shí)的this指向的對(duì)象是window全局。再來(lái)看下在構(gòu)造函數(shù)的時(shí)候。

function People(city){
    this.city = city;
};

var p = new People('suzhou');
console.log(p.city);

調(diào)試發(fā)現(xiàn)在構(gòu)造函數(shù)中的this指向的是當(dāng)前構(gòu)造函數(shù),city屬性又掛載在People的原型鏈上，所以p.city相當(dāng)于People.city。

從上面3個(gè)簡(jiǎn)單的栗子中可以總結(jié)出一個(gè)規(guī)律，在javascript中的this，始終指向那個(gè)最后調(diào)用的那個(gè)對(duì)象。對(duì)象中的obj.fn()指向了obj;普通函數(shù)中的getAge()相當(dāng)于window.getAge()，所以最后的this指向了window；

知道了this的指向，下面就是如何改變this的指向。在js中改變this的指向主要使用的就是call,apply和bind三種方法

使用區(qū)別

傳遞參數(shù)時(shí)，apply是使用數(shù)組的形式來(lái)傳遞。調(diào)用觸發(fā)時(shí)，bind需要手動(dòng)觸發(fā)函數(shù)。

var obj1 = {
    name:'leon1',
    age:23
};

var obj2 = {
    name:'leon2',
    age:33
};

var demo = {
    name:'demo',
    fn:function(){
        console.log(this.name);
    }
};

var test = {
    fn:function(a,b){
        console.log(this.name+"++++++"+a+"==========="+b);
    }
};

test.fn.call(obj1,1,2);

test.fn.apply(obj2,[2,3]);

test.fn.bind(obj1,4,5)();



demo.fn();//demo

demo.fn.call(obj1);//leon1

demo.fn.apply(obj2);//leon2

demo.fn.bind(obj1)();//leon1

三者的第一個(gè)參數(shù)都是傳遞你需要指向的對(duì)象，后面是傳遞的參數(shù)。在使用bind的時(shí)候需要注意下兼容性主流都支持，IE11才開(kāi)始支持這個(gè)方法。

其他改變指向方法

var other = {
    test:'1234',
    fn:function(){
        // var self = this;
        setTimeout(function(){
            // console.log(self.test);
            console.log(this.test);
        },100)
    }
}
other.fn();

在settimeout中，由于是window調(diào)用setTimeOut，所以this指向了window,輸出的結(jié)果undefined。如果執(zhí)行var self = this時(shí)，this的指向?yàn)閛ther對(duì)象，通過(guò)self變量保存起來(lái)。此時(shí)在setTimeOut中使用self.test時(shí)，從other對(duì)象中找到test。ES6中的箭頭函數(shù)中，this的使用則完全顛覆上面所說(shuō)的this始終指向最后調(diào)用它的對(duì)象。在箭頭函數(shù)中，this綁定按照所在函數(shù)在哪個(gè)對(duì)象下面，多層嵌套下，this指向最外層。

如果有寫的不對(duì)的，理解錯(cuò)的請(qǐng)指出，謝謝