javascript箭头函数注意细节(译)
发布在极乐科技2016年9月5日view:993HTML5css3BrettBat
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

【个人建站,极乐问答平台——http://www.dreawer.com/home.html,欢迎一起交流学习!为技术猿提供的免费解决问题的平台】

ES6(ES2015)带来了箭头函数,箭头函数带来了些许问题。

关于{}

第一个问题是关于箭头函数与{}。 箭头函数,乍一看,用法似乎很简单,比如像下面这样用来给数组每一项乘以2:

1 const numbers = [1, 2, 3];
2 const result = numbers.map(n => n * 2);
3 // produces [2,4,6]

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

1 const numbers = [1, 2, 3];
2 const result = numbers.map(n => { value: n });
3 // produces [undefined], [undefined], [undefined]

什么原因造成的呢?

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

1 const result = numbers.map(n => ({ value: n }));
2 // [{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继承自外围作用域的值,因此我们不能改变其指向。

(本文译自:The Troubles with JavaScript Arrow Functions By K. Scott Allen , Thursday, September 1, 2016 )

文章系转载,侵删!

【个人建站,极乐问答平台——http://www.dreawer.com/home.html,欢迎一起交流学习!为技术猿提供的免费解决问题的平台】

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
极乐科技

面向IT技术人员和技术供应商服务的平台网站,我们的口号是:让技术变得更简单! 极乐网

我的收藏