为什么JavaScript中作为对象属性的箭头函数无法获取指向对象的this引用？

现象说明 #

两段代码的运行差异完全来自普通函数和箭头函数的this绑定规则不同：

• 箭头函数定义的方法运行时报错：Uncaught TypeError: Cannot read property 'count' of undefined
• 普通函数定义的方法运行正常，输出1

对应代码如下：

// 箭头函数定义方法
var obj = {count: 0}
obj.increment =  () => { this.count = this.count +1}
obj.increment()
console.log(obj.count)

// 普通函数定义方法
var obj = {count: 0}
obj.increment =  function() { this.count = this.count +1}
obj.increment()
console.log(obj.count)

底层原因 #

• 普通函数的this是运行时动态绑定的：当函数以对象.方法名()的形式调用时，普通函数内部的this会自动绑定到.前面的所属对象，也就是本例中的obj，所以可以正常读写obj.count。
• 箭头函数没有独立的this绑定：它内部的this在定义阶段就已经固定，继承自外层词法作用域的this，后续不管用什么方式调用、哪怕用call/apply/bind强制修改都不会改变this指向。
  本例中箭头函数定义在全局作用域下，严格模式里全局作用域的this为undefined，所以调用时读取this.count直接触发报错；如果是非严格模式，这里的this会指向全局window对象，只会修改window上的count属性，同样不会修改obj.count，不符合预期。

最佳实践 #

箭头函数天生不适合用来定义对象的实例方法，如果你需要方法内的this指向所属对象，直接使用普通函数定义即可。

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