JavaScript的函數申明、函數表達式、箭頭函數

JavaScript中的函數可以通過幾種方式創建，如下。

// 函數聲明
function getName() {
　　return 'Michael'
}

// 函數表達式
const getName = function() {
　　return 'Michael'
}

// 箭頭函數（同樣也是表達式）
const getName = () => {
　　return 'Michael'
}

函數聲明和表達式之間的差別是

JavaScript 解釋器中存在一種變數聲明被提升的機制，也就是說函數聲明會被提升到作用域的最前面，即使寫代碼的時候是寫在最後面，也還是會被提升至最前面。
而用函數表達式創建的函數是在運行時進行賦值，且要等到表達式賦值完成後才能調用
看一個例子

getName()//oaoafly
var getName = function() {
　　console.log('wscat')
}
getName()//wscat
function getName() {
　　console.log('oaoafly')
}
getName()//wscat

上面的問題可以分解成兩個簡單的問題，有助於你更清楚的看出函數聲明和表達式之間的區別

var getName;
console.log(getName)//undefined
getName()//Uncaught TypeError: getName is not a function
var getName = function() {
　　console.log('wscat')
}

var getName;
console.log(getName)//function getName() {console.log('oaoafly')}
getName()//oaoafly
function getName() {
　　console.log('oaoafly')
}

這個區別看似微不足道，但在某些情況下確實是一個難以察覺並且“致命“的陷阱。出現這個陷阱的本質原因體現在這兩種類型在函數提升和運行時機（解析時/運行時）上的差異。

箭頭函數
箭頭函數是語法和函數表達式比起來稍有不同的函數表達式。在上面的示例中，你可以看到箭頭函數看起來像函數表達式，但沒有單詞function，然後在括弧和大括弧之間帶有粗箭頭=>。

你可能聽說過，在JavaScript中，函數會創建自己的作用域。這意味著JavaScript函數會創建自己的上下文this，如果我們需要一個函數但是這個函數卻沒有自己的上下this，那麼就可能會遇到問題。箭頭函數的特征之一是它們不創建上下文，因此箭頭函數的內部this與外部的this相同。

箭頭函數也可以很小巧。查看下麵兩個完全相同的示例：

const getName = () => {
　　return 'Michael'
}

// 和上面的相同，但是更小巧
const getName = () => 'Michael'

當箭頭函數忽略其大括弧時，表示我們希望粗箭頭右側的內容為返回值（不用加return）。這稱為隱式返回值。關於箭頭函數，還有一些更細微的細節需要瞭解，例如如何返回對象以及如何省略單個參數的括弧。

// 箭頭函數直接返回對象
const getStudent = () => ({ name: 'Michael', age: 18, });

// 省略單個參數的括弧
const addOne = (n) => n+1;
const addOne = n => n+1;