關於this指向問題的討論一直是學習js不可忽視的重要部分，那些一個又一個圍繞this挖的筆試坑，彷彿永遠也填不完

var obj={
    fn:function(){
        console.log(this);
    }
}
obj.fn();//object

以上這段程式碼是再淺顯不過的this指向問題，也就是誰呼叫的函式，函式體中的this就指向誰
再看下面這段

var obj={
    fn:function(){
        setTimeout(function(){
            console.log(this);
        });
    }
}
obj.fn();
 
//window    

這次this指向了最外層的window物件，為什麼呢，還是那個道理，這次this出現在全域性函式setTImeout()中的匿名函式裡，並沒有某個物件進行顯示呼叫，所以this指向window物件
假如我們在這裡使用箭頭函式呢

var obj={
    fn:function(){
        setTimeout(() => {
            console.log(this);
        });
    }
}
obj.fn();//object

this又指向函式的宿主物件了

為了更加清楚的對比一般函式和箭頭函式this指向的區別，我們給物件新增變數

var obj={
    num:3,
    fn:function(){
        setTimeout(function(){
            console.log(this.num);
        });
    }
}
obj.fn();//undefined
//............................................................
var obj1={
    num:4,
    fn:function(){
        setTimeout(() => {
            console.log(
 
this.num);
        });
    }
}
obj1.fn();//4

如上程式碼，在沒有使用箭頭函式的情況下，this指向了window（匿名函式，沒有呼叫的宿主物件），而window物件並沒有num屬性（num屬性在obj中定義），而在使用箭頭函式的情況下，this的指向卻物件obj1，自然可以輸出obj1中定義的屬性num。
接下來看更復雜的情況

多層巢狀的箭頭函式

var obj1={
    num:4,
    fn:function(){
        var f=() => {    //object，也就是指obj1
            console.log(this);
            setTimeout(() => {
                console.log(this);// //object，也就是指obj1
            });
        }
        f();
    }
}
obj1.fn();

假如我們改動兩層箭頭函式的其中一處，看會出現什麼結果

var obj1={
    num:4,
    fn:function(){
        var f=function(){    
            console.log(this); //window,因為函式f定義後並沒有物件呼叫，this直接繫結到最外層的window物件
            setTimeout(() => {
                console.log(this);//window，外層this繫結到了window,內層也相當於定義在window層（全域性環境）
            });
        }
        f();
    }
}
obj1.fn();

好，接下來改變另一處

var obj1={
    num:4,
    fn:function(){
        var f=() => {    
            console.log(this); //object,f()定義在obj1物件中，this就指向obj1,這就是箭頭函式this指向的關鍵
            setTimeout(function() {
                console.log(this);//window，非箭頭函式的情況下還是要看宿主物件是誰，如果沒有被物件呼叫，函式體中的this就繫結的window上
            });
        }
        f();
    }
}
obj1.fn();

總結：

1.箭頭函式的this繫結看的是this所在的函式定義在哪個物件下，繫結到哪個物件則this就指向哪個物件

2.如果有物件巢狀的情況，則this繫結到最近的一層物件上
---------------------
作者：磷火
來源：CSDN
原文：https://blog.csdn.net/u013344815/article/details/73184928
版權宣告：本文為博主原創文章，轉載請附上博文連結！