箭头函数this指向词法作用域，为何两示例输出结果不同？

先看两个示例的代码和执行结果：

示例1 #

const obj = {
  perimeter: () => {
    console.log(this); // 输出 window（浏览器环境）
  }
}
obj.perimeter()

示例2 #

const obj = {
    sing(){
    console.log(this); // 输出 obj
    const b = () =>{
        console.log(this); // 输出 obj
    }
    b();
  }
}
obj.sing()

核心原因：箭头函数的this继承自定义时的词法作用域，而非调用时的上下文 #

箭头函数本身没有独立的this，它的this完全由定义它时所处的词法作用域决定，和调用方式无关。两个示例的差异本质是箭头函数定义时的词法作用域不同：

1. 示例1的箭头函数定义在全局作用域
   perimeter这个箭头函数是在全局作用域下定义的（obj的初始化语句处于全局作用域），所以它继承的是全局作用域的this——在浏览器里就是window对象。哪怕通过obj.perimeter()调用它，箭头函数也不会绑定obj作为this，因为它从一开始就继承了全局的this。

2. 示例2的箭头函数定义在普通函数作用域内
   sing是一个普通函数，当通过obj.sing()调用它时，普通函数的this会绑定到调用它的对象obj。而箭头函数b是定义在sing函数内部的，它的词法作用域就是sing函数的作用域，所以会继承sing函数执行时的this（也就是obj）。因此调用b()时，输出的this就是obj。

简单说：箭头函数的this是“写死”在定义它的那个作用域里的，看它在哪定义，不看它在哪调用。

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