快速理解箭頭函式 Arrow function
這是我第一次寫有關前端的技術文章，雖然已經好一陣子沒有實際開發，但仍然會持續接觸前端與 JavaScript 相關的技術。
對 JavaScript 來說，現代化的語言特性之一是箭頭函數（arrow function）。這種函數定義方式，讓使用者可以更簡潔地撰寫程式碼。在本篇文章中，我們將介紹箭頭函數的使用方式、優點和缺點，以及箭頭函數中的 this 關鍵字。
什麼是箭頭函數？
箭頭函數是 ES6（ECMAScript 2015）引入的一種函數定義方式，它的語法更為簡潔，比傳統函數表達式更加易讀。箭頭函數使用箭頭（=>）來定義，並且可以省略 function 關鍵字和 return 關鍵字。
Arrow function 一開始知道時確實用得很開心，無論是簡潔的風格，亦或是能撰寫許多 one-line Code；但他本身也擁有一些特別需要注意的細節。這篇文章算是自己一開始的嘗試，因此若有任何想要交流的部分都歡迎提出！
一、如何快速上手使用 Arrow function
A. 原先的 function 與 arrow function 的差異
原先的 function 會有表達式（Expression）和宣告式（Declaration）兩種表達方式。
// 原先 Expression 和 Declaration 的函式寫法
const funcExpression = function (arg1) {return console.log(arg1)};
function funcDeclaration (arg1) {return console.log(arg1)};而箭頭函式（Arrow function）則是僅有表達式（Expression）一種寫法：
// Arrow function 的撰寫格式
const func = (arg1) => {return console.log(arg1)};B. 不同參數數量下的寫法
影響最大的部分便是參數 Argument 的寫法，這裡可以分成超過一個參數，僅有一個參數，以及預設無參數的情況。
//當參數多於一個的時候，一定要寫小括號
const func = (arg1, arg2) => {return console.log(arg1)};// 如果參數只有一個，可以選擇是否省略小括號 “()”
const func = arg1 => {return console.log(arg1)};C. 不同 return 狀態下的寫法
另一個讓 Arrow function 被廣泛使用，甚至出現很多 one-line code 的寫法，都和 Arrow function 的 return 寫法有關。
// 如果 return 的值只有一行，則一樣可以省略大括號 {} 和 return，若多餘一行則需維持 {} & return
const func = arg1 => console.log(arg1);
// 多於一行的情況如下
const func2 = arg2 => {
const myName = "Chris";
return console.log(myName);
};// 如果要 return Object，則需要特別加上小括號
const func = arg1 => ({key1: value1, key2: value2});D. Arrow function 在 Airbnb 風格下的規範
二、Arrow function 在設計上的差異
一開始寫 Arrow function 的時候，因為其簡潔而清晰的撰寫方式而且的不亦樂乎。此時就開始思考，若 Object 內 Method 也用箭頭函式豈不更好。
然而當我將原先在 Object 內的 function 替換成 Arrow function 後，Console 就直接跳出 undefined。這時我才意識到，Arrow function 和傳統 function 所碰觸到的 this 其實大有不同。其中最大的差異在：
箭頭函式不像傳統 function 會根據呼叫的 Object 決定 this，箭頭函式並沒有自己的 this property (又被稱為 Lexical this)，而是會根據生成時的上層 function Scope，來決定 this 的指稱對象。
Traditional function
傳統函式會從誰呼叫來判定 this 的函數執行環境 (Function Execution Context)，並指向當下的呼叫者 (除了特別使用 Call/Apply 等函式外)。
const obj = {
method: function() {return this}
}
console.log(obj.method() === obj); // TrueArrow function
而 Arrow function 並沒有自己的 this 引用物件，而是會引用函數執行環境 (Function Execution Context) 外圍的 this。
const obj = {
method: () => this
}
console.log(obj.method() === window); // TrueArrow function 會存取的除了複層的 this 外，就是整個 window。在這個例子中，往外一層的 method 並不在任何的 function context 中，因此就會存取到 Global Context，在瀏覽器的環境裡就是 Window 物件。
Arrow function 大不同
雖然 Arrow function 多數的應用情境和傳統的 function 一樣，但對於 this 的定義，讓他和傳統 function 有著非常大的差別。因此在使用 Arrow function 時，要特別避免在 Constructor、Method 等位置使用 Arrow function。
對於更進階的 Arrow function 可以參考以下資訊，都會更深入地說明 this 的各個使用情境。若讀者有任何想交流的部分，也歡迎你留言跟我說！
