JavaScript箭头函数与普通函数的this关键字指向差异疑问

首先明确核心规则：

• 普通函数拥有独立的this，属于动态绑定，this指向由调用时的上下文决定：作为对象方法调用时，this指向调用它的对象。
• 箭头函数没有自身的this，属于词法静态绑定，this完全继承自定义时所在的外层作用域的this，和后续的调用方式没有任何关系。
• 额外注意：对象字面量的花括号{}不会创建新的作用域，只有函数的花括号才会产生独立作用域。

第一个示例解析 #

var obj = { // 此处的{}是对象字面量，不产生新作用域
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log(this.i, this);
  }
}

obj.b(); // 输出 undefined, Window {...} (或全局对象)
obj.c(); // 输出 10, Object {...}

你看到的差异是因为：

1. 普通函数c作为obj的方法被obj.c()调用，动态绑定的this指向obj，所以能正常拿到this.i为10。
2. 箭头函数b直接定义在对象字面量里，外层没有其他函数作用域，所以继承的是全局作用域的this，浏览器环境下全局this就是window对象，window上没有定义i属性，所以输出undefined。

第二个示例解析 #

var obj = {
    count : 10,
    doSomethingLater : function(){ 
        setTimeout( () => { // 该箭头函数定义在doSomethingLater的函数作用域内
            this.count++;
            console.log(this.count);
        }, 300);
    }
}

obj.doSomethingLater(); // 控制台输出11

这里的箭头函数能正常访问count属性，原因是：

1. 调用obj.doSomethingLater()时，普通函数doSomethingLater的this动态绑定为obj。
2. 内部的箭头函数是定义在doSomethingLater的函数作用域内的，所以它的this直接继承外层作用域（也就是doSomethingLater的this），也就是obj，所以可以正常访问this.count完成累加。

总结误区 #

不要误认为“定义在对象内部的箭头函数this就指向对象”，判断箭头函数的this只需要看：它定义的位置外层最近的普通函数的this是什么，箭头函数的this就是什么，如果外层没有普通函数，this就是全局对象。

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