ES6 箭头函数解析ES6 箭头函数箭头函数可以使用 (=>) 来定义函数，并且没有函数名，适用于匿名函数的场景，并

ES6 箭头函数

引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。MDN about Arrow functions

箭头函数可以使用 (=>) 来定义函数，并且没有函数名，适用于匿名函数的场景，并且不能用于构造函数。没有自己的this, arguments, super, new.target

基础语法如下：

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression.  //相当于：(param1, param2, …, paramN) =>{ return expression; }

// 只有一个参数时候，圆括号可以选择
(singleParam) => { statements }
singleParam => { statements }
// 没有参数的函数应该写成一对圆括号
() => { statements }

// 加括号的函数体返回对象字面量表达式：
params => ({foo: bar})
//支持剩余参数和默认参数
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }
//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

箭头函数特点

1: 更短的函数

直接拿MDN的例子看看

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];
// 正常使用匿名函数的方式
elements.map(function(element) {
  return element.length;
}); 
// 改成箭头函数试试
elements.map((element) => {
  return element.length;
}); 
// 简化一下，只有一个参数的时候，不用加括号
elements.map(element => {
 return element.length;
}); 
// 再简化一下， 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length);

我们通过箭头函数的简化语法，层层递进优化，可以体会箭头函数的简洁性。我们推荐使用这种更简洁的语法，但是箭头函数除了简洁还有自己的局限性。我们来看一下：

2: 没有单独的this

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this, 我们分析下MDN提供的例子

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例，指向作用域链的上一层
  }, 1000);
}

var p = new Person();


// Object.defineProperty的箭头函数绑定示例
'use strict';
var obj = {
  a: 10
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this); // 此时this指向当前作用域的上一层，即全局window
    return this.a+10;
   // 代表全局对象 'Window', 因此 'this.a' 返回 'undefined'
  }
});

obj.b; // undefined   "undefined"   Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

3: call, apply, bind调用

由于箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this），他们的第一个参数会被忽略。分析下MDN给的例子

var adder = {
  base : 1,

  add : function(a) {
    var f = v => v + this.base;  // 这里的this指向adder
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;  // 这里的this指向adder
    var b = {
      base : 2
    };

    return f.call(b, a); // 箭头函数忽略第一个参数，即this绑定
  }
};
console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2

4: 不绑定arguments

箭头函数没有自己的arguments

var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1

function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n,即传给foo函数的第一个参数
  return f();
}

foo(1); // 2
foo(2); // 4
foo(3); // 6
foo(3,2);//6

5: 使用箭头函数作为方法

箭头函数表达式对非方法函数是最合适的，但是作为对象的方法会有什么问题呢？我们看下面的例子

'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),  // 箭头函数的this继承作用域链的上一层的this, 就是全局变量例如window
  c: function() {
    console.log( this.i, this)
  }
}
obj.b();
// undefined, Window{...}
obj.c();
// 10, Object {...}

箭头函数作为对象的方法，this 会失去当前对象的绑定。

6：使用 `new` 操作符

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

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

7: 使用`prototype`属性

箭头函数没有prototype属性。

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

8: 使用 `yield` 关键字

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

9: 箭头函数也可以使用闭包

// 标准的闭包函数
function A(){
      var i=0;
      return function b(){
              return (++i);
      };
};

var v=A();
v();    //1
v();    //2


//箭头函数体的闭包（ i=0 是默认参数）
var Add = (i=0) => {return (() => (++i) )};
var v = Add();
v();           //1
v();           //2

//因为仅有一个返回，return 及括号（）也可以省略
var Add = (i=0)=> ()=> (++i);

10: 箭头函数递归

var fact = (x) => ( x==0 ?  1 : x*fact(x-1) );
fact(5);       // 120

ES6 箭头函数解析