javascript箭头函数注意细节(译)

发表于

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

关于{}

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

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

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

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

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

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

关于this

第二个问题是关于箭头函数与this。
使用箭头函数，你可以像下面这样写代码而不用额外在局部作用域中去暂存this：

1
2
3
4
5
6
7
8
9
10
const adder = {
       sum: 0,
       add(numbers) {
           numbers.forEach(n => {
               this.sum += n;
           });
       }
   };
   adder.add([1, 2, 3]);
   // adder.sum === 6

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

1
2
3
4
5
6
7
8
9
10
11
12
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 )

money☜☜☜ wechat 『『『 reward 点击扫码打赏 ~~~ ^_^ 』』』alipay ☞☞☞ money