1、前言：

在 ES6 中，箭头函数是其中最有趣也最受欢迎的新增特性。顾名思义，箭头函数是一种使用 (=>) 定义函数的新语法，它与传统的 ES5 函数有些许不同。

这是一个用 ES5 语法编写的函数：

        function add(num){
            return num+10
        }

        add(5);  //15

有了 ES6 的箭头函数后，我们可以用箭头函数这样表示：

        var add = num => num+10
        add(5);  //15

箭头函数的写法短的多！由于隐式返回，我们可以省略花括号和 return 语句。

与常规 ES5 函数相比，了解箭头函数的行为方式非常重要。

2.箭头函数特点：

①语法短、简洁

基本语法如下：

（参数）=> { statements }

当没有参数时，使用一个圆括号代表参数部分

        let f = () => 5;
        f();  //5

当只有一个参数时，可以省略圆括号。

        let f = num => num + 5;
        f(10);  //15

当有多个参数时，在圆括号内定义多个参数用逗号分隔。

        let f = (a,b) => a+b;
        f(1,2);  //3

当箭头函数的代码块部分多余一条语句，就需要使用大括号括起来，并且使用 return 语句。

        // 有大括号，有return语句，返回结果
        let f1 = (a,b) => a+b;
        f1(1,2);  //3

        // 有大括号，无return语句，没有返回值
        let f2 = (a,b) => {a+b};
        f2(1,2);  //undefined

        // 有大括号，有return语句，返回结果
        let f3 = (a,b) => {return a+b};
        f3(1,2);  //undefined

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

        //报错
        var f1 = num => {num:num}

        //不报错
        var f2 = num => ({num:num})

 ②不能通过new关键字调用

箭头函数没有[[Construct]]方法，所以不能被用作构造函数。

③没有原型

由于不可以通过 new 关键字调用，因而没有构建原型的需求，所以箭头函数不存在 prototype 这个属性。

④没有this绑定

在 ES5 函数表达式中，this关键字根据调用它的上下文绑定到不同的值。但是，对于箭头函数，它this是词法绑定的。

        (function(){
            console.log(1)
        })()

或者：

        (function(){
            console.log(1)
        }())

箭头函数当然也可以被用作自执行函数，可以这样写：

        (()=>{
            console.log(1)
        })()

但是，令大多数人想不到的是，下面这种写法会报错：

        (()=>{
            console.log(1)
        }())

那么，为什么会报错呢？

原因是，箭头函数属于 AssignmentExpression 的一种，当 CallExpression 时，要求左边的表达式是 MemberExpression 或其他 CallExpression。

原理就是这样了，具体可参见ECMAScript® 2015 规范

具体可归纳为以下几条：

1、箭头函数是匿名函数，不绑定自己的this,arguments,super,new.target

2、箭头函数会捕获其所在上下文的this值，作为自己的this值，在使用call/apply绑定时，相当于只是传入了参数，对this没有影响

3、箭头函数不绑定arguments，取而代之用rest参数…解决

4、箭头函数当方法使用的时候，没有定义this绑定

5、箭头函数不能作为构造函数，和 new 一起用就会抛出错误

6、箭头函数没有原型属性

7、不能简单返回对象字面量