setTimeout和箭頭函式巢狀中的this指向

LDY同學發表於2018-09-10
函式巢狀

Node環境

//指向obj1,obj1
var obj1 = {
    a: 2,
    getA() {
        console.log(this);
        setTimeout(() => {
            console.log(this);
        }, 1000);
    }
};
obj1.getA();

// 指向obj2,timeOut
var obj2 = {
    a: 2,
    getA() {
        console.log(this);
        setTimeout(function () {
            console.log(this);
        }, 1000);
    }
};
obj2.getA();

// 指向{},timeOut
var obj3 = {
    a: 2,
    getA: () => {
        console.log(this);
        setTimeout(function () {
            console.log(this);
        }, 1000);
    }
};
obj3.getA();

// 指向{},{}
var obj4 = {
    a: 2,
    getA: () => {
        console.log(this);
        setTimeout(() => {
            console.log(this);
        }, 1000);
    }
};
obj4.getA();
複製程式碼

chrome環境

//指向obj1,obj1
var obj1 = {
    a: 2,
    getA() {
        console.log(this);
        setTimeout(() => {
            console.log(this);
        }, 1000);
    }
};
obj1.getA();

// 指向obj2,window
var obj2 = {
    a: 2,
    getA() {
        console.log(this);
        setTimeout(function () {
            console.log(this);
        }, 1000);
    }
};
obj2.getA();

// 指向window,window
var obj3 = {
    a: 2,
    getA: () => {
        console.log(this);
        setTimeout(function () {
            console.log(this);
        }, 1000);
    }
};
obj3.getA();

// 指向window,window
var obj4 = {
    a: 2,
    getA: () => {
        console.log(this);
        setTimeout(() => {
            console.log(this);
        }, 1000);
    }
};
obj4.getA();
複製程式碼

結論：關於node和chrome的相關this指向體系太龐大，自己總結吧，這裡就不贅述了

相關文章