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;