箭頭函式是ES6裡一個可以更簡短宣告函式的方式，宣告方式是使用=>替代funciton，而不管在什麼情境下呼叫箭頭函式的，函式裡面的this皆是外面的this。

這邊宣告匿名函式，並將此函式指定給變數a，以下為ES5寫法：

var a = function(x){
  return x+10;
}

ES6語法及其他情況的縮寫：

//一般使用箭頭函式
const a = (x) => {
  return x+10;
}

//當傳入的參數只有一個，可以省略 ( )
//切記只有一個的時後才可以這樣做，沒有參數或一個以上都要括號
const a = x => {
  return x+ 10;
}

//當函式本體只有一個return時，可以直接接在箭頭後面
const a = x => return x+10;

離題一下，那什麼是this呢？this是什麼取決於你是怎麼執行這個函式的，透過下面幾個例子，先宣告一個myPhone函式，然後我們來看在不同情境下呼叫myPhone時的this分別是哪些：

var myPhone = function(){
  console.log(this.name); 
}

直接執行myPhone()得到的this為globa：

var name = "iPhone";
myPhone();//iPhone

建立名為UT的物件，將myPhone函式指定為物件key值的函式，得到的this為物件UT：

var UT = {
  name: "Sony"
}
UT.myPhone = myPhone; 
UT.myPhone();//Sony

偵聽點擊#phone執行myPhone函式，這邊的this為btn

<button id="phone" name="HTC"></button>
var btn = document.getElementById("phone");
btn.addEventListner("click", myPhone);//HTC

總結以上例子，執行同樣的函式，但因為執行的方式不同因此得到的this也不同，回傳的結果也不同。

但如果把myPhone改為箭頭函式：

const myPhone = () => {
  console.log(this.name);
}

那麼以上三種情境呼叫函式的結果將會相同，因為箭頭函式裡面的this是他在宣告時global的this，所以得到的結果都會是iPhone。

學習箭頭函式到這，下一篇繼續Vue嚕