ES 6 中的箭頭函數及用法

ES6標准新增了一種新的函數：Arrow Function（箭頭函數）。
主要的幾種寫法如下：

組成: 參數 => 語句,
參數不是1個: (參數,參數2)=>語句
語句不止一條: 參數 =>{語句1;語句2;return 返回值}
返回的對象格式: 參數=>({對象})

通常函數的定義方法

var fn1 = function(a, b) {
    return a + b
}
 
function fn2(a, b) {
    return a + b
}

使用ES6箭頭函數語法定義函數，將原函數的“function”關鍵字和函數名都刪掉，並使用“=>”連接參數列表和函數體。

var fn1 = (a, b) => {
    return a + b
}
 
(a, b) => {
    return a + b
}

當函數參數只有一個，括號可以省略；但是沒有參數時，括號不可以省略。

// 無參
var fn1 = function() {}
var fn1 = () => {}
 
// 單個參數
var fn2 = function(a) {}
var fn2 = a => {}
 
// 多個參數
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}
 
// 可變參數
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}

箭頭函數相當於匿名函數，並且簡化了函數定義。箭頭函數有兩種格式，一種只包含一個表達式(函數體中只有一句代碼，且代碼的執行結果就是返回值，可以省略大括號)，省略掉了{ ... }和return。還有一種可以包含多條語句，這時候就不能省略{ ... }和return

() => return 'hello'
(a, b) => a + b
(a) => {
  a = a + 1
  return a
}

如果返回一個對象，需要特別注意，如果是單表達式要返回自定義對象，不寫括號會報錯，因為和函數體的{ ... }有語法沖突。注意，用小括號包含大括號則是對象的定義，而非函數主體

x => {key: x} // 報錯
x => ({key: x}) // 正確

箭頭函數中的this 與 普通函數中的 this 指向性問題

箭頭函數中，this指向的固定化，並不是因為箭頭函數內部有綁定this的機制，實際原因是箭頭函數根本沒有自己的this，導致內部的this就是外層代碼塊的this。正是因為它沒有this，所以也就不能用作構造函數。所以在定義對象的時候，定義對象屬性，里面的this指向的一般是全局，或者這個對象所在的那個環境中的this。
一個簡單的例子，你就能明白了

var name = 'window'; 

var A = {
   name: 'A',
   sayHello1: () => {
      console.log(this.name)
   },
   sayHello2(){
      console.log(this.name)
   }
}

A.sayHello1();// 輸出的是 window
A.sayHello2();// 輸出的是 A