this學習

在前端javascript中，最難理解的就是this的指向問題，這也是面試中最常見的問題。那就看下this存在哪些場景中。

先來看下幾個場景

存在物件之中

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

這時候斷點this的時候，this顯示的是物件obj。可以獲取到物件的name和fn，所以最後控制檯輸出的是leon。再來看下在普通函式之中的this。

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

執行普通函式時，列印出33333。此時的this指向的物件是window全域性。再來看下在建構函式的時候。

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

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

除錯發現在建構函式中的this指向的是當前建構函式,city屬性又掛載在People的原型鏈上，所以p.city相當於People.city。

從上面3個簡單的栗子中可以總結出一個規律，在javascript中的this，始終指向那個最後呼叫的那個物件。物件中的obj.fn()指向了obj;普通函式中的getAge()相當於window.getAge()，所以最後的this指向了window；

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

使用區別

傳遞引數時，apply是使用陣列的形式來傳遞。呼叫觸發時，bind需要手動觸發函式。

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

三者的第一個引數都是傳遞你需要指向的物件，後面是傳遞的引數。在使用bind的時候需要注意下相容性主流都支援，IE11才開始支援這個方法。

其他改變指向方法

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

在settimeout中，由於是window呼叫setTimeOut，所以this指向了window,輸出的結果undefined。如果執行var self = this時，this的指向為other物件，通過self變數儲存起來。此時在setTimeOut中使用self.test時，從other物件中找到test。ES6中的箭頭函式中，this的使用則完全顛覆上面所說的this始終指向最後呼叫它的物件。在箭頭函式中，this繫結按照所在函式在哪個物件下面，多層巢狀下，this指向最外層。

如果有寫的不對的，理解錯的請指出，謝謝