JS箭头函数this指向疑问：嵌套对象内箭头函数为何打印全局对象

你对箭头函数this指向的理解偏差，核心是混淆了对象字面量的花括号和词法作用域边界的概念。

箭头函数的this绑定规则：在箭头函数中，this会保留其封闭词法上下文的this值，在全局代码中，它会被设置为全局对象。

• 首先要明确两个核心前提：
  • 箭头函数的this是定义时静态绑定的，继承自外层词法作用域的this，和调用方式、挂载的对象没有任何关系
  • 只有全局作用域、函数作用域、let/const所在的块级作用域会形成词法边界，对象字面量的花括号不会创建新的词法作用域
• 回到你的代码：
  你定义apple箭头函数时，它所在的上下文是obj的对象字面量内部，对象的{}不产生新作用域，所以apple的外层词法作用域就是你定义outerObj时所在的全局作用域，全局作用域的this自然是全局对象，因此执行outerObj.obj.apple()时会打印全局对象。
• 你预期的this指向obj的逻辑，是普通函数作为对象方法调用时的动态绑定规则，和箭头函数的规则完全不同。如果要实现你的预期，有两种常用写法：
  1. 把apple改为普通函数，利用普通函数调用时的动态this绑定：

  const outerObj = {
        lemon:5,
        obj:{
          egg:5,
          apple: function () {console.log(this)}
        }
      }
  outerObj.obj.apple() // 输出 { egg: 5, apple: [Function: apple] }
  

  2. 把箭头函数定义在普通函数内部，继承普通函数的this：

  const outerObj = {
        lemon:5,
        obj:{
          egg:5,
          apple: function () {
            const innerFn = () => console.log(this)
            innerFn()
          }
        }
      }
  outerObj.obj.apple() // 同样输出obj对象
  

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