一 為什麼要有箭頭函式

我們在日常開發中，可能會需要寫類似下面的程式碼

  const Person = {
    'name': 'little bear',
    'age': 18,
    'sayHello': function () {
      setInterval(function () {
        console.log('我叫' + this.name + '我今年' + this.age + '歲!')
      }, 1000)
    }
  }
  Person.sayHello()

上例的輸出結果是什麼呢？可能對javascript特性不是很熟悉的同學(我自己也是)會認為輸出當然是
我叫little bear,今年18歲咯。如果你的答案是這個的話，那麼我要恭喜你，答錯了。其實上例的輸出結果是我叫undefined，今年我undefined歲。為什麼會輸出這種結果呢？
這是因為setInterval執行的時候，是在全域性作用域下的，所有this指向的是全域性window,而window上沒有name和age，所以當然輸出的是undefined咯。不明白的同學可以去看看this的工作原理

 const Person = {
    'name': 'little bear',
    'age': 18,
    'sayHello': function () {
     let self = this
      setInterval(function () {
        console.log('我叫' + self.name + '我今年' + self.age + '歲!')
      }, 1000)
    }
  }
  const sayHelloFun = Person.sayHello
  sayHelloFun()
 

使用上敘方法，輸出的結果就是大家所期待的我叫little bear，我今年18歲了。
那麼，大家可能會覺得這樣不科學，明明是寫在物件裡面的方法，為什麼還要使用快取這個物件才能正確使用。ECMA組織覺得這確實是個問題，之後在es6的新特性裡添加了箭頭函式，它能很好的解決這個問題。另外箭頭函式還用簡化程式碼量的特點。

二 什麼是箭頭函式

箭頭函式的語法非常簡單，看一下最簡單的箭頭函式表示法
() => console.log('Hello')
之前沒有接觸過箭頭函式的人可能會驚訝於其程式碼的簡潔。對比之前如果要寫一個這樣的函式

function(){
console.log('hello')
}
 

箭頭函式的簡潔性一目瞭然。
更多關於箭頭函式語法可點選箭頭函式語法

三 和普通函式的區別

從上面的例子中，我們已經可以看出箭頭函式的優勢。
和普通函式相比，箭頭函式主要就是以下兩個方面的特點

1. 不繫結this，arguments
2. 更簡化的程式碼語法

第二個特點不需要過多贅述，下面我們來看看不繫結this和arguments這兩個特點

3.1 不繫結this

什麼叫不繫結this，我個人的理解為箭頭函式的this其實就是在定義的時候就確定好的，以後不管怎麼呼叫這個箭頭函式，箭頭函式的this始終為定義時的this
我們還是以前面的那個setInterval程式碼為例

const Person = {
    'name': 'little bear',
    'age': 18,
    'sayHello': function () {
      setInterval(function () {
        console.log('我叫' + this.name + '我今年' + this.age + '歲!')
      }, 1000)
    }
Person.sayHello()

當Person.sayHello()去執行setInterval的時候，是在全域性作用下執行的所有setInterval回撥函式的this就為全域性物件。es3-5中的函式this的值和呼叫這個函式的上下文有關。（注意是呼叫）
我們用箭頭函式重寫上訴函式

const Person = {
    'name': 'little bear',
    'age': 18,
    'sayHello': () => {
      setInterval(() => {
        console.log('我叫' + this.name + '我今年' + this.age + '歲!')
      }, 1000)
    }
Person.sayHello()

大家猜猜結果是什麼？？？
輸出的是我叫’little bear’，今年18歲嘛？
哈哈，太天真了，我開始也是這樣想的，後面輸出之後發現結果不對，輸出的還是undefined。為什麼呢？？
因為我把方法寫在了物件裡，而物件的括號是不能封閉作用域的。所以此時的this還是指向全域性物件。
所以，通過以上的錯誤可以提醒我們，最好不要用箭頭函式作為物件的方法。
我們需要重新舉一個例子，如下

function Person () {
  this.name = 'little bear',
  this.age = 18
  let self = this
  setInterval(function sayHello () {
    console.log('我叫' + self.name + '我今年' + self.age + '歲!')
  }, 1000)
}
let p = new Person()

快取this，然後輸出，能達到我們想要的結果。
把上述例子改為箭頭函式的形式如下

function Person () {
  this.name = 'little bear',
  this.age = 18
  setInterval(() => {
    console.log('我叫' + this.name + '我今年' + this.age + '歲')
},1000)
}
let p = new Person()

我們可以看到，箭頭函式使用了定義時上下文的this，且與在哪裡呼叫沒有關係。

3.2 不繫結arguments

箭頭函式還有一個比較有特點的地方就是其不繫結arguments,即如果你在箭頭函式中使用arguments引數不能得到想要的內容。

let arrowfunc = () => console.log(arguments.length)
arrowfunc()
//output 
arguments is not defined

所以在箭頭函式中我們是不能直接使用arguments物件的，但是如果我們又想獲得函式的引數怎麼辦呢？
我們可以使用剩餘引數來取代arguments剩餘引數詳情

let arrowfunc = (...theArgs) => console.log(theArgs.length)
arrowfunc(1,2)
//output
2

四 什麼時候不能用箭頭函式

前面我們已經看到了很多關於es6箭頭函式的好處，也看到了箭頭函式的一些不足。那麼我們應該在什麼時候使用箭頭函式，而什麼時候最好不要使用呢？
1.作為物件的方法
在寫這篇部落格的例子時，由於本人的水平確實有限，導致了篇頭出現的錯誤。不過我也想由此告訴大家，最好不要在物件的方法中使用箭頭函式，這樣可能會導致一些問題的產生。除非你很熟悉箭頭函式。
2.不能作為建構函式
由於箭頭函式的this不繫結的特點，所以不能使用箭頭函式作為建構函式，實際上如果這樣做了，也會報錯。
3.定義原型方法

function Person (name){
this.name = name
}
Person.prototype.sayHello = () => {
    console.log(this)
}
var p1 = new Person()
p1.sayHello()
//output 
window物件

這裡的this指向的是window物件，這點和在物件方法中定義有點像

五 總結

箭頭函式由於其程式碼的簡潔性和不繫結呼叫者this的特點，在非方法函式中使用是最合適的，而在方法函式中使用，需要特別注意它的this繫結問題，如果需要動態的修改this，最好還是不要使用箭頭函數了。所以永遠沒有一個解決方案能解決所有事情，只有合適的應用場景。