javascript ES6中箭头函数注意细节小结

前端之家收集整理的这篇文章主要介绍了javascript ES6中箭头函数注意细节小结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

ES6标准新增了一种新的函数:Arrow Function(箭头函数)。

为什么叫Arrow Function?因为它的定义用的就是一个箭头:

x * x

上面的箭头函数相当于:

但箭头函数带来了些许问题,下面来一起看看吧。

关于{}

第一个问题是关于箭头函数与{}。

箭头函数,乍一看,用法似乎很简单,比如像下面这样用来给数组每一项乘以2:

n * 2); // produces [2,4,6]

但是,如果使用不当,可能会引发意想不到的问题。比如下面,尝试为数组中每一项去产生对象字面量,看上去挺简单的map操作,还是引发了意外。

{ value: n }); // produces [undefined],[undefined],[undefined]

什么原因造成的呢?

稍微分析可知,引起上面问题在于,箭头函数内部包裹在花括号之间的代码,被认为是一段独立的代码块而不是对象字面量,因此其单独执行,显然得到的结果就是一个全为undefined的数组。 于是,在这种情况下,其中的代码就必须有明确的返回语句或者用圆括号()包括对象字面量。

({ value: n })); // [{value: 1},{value:2},{value:3}]

关于this

第二个问题是关于箭头函数与this。

使用箭头函数,你可以像下面这样写代码而不用额外在局部作用域中去暂存this:

{ this.sum += n; }); } }; adder.add([1,3]); // adder.sum === 6

然而,很多时候你可能会自以为是的在不经意间写错。正如下面的代码所示,this并不指向”adder”对象,而指向”adder”对象所在的作用域:

{ // scope here is important numbers.forEach(n => { this.sum += n; }); }

};

adder.add([1,3]);
// adder.sum === 0

最后请记住一点:箭头函数中的this继承自外围作用域的值,因此我们不能改变其指向。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

猜你在找的JavaScript相关文章