JavaScript中this值为何不同？test与test2执行结果差异解析

代码示例 #

var obj = {
    a: 2,
}
var a = 3;

const func = () => {
    console.log(this.a);
}

function test() {
    setTimeout(func, 100);
}

function test2() {
    setTimeout(() => {
        console.log(this.a);
    }, 100);
}
test.call(obj); //3
test2.call(obj); //2

问题 #

上述代码中，test与test2函数逻辑看似一致，但执行结果却不相同，请问这是由JavaScript中this的什么机制导致的？

这是箭头函数的词法this绑定规则与函数调用上下文传递逻辑共同作用的结果，具体拆解：

1. 箭头函数的this是词法绑定，定义时即确定
   箭头函数不会创建独立的this上下文，它的this完全继承自自身定义时所在的词法作用域。

• func这个箭头函数定义在全局作用域中，所以它的this固定绑定全局对象（浏览器环境为window，Node.js环境为global），对应全局变量a=3，因此执行时输出3。
• 哪怕test.call(obj)把test函数的this绑定为obj，但setTimeout调用的func是提前定义好的，它的this不会随test的上下文改变。

2. test2内部的箭头函数继承了test2的执行上下文
   test2内部的箭头函数定义在test2的作用域中，它的this会继承test2执行时的this。

• test2.call(obj)将test2的this绑定为obj，内部的箭头函数自然沿用这个上下文，执行时访问obj.a，输出2。
• 如果这里是普通函数作为setTimeout回调，它的this会默认绑定全局，但箭头函数不会遵循这个动态绑定规则。

核心差异就是：箭头函数的this是静态绑定，从定义时的作用域继承；普通函数的this是动态绑定，由调用方式决定。两个场景中箭头函数的定义位置不同，导致继承的this上下文不一样，最终输出结果不同。

内容的提问来源于stack exchange，提问作者gogole