setTimeout和箭头函数嵌套中的this指向

2,872 阅读1分钟

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指向体系太庞大,自己总结吧,这里就不赘述了