普通函数与箭头函数的this作用域差异及箭头函数获取本地this的方法

现象原理说明 #

你给出的代码输出差异是普通函数和箭头函数的this绑定规则不同导致的：

• 普通函数myRegFunc作为对象方法调用时，this会隐式绑定到调用它的users对象，因此输出users本身。
• 箭头函数myArrowFunc没有独立的this绑定，会继承外层词法作用域的this。对象字面量的花括号不会创建新的词法作用域，因此箭头函数的外层作用域就是全局作用域（浏览器环境下为Window对象），所以输出全局对象。

问题解答 #

1. 能否让箭头函数引用到和普通函数一致的this信息？ #

直接在对象字面量中定义的箭头函数无法实现这一点。箭头函数的this是在定义阶段就从外层词法作用域继承的，后续无法通过call、apply、bind等方法修改，也不会因为调用方式变化而改变。

2. 箭头函数是否无法绑定本地this？ #

是的，箭头函数本身不支持自定义this绑定，所有传入的this参数都会被忽略。

3. 能否通过全局this挂载多层属性访问本地this？ #

技术上可以实现，但这是极不推荐的写法：会污染全局命名空间，多实例场景下会出现变量覆盖冲突，维护成本极高，完全没有必要使用这种方案。 #

推荐实现方案 #

如果需要箭头函数访问到对象上下文，可以用以下两种常规方案：

方案1：在构造函数内定义箭头函数 #

利用构造函数的this指向实例的特性，让箭头函数继承到实例this：

function Users() {
  this.name = 'John'
  // 箭头函数继承构造函数作用域的this，也就是实例本身
  this.myArrowFunc = () => console.log('myArrowFunc this: ', this)
  this.myRegFunc = function() {
    console.log('myRegFunc : ', this)
  }
}
const users = new Users()
users.myRegFunc() // 输出实例对象
users.myArrowFunc() // 同样输出实例对象

方案2：对象字面量直接引用对象变量 #

如果坚持使用对象字面量，直接引用外层的对象变量即可，无需绕this逻辑：

const users = {
  name: 'John',
  myRegFunc: function() {
    console.log('myRegFunc : ', this)
  },
  // 直接引用外层的users变量，效果和访问this一致
  myArrowFunc: () => console.log('myArrowFunc 访问对象: ', users),
};
users.myRegFunc();
users.myArrowFunc();

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