这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要给大家总结了关于 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 继承自外围作用域的值,因此我们不能改变其指向。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0524/327563.html