箭頭函式

借鑑於網上的內容

語法

基礎語法

1、當只有一個引數的時候，圓括號可以省略

param1 => {statements}

2、當無引數時，用圓括號代替

() => {statements}

高階語法

1、加括號的函式體返回物件字面量表示式：

params => ({foo:bar})

2、支援剩餘引數和預設引數

3、支援引數列表解析

let f = ([a,b] = [1,2],{x:c} = {x:a+b}) => a+b+c;
f();

描述

1、更短的函式

當箭頭函式只有一個return時，可以省略關鍵字’return’和方法的花括號

2、沒有單獨的this

1、箭頭函式之前，每一個新函式根據它是被如何呼叫的來定義這個函式的this值：

如果該函式是一個建構函式，this指向一個新的物件

在嚴格模式的函式呼叫下，this指向undefined

如果該函式是一個物件的方法，則它的this指標指向這個物件

還有其它的等等

2、箭頭函式不會建立自己的this,它會從自己作用鏈的上一層繼承this

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

var p = new Person();
//此時兩個this的指向一樣
//箭頭函式作用鏈的上一層就是Person()

3、在箭頭函式中，鑑於this是語法層面上的，因此嚴格模式中與this相關的規則都將被忽略，其它的規則不變

4、不能通過call apply bind來改變this的指向。由於箭頭函式沒有自己的this指標，通過call()或apply()以及bind()方法呼叫一個函式時，只能傳遞引數(不能繫結this)，他們的第一個引數會被忽略

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);//此時的this指向並沒有改變為b,依舊指向作用鏈上一層adder()
  }
};

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

3、不繫結argumnets

箭頭函式不繫結arguments物件

ar 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、使用箭頭函式作為方法

箭頭函式對於非方法函式是非常合適的

'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 {...}

箭頭函式沒有定義this繫結

'use strict';
var obj = {
  a: 10
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a+10; 
   // 代表全域性物件 'Window', 因此 'this.a' 返回 'undefined'
  }
});

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

5、使用new操作符

箭頭函式不能用作構造器，和new使用會丟擲錯誤

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

6、使用prototype屬性

箭頭函式沒有prototype屬性（返回物件原型的引用）

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

7、使用yield關鍵字

yield 關鍵字通常不能在箭頭函式中使用（除非是巢狀在允許使用的函式內）。因此，箭頭函式不能用作函式生成器。

函式體

箭頭函式可以有一個“簡寫體”或常見的“塊體”。

在一個簡寫體中，只需要一個表示式，並附加一個隱式的返回值。
在塊體中，必須使用明確的return語句。

var func = x => x * x;                  
// 簡寫函式 省略return

var func = (x, y) => { return x + y; }; 
//常規編寫 明確的返回值

返回物件字面量

返回物件字面量時，要記得把物件字面量用（）給包起來

var func = () => { foo: 1 };               
// Calling func() returns undefined!

var func = () => { foo: function() {} };   
// SyntaxError: function statement requires a name

因為花括號的程式碼會被解析成一系列的語句（即foo會被解析成一個標籤，而非物件字面量的組成部分）

換行

1、箭頭函式在引數和箭頭之間不能換行

解析順序

箭頭函式具有與常規函式不同的運算子優先順序規則

let callback;

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

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

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

更多示例

// 空的箭頭函式返回 undefined
let empty = () => {};

(() => 'foobar')(); 
// Returns "foobar"
// (這是一個立即執行函式表示式,可參閱 'IIFE'術語表) 


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

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

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);  
// 66

var even = arr.filter(v => v % 2 == 0); 
// [6, 0, 18]

var double = arr.map(v => v * 2);       
// [10, 12, 26, 0, 2, 36, 46]

// 更簡明的promise鏈
promise.then(a => {
  // ...
}).then(b => {
  // ...
});

// 無引數箭頭函式在視覺上容易分析
setTimeout( () => {
  console.log('I happen sooner');
  setTimeout( () => {
    // deeper code
    console.log('I happen later');
  }, 1);
}, 1);

箭頭函式內定義的變數及其作用域

// 常規寫法
var greeting = () => {let now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting();          //"Good day."
console.log(now);    // ReferenceError: now is not defined 標準的let作用域

// 引數括號內定義的變數是區域性變數（預設引數）
var greeting = (now=new Date()) => "Good" + (now.getHours() > 17 ? " evening." : " day.");
greeting();          //"Good day."
console.log(now);    // ReferenceError: now is not defined

// 對比：函式體內{}不使用var定義的變數是全域性變數
var greeting = () => {now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting();           //"Good day."
console.log(now);     // Fri Dec 22 2017 10:01:00 GMT+0800 (中國標準時間)

// 對比：函式體內{} 用var定義的變數是區域性變數
var greeting = () => {var now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting(); //"Good day."
console.log(now);    // ReferenceError: now is not defined

箭頭函式可使用閉包

// 標準的閉包函式
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);

箭頭函式遞迴

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