javascript ES6中箭头函数注意细节小结
前言
ES6标准新增了一种新的函数：ArrowFunction（箭头函数）。
为什么叫ArrowFunction？因为它的定义用的就是一个箭头：
x=>x*x
上面的箭头函数相当于：
function(x){
returnx*x;
}
但箭头函数带来了些许问题，下面来一起看看吧。
关于{}
第一个问题是关于箭头函数与{}。
箭头函数，乍一看，用法似乎很简单，比如像下面这样用来给数组每一项乘以2：
constnumbers=[1,2,3]; constresult=numbers.map(n=>n*2); //produces[2,4,6]
但是，如果使用不当，可能会引发意想不到的问题。比如下面，尝试为数组中每一项去产生对象字面量，看上去挺简单的map操作，还是引发了意外。
constnumbers=[1,2,3];
constresult=numbers.map(n=>{value:n});
//produces[undefined],[undefined],[undefined]
什么原因造成的呢？
稍微分析可知，引起上面问题在于，箭头函数内部包裹在花括号之间的代码，被认为是一段独立的代码块而不是对象字面量，因此其单独执行，显然得到的结果就是一个全为undefined的数组。
于是，在这种情况下，其中的代码就必须有明确的返回语句或者用圆括号()包括对象字面量。
constresult=numbers.map(n=>({value:n}));
//[{value:1},{value:2},{value:3}]
关于this
第二个问题是关于箭头函数与this。
使用箭头函数，你可以像下面这样写代码而不用额外在局部作用域中去暂存this：
constadder={
sum:0,
add(numbers){
numbers.forEach(n=>{
this.sum+=n;
});
}
};
adder.add([1,2,3]);
//adder.sum===6
然而，很多时候你可能会自以为是的在不经意间写错。正如下面的代码所示，this并不指向”adder”对象，而指向”adder”对象所在的作用域：
constadder={
sum:0,
add:(numbers)=>{//scopehereisimportant
numbers.forEach(n=>{
this.sum+=n;
});
}
};
adder.add([1,2,3]);
//adder.sum===0
最后请记住一点：箭头函数中的this继承自外围作用域的值，因此我们不能改变其指向。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。