箭头函数

基本语法

(param1, param2, …, paramN) => { 表达式}
(param1, param2, …, paramN) => 表达式
//相当于：(param1, param2, …, paramN) =>{ return 表达式; }

// 当只有一个参数时，圆括号是可选的：
(singleParam) => { 表达式}
singleParam => { 表达式}

// 没有参数的函数应该写成一对圆括号。
() => { 表达式}

更短的表达式

    var elements = [
          'Hydrogen',
          'Helium',
          'Lithium',
          'Beryllium'
        ];

    elements.map(function(element) {
          return element.length;
    }); // 返回数组：[8, 6, 7, 9]

    // 上面的普通函数可以改写成如下的箭头函数
    elements.map((element) => {
          return element.length;
    }); // [8, 6, 7, 9]

    // 当箭头函数只有一个参数时，可以省略参数的圆括号
    elements.map(element => {
         return element.length;
    }); // [8, 6, 7, 9]

    // 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
    elements.map(element => element.length); // [8, 6, 7, 9]

没有单独的this

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值：

如果是该函数是一个构造函数，this指针指向一个新的对象
在严格模式下的函数调用下，this指向undefined

如果是该函数是一个对象的方法，则它的this指针指向这个对象

     function Person() {
            // Person() 构造函数定义 `this`作为它自己的实例.
            this.age = 0;
            setInterval(function growUp() {
             // 在非严格模式, growUp()函数定义 `this`作为全局对象,
             // 与在 Person()构造函数中定义的 `this`并不相同.
                this.age++; // 这里的this.age为undefined
            }, 1000);
    }
    var p = new Person();

这时候，我们通过将this值分配给封闭的变量，可以解决this问题。

    function Person() {
        var that = this;
        that.age = 0;
    setInterval(function growUp() {
    // 回调引用的是`that`变量, 其值是预期的对象.
        that.age++;
      }, 1000);
    }

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

    function Person(){
        this.age = 0;
        setInterval(() => {
            this.age++; // |this| 正确地指向 p 实例
      }, 1000);
    }
    var p = new Person();

通过 call 或 apply 调用

由于箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this），他们的第一个参数会被忽略。（这种现象对于bind方法同样成立）

    var adder = {
        base: 1,

        add: function(a) {
            console.log(arguments)
            var f = v => v + this.base;
            return f(a);
        },

        addThruCall: function(a) {
            console.log(arguments)
            var f = v => v + this.base;
            var b = {
                base: 2
            };

            return f.call(b, a);
            // return f.apply(b, [a]);
            // return f.bind(b, a)();
        }
    };

    console.log(adder.add(1,2)); // 输出 2
    console.log(adder.addThruCall(1)); // 仍然输出 2

简单说下call、apply、bind三者的用法和区别

它们在功能上是没有区别的，都是改变this的指向，它们的区别主要是在于方法的实现形式和参数传递上的不同。call和apply方法都是在调用之后立即执行的。而bind调用之后是返回原函数，需要再调用一次才行

      var p = {
        a: 1,
        add: function(b) {
            console.log(this.a + b);
        }
      }
    var p2 = {
        a: 2
    }
    p.add(2) //3
    p.add.call(p2, 2);//4

    p.add.apply(p2, [2]);//4

    p.add.bind(p2, 2)();//4

区别：
①apply、call、bind的第一个参数都是this要指向的对象，但apply只有两个参数，第二个参数为一个数组，需要传输的参数值须全部放到数组中。而call、bind一样，参数用逗号分开。
②apply、call返回的的是一个值，而bind返回的是一个函数，需要执行这个函数才会得到值。

箭头函数不能用作构造器，和 new一起用会抛出错误。

    var Foo = () => {};
    var foo = new Foo(); // TypeError: Foo is not a constructor

箭头函数没有prototype属性。

    var Foo = () => {};
    console.log(Foo.prototype); // undefined

箭头函数不绑定Arguments 对象

    function foo(n) {
        return  arguments[0] + n
    }
    var f = () => arguments[0] + n; 

   console.log(foo(1)) ; // 2
   console.log(foo(2,1)) ; // 4

   console.log(f(1)) ; // 2//Uncaught ReferenceError: arguments is not defined

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。

    yield 关键字：
    只能在Generator函数内部使用
    运行.next()，遇到一个yield命令，就暂停
    .next()的返回值表示一个状态{value,done}
    再运行.next()，从之前遇到的那个yield [表达式]处（后）继续恢复运行
    当.next()传参的时候，yield [表达式]整个被替换为传入的参数。

函数体

箭头函数可以有一个“简写体”或常见的“块体”。
在一个简写体中，只需要一个表达式，并附加一个隐式的返回值。在块体中，必须使用明确的return语句。

    var func = x => x * x;
    // 简写函数 省略return
    
    var func = (x, y) => { return x + y; };
    //常规编写 明确的返回值

返回对象字面量

    记住用params => {object:literal}这种简单的语法返回对象字面量是行不通的。
    var func = () => { foo: 1 };
    // Calling func() returns undefined!
    console.log(func()) //（调用返回undefined）

    var func = () => { foo: function() {} };
    // SyntaxError: function statement requires a name（函数语句需要一个函数名）
    这是因为花括号（{} ）里面的代码被解析为一系列语句（即 foo 被认为是一个标签，而非对象字面量的组成部分）。

    所以，记得用圆括号把对象字面量包起来：

    var func = () => ({foo: 1});

换行

箭头函数在参数和箭头之间不能换行

var func = ()
       => 1;
// 报错
但是，可以通过在 ‘=>’ 之后换行，或者用 ‘( )’、'{ }'来实现换行，如下：

var func = (a, b, c) =>
  1;

var func = (a, b, c) => (
  1
);

var func = (a, b, c) => {
  return 1
};

var func = (
  a,
  b,
  c
) => 1;

// 不会有语法错误

箭头函数也可以使用条件（三元）运算符

var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

总结：

1.箭头函数this为父作用域的this，不是调用时的this
2.箭头函数不能作为构造函数，不能使用new
3.箭头函数没有arguments
4.箭头函数通过call和apply调用，不会改变this指向，只会传入参数
5.箭头函数没有原型属性
6.箭头函数不能作为Generator函数，不能使用yield关键字
7.箭头函数返回对象时，要加一个小括号

带你了解ES6解箭头函数