不能使用箭头函数的6种情况
作者:admin 时间:2022-5-10 15:27:50 浏览:箭头函数的优点很多，相比于常规函数，箭头函数的代码更少更简洁了，并且没有自己的this，这意味着箭头函数不用再需要定义this。
不能使用箭头函数的6种情况
但是箭头函数不是在所有情况下都能取代常规函数。
这里有一些你不应该看箭头函数的情况。
1、对象方法
var cat = {
lives: 9,
jumps: () => {
this.lives--;
}
}当你调用cat.jumps时，lives的数量不会减少。这是因为this没有绑定到任何东西，并且会从其父作用域继承this的值。
我们再看下面一个示例。
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（在网络浏览器中）。
默认情况下window.count是undefined，因为window对象没有count属性。该next()方法将undefined加1，结果NaN。
要解决此问题，可以使用常规函数作为对象字面量的方法，如下所示：
const counter = {
count: 0,
next() {
return ++this.count;
},
current() {
return this.count;
}
};现在，调用该next()方法将按预期返回一个：
console.log(counter.next()); // 1
2、具有动态上下文的回调函数
看看下面的这个事件处理程序：
var button = document.getElementById('press');
button.addEventListener('click', () => {
this.classList.toggle('on');
});如果我们点击按钮，我们会得到一个 TypeError。这是因为this未绑定到按钮，而是绑定到其父范围。
3、原型方法
以下Counter使用prototype模式的对象：
function Counter() {
this.count = 0;
}
Counter.prototype.next = () => {
return this.count;
};
Counter.prototype.current = () => {
return ++this.next;
}这些next()和current()方法中的this值引用全局对象。由于你希望方法中的this值引用Counter对象，因此你需要使用常规函数：
function Counter() {
this.count = 0;
}
Counter.prototype.next = function () {
return this.count;
};
Counter.prototype.current = function () {
return ++this.next;
}4、事件处理程序
假设你有以下输入文本字段：
<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
这意味着this.value事件处理程序中的 总是返回undefined。
箭头函数没有自己的this值。它使用this封闭词法范围的值。在上面的例子中，this在箭头函数里引用了全局对象。
在 Web 浏览器中，全局对象是window，该window对象没有value属性。因此，JavaScript 引擎将 value 属性添加到window对象并将其值设置为undefined.
要解决此问题，你需要改用常规函数，将this值绑定到<input>触发事件的元素。
username.addEventListener('keyup', function () {
input.textContent = 'Hello ' + this.value;
});5、承诺和承诺链
箭头函数使代码更清晰、更直观的另一个地方是管理异步代码。
Promise使管理异步代码变得容易得多。但是，虽然使用 Promise ，仍然需要定义在异步代码或调用完成后运行的函数。
这是箭头函数的理想位置，特别是如果你的结果函数是有状态的，引用对象中的某些内容。
缺点是确保你再次了解this如何工作。例子：
this.doSomethingAsync().then((result) => { this.storeResult(result); });6、当它使你的代码不那么可读时
通过常规函数，人们知道会发生什么。使用箭头函数，可能很难立即解读你正在查看的内容。
总结
本文介绍了6种不应使用箭头函数的情况。通过本文的介绍，你应该知道箭头函数不是任何时候都可以取代常规函数。在编程中我们要选择合适的方法，代码简洁不是编程的唯一需要。
相关文章
标签: 箭头函数
- 站长推荐
