js函數中的this指向

寫代碼的時候遇到這個問題了，在這裡複習一下

1. 非箭頭函數
   非箭頭函數的this指向比較好理解，就是調用這個函數的對象，舉個慄子：

var obj = {
    foo: {
        bar: 3,
        foo:{
            bar: 4,
            foo: function a() { console.log(this.bar) },
        },
    },
    bar: 2
};

var foo = obj.foo.foo.foo;
var bar = 1;

obj.foo.foo.foo(); //由obj.foo.foo調用，所以此時this指向它，所以列印的this.a為4
foo(); //由window調用，所以this指向window，列印1

2. 箭頭函數
   箭頭函數的this指向，網上看到有一種說話是：箭頭函數的this指向定義他的對象，這樣理解是錯誤的。。。
   嚴格來講應該是：箭頭函數的this指向定義它的上下文對象，更通俗一點來說就是指向定義箭頭函數的那個形成函數作用域的函數所在對象（個人理解，有疑問的話可以在評論區討論一下）
   舉個慄子

var obj = {
    foo: {
        bar: 3,
        foo() {
            var bar = 4;
            return () => { console.log(this.bar) };
        },
    },
    bar: 2
};

var foo = obj.foo.foo;
var bar = 1;
obj.foo.foo()() // 此時this指向obj.foo對象，列印3
foo()()  // 此時this指向window，列印1

需要註意的是，執行函數的時候箭頭函數才被定義，所以下麵這個慄子列印結果才會不一樣
下麵這段代碼最後列印出來都是3

var obj = {
    foo: {
        bar: 3,
        foo() {
            var bar = 4;
            return () => { console.log(this.bar) };
        },
    },
    bar: 2
};

var foo = obj.foo.foo(); // 改了這裡
var bar = 1;
obj.foo.foo()() // 3
foo() // 3

最後，看一下把箭頭函數換成普通函數的寫法

var obj = {
    foo: {
        bar: 3,
        foo() {
            var bar = 4;
            return function() { console.log(this.bar) };
        },
    },
    bar: 2
};

var foo = obj.foo.foo;
var bar = 1;

obj.foo.foo()() // 1
foo()() // 1

總之就是，使用箭頭函數的this需要考慮它被定義的時候所在函數作用域的this，使用普通函數只用看誰調用了它。