对象方法
假设想要创建一个绑定到对象的方法。
const mario = {
lives: 3,
oneUp: () => {
this.lives ;
}
}
这个例子中，如调用mario.oneUp()，mario.lives的值应该从3增加到4。然而，按照目前所写的代码，无论调用多少次oneUp()， lives的值都将保持不变。
为什么？正是因为this！
正如MDN所述:箭头函数自身没有this。使用了封闭词法范围的this值；箭头函数遵循正常的变量查找规则。因此，当搜索当前作用域中不存在的this时，箭头函数最终会从其封闭作用域中找到this。
例子中，封闭的范围是window对象。调用oneUp()会要求程序增加window对象中lives的值。这样的值不存在，所以代码不起作用。
相反，应该使用传统的函数语法，它将函数的this绑定到调用该函数的特定对象上：
const mario = {
lives: 3,
oneUp: function() {
this.lives ;
}
};
动态上下文
最后一个例子：
const button = document.querySelector(#darkMode);
button.addEventListener('click', () => {
this.classList.toggle('on');
});
到目前为止，你可能已经意识到这个代码无效及其原因。没错，这又和this有关。
箭头函数语法在函数声明时静态地绑定上下文，这与使用事件处理程序或事件监听器时试图实现的相反，它们本质上是动态的。
当通过事件处理程序或监听器操作DOM时，触发的事件指向属于目标元素的this。
对于全局执行上下文中定义的箭头函数，this将指向window。因此，上面的代码中，this.classList将被认为是window.classList，从而导致TypeError。
图源：unsplash
从这几个简单的例子中可以发现，JavaScript中关于this的内容值得研究，这也许会加深你对何时使用或不使用箭头函数的理解。
留言点赞关注
我们一起分享AI学习与发展的干货
如转载，请后台留言，遵守转载规范
