【翻译】解读ECMAScript 6箭头函数

原文地址http://www.nczonline.net/blog/2013/09/10/understanding-ecmascript-6-arrow-functions/

箭头函数是ECMAScript 6最受关注的更新内容之一。它引入了一种用「箭头」(=>)来定义函数的新语法,它…它碉堡了~。箭头函数与传统的JavaScript函数主要区别在于以下几点:

  • 对 this 的关联。函数内置 this 的值,取决于箭头函数在哪儿定义,而非箭头函数执行的上下文环境。

  • new 不可用。箭头函数不能使用 new 关键字来实例化对象,不然会报错。

  • this 不可变。函数内置 this 不可变,在函数体内整个执行环境中为常量。

  • 没有arguments对象。更不能通过arguments对象访问传入参数。只能使用显式命名或其他ES6新特性来完成。

这些差异的存在是有理可循的。首先,对this的绑定是JavaScript错误的常见来源之一。容易丢失函数内置数值,或得出意外结果。其次,将箭头函数限制为使用固定this引用,有利于JavaScript引擎优化处理。

语法

箭头函数的语法很简单,定义自变量,然后是箭头和函数主体。自变量和主题因使用不同可以采用更简洁的格式。下面这个例子就是采用传一个参数和返回一个值的箭头函数。

1
2
3
4
5
6
var reflect = value => value;
// 等同于:
 
var reflect = function(value) {
    return value;
};

可以看出,传一个参数就直接写就好了,不用加小括号。箭头指向函数主体,不过函数主体也只是简单的一条返回语句,所以也不用加大括号。函数构造完毕赋给reflect加以引用。
若需传入多个参数,则应加上小括号。例如:

1
2
3
4
5
var sum = (num1, num2) => num1 + num2;
// 等同于:
var sum = function(num1, num2) {
    return num1 + num2;
 };

sum()方法为两参数相加并回传结果。跟前一个例子的唯一区别是传入了两个参数,所以要用小括号括起来。它与传统函数一样,括号内由逗号将传入参数分开。同样,如果该函数不需要传入参数,那也要以空括号来代替。

1
2
3
4
5
var sum = () => 1 + 2;
// 等同于:
var sum = function() {
    return 1 + 2;