摘要：箭頭函數(shù)本文字符數(shù)，閱讀時間約分鐘左右。箭頭函數(shù)等于說，只保留了函數(shù)的參數(shù)和返回。箭頭函數(shù)體內(nèi)的，繼承的是外層代碼塊的。所以，不用用箭頭函數(shù)聲明對象的方法。不可以使用命令因此箭頭函數(shù)不能用作函數(shù)。

【01】ES6箭頭函數(shù)

本文字符數(shù)4300+，閱讀時間約8分鐘左右。

等于說，只保留了函數(shù)的參數(shù)和返回。省略function和return。

寫法：

(形參) => {statement;}

=> 等同于return。

01、參數(shù)：

01、當(dāng)只有一個參數(shù)時，可以省略參數(shù)外面的圓括號()?？梢允÷越Y(jié)尾的分號。
簡化為 Identifier => Expression
02、當(dāng)有多個參數(shù)，或沒有參數(shù)，或 Rest 參數(shù)和參數(shù)默認(rèn)值，或解構(gòu)參數(shù)的函數(shù)，都需要用圓括號將參數(shù)括起來。(記住第一個情況就好了)
03、可以使用 rest 參數(shù)和參數(shù)默認(rèn)值。

02、statement：語句。

語句只有一個時，可以省略外層的花括號{}。

03、可以鏈?zhǔn)綄懠^函數(shù)。

比如(x)=>(y)=>(x+y)

04、注意，(形參)和箭頭=>必須寫在同一行，否則報錯。

const fn = x
=> x * 2 // SyntaxError
const fn = (x, y) //SyntaxError
=> {
    return x * y
}

正確的寫法應(yīng)該像這樣：

const fn = (x, y) => {
    return x * y
}

01、箭頭函數(shù)不綁定this，除了不綁定this之外，還不會綁定arguments、super或new.target。

02、箭頭函數(shù)體內(nèi)的 this，繼承的是外層代碼塊的 this。

03、如果對象的方法是箭頭函數(shù)，那么箭頭函數(shù)中的this是window，因為對象中不存在this，只能往上找，就找到了全局的 this，指向的是 window。即使這個對象在某一個函數(shù)內(nèi)，也是如此。

相同的規(guī)則也適用于在 prototype 對象上定義方法。

所以，不用用箭頭函數(shù)聲明對象的方法。

let o = {
  // 不要這么做。
  notThis: () => {
    console.log(this) // Window
    this.objectThis() // Uncaught TypeError: this.objectThis is not a function
  },
  // 可以這么寫
  objectThis: function () {
    console.log(this) // o
  }
  // 簡化版
  objectThis2 () {
    console.log(this) // o
  }
}

04、不能使用箭頭函數(shù)來創(chuàng)建事件監(jiān)聽器，因為 this 不再綁定到附加到事件監(jiān)聽器的元素。

可以使用 event.currentTarget 獲得正確的 this 上下文。

button.addEventListener("click", function () {
  console.log(this) // button
})

button.addEventListener("click", e => {
  console.log(this) // Window
  console.log(event.currentTarget) // button
})

05、適用于定時器，定時器中的箭頭函數(shù)中的this，繼承外層代碼塊的this。

let o = {
  // Old way
  oldDoSthAfterThree: function () {
    let that = this
    setTimeout(function () {
      console.log(this) // Window
      console.log(that) // o
    })
  },
  // Arrow function way
  doSthAfterThree: function () {
    setTimeout(() => {
      console.log(this) // o
    }, 3000)
  }
}

06、箭頭函數(shù)沒有自己的 this，所以不能用 call()、apply()、bind() 這些方法去改變 this 的指向。

也就是說，不可以使用 new 命令，否則會拋出一個錯誤。

var Person = (name, age) => {
    this.name = name
    this.age = age
}
var p = new Func("John", 33) // error

因此箭頭函數(shù)不能用作 Generator 函數(shù)。

var func = a => a
console.log(typeof func); // "function"

instanceof也返回true，表明也是Function的實例：

console.log(func instanceof Function); // true

不能直接使用花括號作為返回值，那會導(dǎo)致錯誤。

JS引擎在遇到對象的花括號時會把它當(dāng)作代碼塊，所以它不認(rèn)識里面的變量標(biāo)識、冒號和逗號等。

想直接返回一個對象，你只需要用小括號把整個對象包裹起來就好。

例子：

const getInitialData = () => {
    id: 1,
    name: "Jane Doe"
};

// 這里會拋出錯誤
let initialData = getInitialData();

例子：

// 這就完全有效
const getInitialData = () => ({
    id: 1,
    name: "Jane Doe"
});

let initialData = getInitialData();

它里面的arguments指向它被包裹的外層函數(shù)的arguments。

var arguments = 42;
var arr = () => arguments;

arr(); // 42

function foo() {
    var f = (i) => arguments[0]+i; 
    // foo函數(shù)的間接參數(shù)綁定
    return f(2);
}

foo(1); // 3

function foo() { 
    var f = (...args) => args[0]; 
    return f(2); 
}

foo(1); // 2

例子：

( x => x * 2 )( 3 ); // 6

因為在函數(shù)內(nèi)部操作this會很容易污染全局作用域。最起碼在箭頭函數(shù)外部包一層普通函數(shù)，將this控制在可見的范圍內(nèi)；

例子：

// click.js
const btn = document.querySelector("button");

btn.addEventListener("click", (event) => {
    console.log("clicked");
});

例子：

// map.js
let numbers = [1,2,3,4];
let multipliedBy2 = numbers.map((number) => {
    return number * 2;
});

console.log(multipliedBy2); // [2, 4, 6, 8]

例子：

const numbers = [1, 2, 3, 4];
const multipliedBy2 = numbers.map((n) => n * 2);

// 或者不需要為參數(shù)加上括號
const multipliedBy2WithShorterCallback = numbers.map(n => n * 2);

例子：

const todos = (state = [], action) => {
    switch(action.type) {
    case ADD_TODO:
        return [..state, action.text];
    default:
        return state;
    }
}

例子：

const multiply = (x) => {
    return (y) => {
        return x * y;
    }
};

const multiplyBy3 = multiply(3);
multiplyBy3(2); // 6
multiplyBy3(3); // 9

例子：

const multiply = (x) => (y) => x * y;

const multiplyBy3 = multiply(3);
multiplyBy3(2); // 6
multiplyBy3(3); // 9

下面是箭頭函數(shù)的使用模式:

//  一個參數(shù)對應(yīng)一個表達(dá)式
param => expression;// 例如 x => x+2;

// 多個參數(shù)對應(yīng)一個表達(dá)式
(param [, param]) => expression; //例如 (x,y) => (x + y);

// 一個參數(shù)對應(yīng)多個表示式
param => {statements;} //例如 x = > { x++; return x;};

//  多個參數(shù)對應(yīng)多個表達(dá)式
([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;};

//表達(dá)式里沒有參數(shù)
() => expression; //例如var flag = (() => 2)(); flag等于2

() => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1

//傳入一個表達(dá)式，返回一個對象
([param]) => ({ key: value });
//例如  var fuc = (x) => ({key:x})
 var object = fuc(1);
alert(object);//{key:1}

【】例子：一些寫法

//  有效的常規(guī)語法
(function(x, y){
    x= x * 2;
    return x + y;
} (3, "B") );

// 無效的箭頭函數(shù)語法
( (x, y) => {
    x= x * 2;
    return x + y;
} ( 3, "A" ) );

// 但是可以這樣寫就是有效的了:
( (x,y) => {
    x= x * 2;return x + y;
} )( 3,"A" );//立即執(zhí)行函數(shù)