箭頭函數和普通函數this指向的實例理解

一般理解：

箭頭函數：

箭頭函數的this是在定義函數時綁定的，不是在執行過程中綁定的。簡單的說，函數在定義時，this就繼承了定義函數的對象。　

普通函數：

this對象是在運行時基於函數的執行環境綁定的：在全局函數中，this指向的是window；當函數被作為某個對象的方法調用時，this就等於那個對象

網上找的定義都很難理解。而下面的定義理解起來非常簡單。

核心：箭頭函數不會創建自己的this,它只會從自己的作用域鏈的上一層繼承this。

實例：

var a = 20;
var obj = {
    a: 10,
    b: function() {
        console.log(this.a);  
    },
    b1:this.a,
    c:{
        a:50,
        fn:function(){        
            console.log(this.a);
        }
    },
    d: () => {
        console.log(this.a);  
    },

    e: function() {
        return () => {
            console.log(this.a);
        }
    },

}
obj.b();//10  //一個函數中有this，這個函數有被上一級的對象所調用，那么this指向的就是上一級的對象。this 指向 obj    
console.log(obj.b1);//20  this指向的就是上一級的對象。this指向window
obj.c.fn();//50   一個函數中有this，盡管這個函數是被最外層的對象所調用，this指向的也只是它上一級的對象c。區分下面的方法
var f=obj.c.fn;
f();//20   this永遠指向的是最后調用它的對象 雖然函數fn是被對象c所引用，但是在將fn賦值給變量f的時候並沒有執行所以最終指向的是window
obj.d();//20  箭頭函數不會創建自己的this,它只會從自己的作用域鏈的上一層繼承this。 this 指向window 
obj.e()();//10  this指向obj 。如果有多級箭頭函數嵌套()=> () => () => this.a this指向第一個箭頭函數的上一級對象。

 

總結：箭頭函數沒有自己的this，箭頭函數中用this和普通語句中的this沒什么區別，所以，你知道非箭頭函數下怎么用this,就知道箭頭函數下怎么用this。
關於 “箭頭函數對this固定化，箭頭函數中的this綁定定義時所在的作用域，箭頭函數不能通過 call() 或 apply() 方法綁定this” 等描述，都源於箭頭函數沒有自己的this。

 

例外：當this遇到retrun，如果返回值是一個對象，那么this指向的就是那個返回的對象，如果返回值不是一個對象那么this還是指向函數

function fn()  
{  
    this.user = '二狗子';  
    return {};  
}
var a = new fn;  
console.log(a.user); //undefined

function fn()  
{  
    this.user = '二狗子';  
    return 1;
}
var a = new fn;  
console.log(a.user); //二狗子

 

參考1     參考2