什么时候不该使用箭头函数
箭头函数没有自己的 this 值和 arguments 对象。因此，你不应该将它用作事件的回调函数、字面量对象的方法、原型的方法
箭头函数没有自己的 this 值和 arguments 对象。因此，你不应该将它用作事件的回调函数、字面量对象的方法、原型的方法。
如果当你需要在函数使用 arguments 对象时，你也不应该使用箭头函数。在本教程中，您将了解在 ES6 什么时候不该使用箭头函数。
事件处理器
假设您的HTML代码有以下文本输入字段：
<input type="text" name="username" id="username" placeholder="Enter a username">
您希望在用户键入用户名时显示问候消息。下面将在 <div> 元素显示问候消息：
<div id="greeting"></div>用户输入用户名后，您将捕获输入的当前值并将其更新到 <div> 元素：
const greeting = document.querySelector('#greeting');
const username = document.querySelector('#username');
username.addEventListener('keyup', () => {
greeting.textContent = 'Hello ' + this.value;
});但是，当您执行代码时，无论您键入什么，您都会收到以下消息：
Hello undefined这意味着事件回调函数总是返回undefined。
如前所述，箭头函数没有自己的 this 值。它在封闭词法作用域使用 this 值。在上面的例子中，箭头函数的 this 引用全局对象。
在网络浏览器，全局对象是 window。 window 对象没有属性 value 。因此，JavaScript 引擎将 value 属性添加到 window 对象并将其值设置为 undefined。
要解决此问题，您需要改用普通函数。this 值将绑定到触发事件的 <input> 元素。
username.addEventListener('keyup', function () {
input.textContent = 'Hello ' + this.value;
});对象方法
请阅读以下 counter 对象：
const counter = {
count: 0,
next: () => ++this.count,
current: () => this.count
};counter对象有两个方法： current() 和 next()。current() 方法返回当前计数器值，next() 方法返回下一个计数器值。
下面计数器应该展示下一个值是 1：
console.log(counter.next());但是，它返回 NaN。
原因是当你在对象内部使用箭头函数时，它从封闭的词法作用域继承 this 值，在这个例子中是全局作用域。
this.count 在 next() 方法内部相当于 window.count (Web 浏览器)。
默认情况下 window.count 是 undefined。因为 window 对象没有 count 属性。next() 方法在 undefined 的变量上再加 1 ，所以结果是 NaN。
要解决此问题，您可以使用普通函数作为字面量对象的方法，如下所示：
const counter = {
count: 0,
next() {
return ++this.count;
},
current() {
return this.count;
}
};现在，调用 next() 方法将按预期返回 1：
console.log(counter.next()); // 1原型方法
请阅读以下使用 prototype 模式的 Counter 对象：
function Counter() {
this.count = 0;
}
Counter.prototype.next = () => {
return this.count;
};
Counter.prototype.current = () => {
return ++this.next;
}this 值在 next() 和 current() 方法中指向全局对象。由于您希望在这些方法中的 this 值指向 Counter 对象，因此您需要改用普通函数：
function Counter() {
this.count = 0;
}
Counter.prototype.next = function () {
return this.count;
};
Counter.prototype.current = function () {
return ++this.next;
}使用 arguments 参数对象的函数
箭头函数没有 arguments 对象 。因此，如果你有一个函数使用 arguments 对象，你就不能使用箭头函数。
例如，下面的 concat() 函数将不起作用：
const concat = (separator) => {
let args = Array.prototype.slice.call(arguments, 1);
return args.join(separator);
}相反，您可以这样使用普通函数：
function concat(separator) {
let args = Array.prototype.slice.call(arguments, 1);
return args.join(separator);
}结论
- 箭头函数没有自己的
this值。相反，它使用封闭词法作用域的this值。箭头函数也没有arguments对象。 - 避免将箭头函数用于事件回调、字面量对象方法、原型方法和使用
arguments对象的函数。
