溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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;
總結
以上所述是小編給大家介紹的JavaScript中的函數申明、函數表達式、箭頭函數，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
