JavaScript 2.7 箭头函数

一、基本语法

a、(param1, param2, …, paramN) => { statements } 

b、(param1, param2, …, paramN) => expression

示例
var y = x => x + 1
//当只有一个参数时圆括号可以省略，上面的方法等同于var y = (x) => x + 1;
var z = () => x + 1
//当没有参数时，圆括号不可省略

//当返回包含多行代码时，{}不可省略
var s = (x)=>{
        if(x==1)
           return true 
}
//当返回是一个对象时，需要用圆括号包裹

var w = (x)=>({id:x,name:'test'})

c、支持剩余参数和默认参数
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { 
statements }

示例

var a = (b,c=1) => b+c
var sum = 0;
var d = (h,j,...i) => { for(var x in i){sum += parseInt(i[x]);}           
        return j+h+sum}
//..i剩余参数会被当成一个数组

d、参数解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

二、箭头函数的使用

a、更短的函数
var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(function(element) { 
  return element.length; 
}); // 返回数组：[8, 6, 7, 9]
//上述方法可以简化成如下
elements.map(element => element.length); // [8, 6, 7, 9]
// 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构
// 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，
// 可以替换成任意合法的变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

b、没有单独的this

1、箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
示例
function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // this 正确地指向 p 实例
  }, 1000);
}

var p = new Person();

2、由于 箭头函数没有自己的this指针，通过 call() 或 apply() 方法
调用一个函数时，只能传递参数，不能绑定this，他们的第一个参数会被忽略，
这种现象对于bind方法同样成立。
var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

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

3、箭头函数不绑定Arguments 对象。因此，在本示例中，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 

4、在大多数情况下，使用剩余参数是相较使用arguments对象的更好选择。
function foo(arg) { 
  var f = (...args) => args[0]; 
  return f(arg); 
}
foo(1); // 1

function foo(arg1,arg2) { 
    var f = (...args) => args[1]; 
    return f(arg1,arg2); 
} 
foo(1,2);  //2

5、箭头函数没有绑定this，在严格模式下，箭头函数this指向的是Window{...}
示例
'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); 
// undefined, Window{...}
obj.c(); 
// 10, Object {...}

6、箭头函数不能用作构造器，和new一起使用会报错
var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

7、箭头函数没有prototype属性
var Foo = () => {};
console.log(Foo.prototype); // undefined

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

9、换行
箭头函数在参数和箭头之间不能换行。
var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'

可以通过在 ‘=>’ 之后换行，或者用 ‘( )’、'{ }'来实现换行，如下：
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;

10、箭头函数使用闭包
// 标准的闭包函数
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);

11、箭头函数递归
var fact = (x) => ( x==0 ?  1 : x*fact(x-1) );
fact(5);       // 120