ES6: 箭头函数

1. 语法

按常规语法定义函数：

function funcName(params) {

    return params + 2;

}

funcName(2);

该函数改成箭头函数:

var funcName = params => params + 2;

funcName(2);

我们来深入了解箭头函数的语法：

parameters => {

    statements;

};

如果没有参数，那么可以进一步简化：

() => {

    statements;

};

如果只有一个参数，可以省略括号:

parameters => {

    statements;

};

如果函数体只有一句返回值，可以省略大括号和return

parameters => true;

等价于：

parameters => { return true;};

2. 箭头函数和普通函数的区别

(1) 没有this

箭头函数没有this，需要通过查找作用域链来确定this的值。因此如果箭头函数被非箭头函数包裹，this绑定的就是最近一层非箭头函数的this.

下面的例子是经常遇到的：

var obj = {

    birth: 1990,

    getAge: function () {

        var b = this.birth; // 1990

        var fn = function () {

　　　　　　　console.log(this); // this指向的是window或者undefined

            return new Date().getFullYear() - this.birth;

        };

        return fn();

    }

};

obj.getAge(); //NaN

上面的输出结果是NaN，因为fn是函数表达式，会有一个this指向它，不能拿到外层函数的this，而fn没有birth属性，所以this.birth是undefined，因此输出结果是NaN。

要修复这个问题，可以把外层的this保存起来，然后再内层函数使用：

var obj = {

    birth: 1990,

    getAge: function () {

        console.log(this.birth);

var self = this;

        var fn = function () {

            return new Date().getFullYear() - self.birth;

        };

        return fn();

    }

};

obj.getAge(); // 29

或者通过call或者apply将this传到内部函数中：

var obj = {

    birth: 1990,

    getAge: function () {

        var b = this.birth; // 1990

        var fn = function () {

            return new Date().getFullYear() - this.birth;

        };

        return fn.apply(this); // 或者：return fn.call(this);

    }

};

obj.getAge(); // 29

 现在可以通过箭头函数的方法解决了：

var obj = {

    birth: 1990,

    getAge: function () {

        var b = this.birth; // 1990

        var fn = () => new Date().getFullYear() - this.birth; // this.birth仍是1990，因为this还是外部函数的this

        return fn();

    }

};

obj.getAge(); // 29

但是如果把外部函数也改成箭头函数，结果又是不一样的了:

var obj = {

    birth: 1990,

    getAge:  (year) => {

        var b = this.birth; // 1990

        var fn = () => {

　　console.log(this); // window

    return new Date().getFullYear() - this.birth; // this.birth是undefined

　　　　  }

        return fn();

    }

};

obj.getAge(); // NaN

因为外部函数也是箭头函数，所以不会有this, 就会按照作用域链继续往上寻找，这段代码的往上寻找，找到的this是window；

所以箭头函数this指向的关键是找到最近的非箭头函数的this

(2) 没有arguments

箭头函数没有自己的arguamnets对象， 但是箭头函数可以访问外围函数的arguments对象;看下面两个例子：

varFoo = () => {console.log(arguments)};

Foo(); // ReferenceError: arguments is not defined

function myFunc(age) {

var Foo = () => {console.log(arguments)};

return Foo();

}

myFunc(12);

代码执行结果：

第一段代码：输出箭头函数的argument报错，说明箭头函数是没有arguments对象的

第二段代码：在箭头函数中输出的arguments对象信息name为myFunc, 说明箭头函数中的是外围函数的arguments, 而第一段代码没有外围函数，所以会报错。

(3) 不能通过new关键字调用

js的函数有两个内部方法：[[call]]和[[Construct]]

当通过new调用构造函数时，执行[[Construct]]方法，创建一个实例对象，然后再执行函数体，将this绑定到实例上。当直接调用的时候，执行[[call]]方法，直接执行函数体。

箭头函数并没有[[Construct]]方法，不能被用作构造函数，因此通过new的方式调用，会报错。

varFun = () => {};varfun =newFun();// typeError: Fun is not a constructor

(4) 没有原型

由于不能使用new调用箭头函数，所以也没有构建原型的需求，于是箭头函数也不存在prototype这个属性。

varFun = () => {};

console.log(Fun.prototype); // undefined

(5) 没有super

箭头函数没有原型，所以不能通过super来访问原型的属性，所以箭头函数是没有super的，super的值由最近一层非箭头函数决定。