javascript ES6中箭头函数注意细节小结
更新时间：2017年02月17日 08:39:29 作者：xishiyi7
这篇文章主要给大家总结了关于javascript ES6中箭头函数注意细节的相关资料，文中介绍的比较详细，需要的朋友可以参考借鉴，下面来一起看看吧。
前言
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。
为什么叫Arrow Function？因为它的定义用的就是一个箭头：
x => x * x
上面的箭头函数相当于：
function (x) {
return x * x;
}
但箭头函数带来了些许问题，下面来一起看看吧。
关于{}
第一个问题是关于箭头函数与{}。
箭头函数，乍一看，用法似乎很简单，比如像下面这样用来给数组每一项乘以2：
const numbers = [1, 2, 3]; const result = numbers.map(n => n * 2); // produces [2,4,6]
但是，如果使用不当，可能会引发意想不到的问题。比如下面，尝试为数组中每一项去产生对象字面量，看上去挺简单的map操作，还是引发了意外。
const numbers = [1, 2, 3];
const result = numbers.map(n => { value: n });
// produces [undefined], [undefined], [undefined]
什么原因造成的呢？
稍微分析可知，引起上面问题在于，箭头函数内部包裹在花括号之间的代码，被认为是一段独立的代码块而不是对象字面量，因此其单独执行，显然得到的结果就是一个全为undefined的数组。
于是，在这种情况下，其中的代码就必须有明确的返回语句或者用圆括号()包括对象字面量。
const result = numbers.map(n => ({ value: n }));
// [{value: 1}, {value:2}, {value:3}]
关于this
第二个问题是关于箭头函数与this。
使用箭头函数，你可以像下面这样写代码而不用额外在局部作用域中去暂存this：
const adder = {
sum: 0,
add(numbers) {
numbers.forEach(n => {
this.sum += n;
});
}
};
adder.add([1, 2, 3]);
// adder.sum === 6
然而，很多时候你可能会自以为是的在不经意间写错。正如下面的代码所示，this并不指向”adder”对象，而指向”adder”对象所在的作用域：
const adder = {
sum: 0,
add: (numbers) => { // scope here is important
numbers.forEach(n => {
this.sum += n;
});
}
};
adder.add([1, 2, 3]);
// adder.sum === 0
最后请记住一点：箭头函数中的this继承自外围作用域的值，因此我们不能改变其指向。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
这篇文章主要为大家详细介绍了uni-app实现获取验证码倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了file控件选择上传文件确定后触发了什么js事件,需要的朋友可以参考下2014-03-03
微信浏览器内置了javascript私有对象WeixinJSBridge，可以实现发送给朋友、分享到朋友圈、分享到微博等功能，本篇文章给大家介绍基于js实现微信发送给朋友如何分享到朋友圈、微博，感兴趣的朋友一起学习吧2015-11-11
这篇文章主要介绍了javascript trie单词查找树的示例，详细的介绍了trie的概念和实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
下面小编就为大家带来一篇浅谈JS的基础类型与引用类型。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
如果你有玩过《王者荣耀》、《阴阳师》 等手游，一定注意到过它的启动动画、皮肤立绘卡片等场景，经常采用静态底图加局部液态流动效果的简单动画，本文将利用JavaScript实现这一效果，需要的可以参考一下2022-08-08
这篇文章主要介绍Javascript实现二级下拉菜单的具体过程,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了JavaScript面向对象核心知识与概念,整理总结了JavaScript面向对象程序设计中基本概念、原理与操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要为大家详细介绍了JS实现页面数据懒加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
下面小编就为大家带来一篇js 实现获取name 相同的页面元素并循环遍历的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
最新评论