ES6 箭头函数语法大全

箭头函数

ES6 新增箭头函数的语法比普通函数表达式更简洁，它没有自己的 this，arguments，super，new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

箭头函数有几个使用注意点：
1.函数体内的 this 指向该函数定义时当前作用域中的 this。
2.不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
3.不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
4.不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。
浏览器支持：

语法：

1.只有一个参数时，圆括号是可选的
param => { ... };
(param) => { ... };

2.没有参数或两个及以上参数，必须使用圆括号
() => { ... }; 
(param1, param2, …) => { ... }; 

3.箭头右边，代码块只有一条语句时可以省略 {}，且默认 return 这条语句
() => ... ;
() => { ... };

4.箭头右边，大于一条语句时必须使用 {}，不会默认 return
() => { ...; ...; ... };

5.箭头右边，一条语句返回一个对象数据时，必须使用圆括号
() => ({ a:2 });

示例：

//箭头函数只有一条语句时默认 return 这条语句。
var f = v => v;      // 等同于 var f = function (v) { return v };

//如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
var f = () => 5;             // 等同于 var f = function () { return 5 };
var sum = (a, b) => a + b;   // 等同于 var sum = function(a, b) { return a + b };

//如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法
let fn = () => void a++;

//如果箭头函数的代码块部分多于一条语句，需使用大括号，如果要返回则手动添加 return。
var sum = (num1, num2) => { 
  num1++;
  return num1 + num2; 
}

//由于大括号被解释为代码块，如果直接返回一个对象数据，必须在对象外面加上括号，否则会报错。
let getTempItem = id => { id: id, name: "Temp" };        // 报错
let getTempItem = id => ({ id: id, name: "Temp" });      // 不报错

//下面是一种特殊情况，虽然可以运行，但会得到错误的结果。
let foo = () => { a: 1 };       //把 a:1 当语句执行了,没有返回结果
foo()                           // undefined

//箭头函数可以与变量解构结合使用。
const full = ({ first, last }) => first + ' ' + last;
  /*等同于
    function full(person) {
      return person.first + ' ' + person.last;
    }
  */

//箭头函数的一个用处是简化回调函数。
[1,2,3].map(function (x) {   // 正常函数写法
  return x * x;
});
[1,2,3].map(x => x * x);     // 箭头函数写法

//下面是 rest 参数与箭头函数结合的例子。
const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5);            // [1,2,3,4,5]

const headAndTail = (head, ...tail) => [head, tail];
headAndTail(1, 2, 3, 4, 5);        // [1,[2,3,4,5]]

箭头函数中的 this 始终指向该函数定义时所在的作用域中的 this。

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

//普通函数谁调用,this指谁,因为window.setTimeout(),所以 this = window
setTimeout(function(){ console.log(this === window) },1)    //true

//箭头函数中的 this 始终指向该函数定义时所在的作用域中的 this
setTimeout(() => console.log(this === window),1)            //true
var obj = { a:2 };
function run() {
  var _this = this;
  console.log(_this === obj);                                //true
  setTimeout(() => console.log( this === _this), 0);         //true  箭头函数
  setTimeout(function(){ console.log(this === _this) }, 0);  //false 普通函数
  setTimeout(function(){ console.log(this === window) }, 0); //true  普通函数
}
run.call(obj);    //将函数fool内部作用域中的this指向obj   

//箭头函数嵌套中的 this 
function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id);
      };
    };
  };
}
var f = foo.call({id: 1});
f.call({id: 2})()();            // id: 1
f().call({id: 3})();            // id: 1
f()().call({id: 4});            // id: 1

在箭头函数之中变量 arguments、super、new.target是不存在的，指向外层函数中的对应变量。

//下面代码中，箭头函数内部的变量arguments，其实是函数foo的arguments变量。
function foo() {
  setTimeout(() => {
    console.log(arguments); 
  }, 100);
}
foo(2, 4, 6, 8);     //[2, 4, 6, 8]

由于箭头函数没有自己的this，不能用 call()、apply()、bind()这些方法去改变this的指向。

//下面代码中，bind方法无效，内部的this指向外部的this。
(function() {
  return [
    (() => this.x).bind({ x: 'inner' })()
  ];
}).call({ x: 'outer' });     //'outer' 

由于箭头函数使得this从“动态”变成“静态”，下面两个场合不应该使用箭头函数。

//1.第一个场合是定义函数的方法，且该方法内部包括this。
const cat = {
  lives: 9,
  jumps: () => {     //错误！！，不应用箭头函数
    this.lives--;
  }
}

//2.第二个场合是需要动态this的时候，也不应使用箭头函数。
var button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');    //错误！！，这个 this 是 window
});

箭头函数还有一个功能，就是可以很方便地改写 λ 演算。

// λ演算的写法
fix = λf.(λx.f(λv.x(x)(v)))(λx.f(λv.x(x)(v)))

// ES6的写法
var fix = f => (x => f(v => x(x)(v)))
               (x => f(v => x(x)(v)));
/*
上面两种写法，几乎是一一对应的。由于 λ 演算对于计算机科学非常重要，
这使得我们可以用 ES6 作为替代工具，探索计算机科学。
*/

箭头函数其它注意点

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

var run = ()       
           => 1;     //报错！！！

但是，可以通过在 ‘=>’ 之后换行，或者用 ‘( )’、’{ }'来实现换行。

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

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

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

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

箭头函数具有与常规函数不同的特殊运算符优先级解析规则。

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      // 报错！无效的箭头函数参数

callback = callback || (() => {});    // ok