JavaScript中的函數(shù)可以通過幾種方式創(chuàng)建，如下。

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

函數(shù)聲明和表達式之間的差別是

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

看一個例子

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

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

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')
}

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

箭頭函數(shù)

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

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

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

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

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

// 箭頭函數(shù)直接返回對象
const getStudent = () => ({ name: 'Michael', age: 18, });
 
// 省略單個參數(shù)的括號
const addOne = (n) => n+1;
const addOne = n => n+1;

總結

以上所述是小編給大家介紹的JavaScript中的函數(shù)申明、函數(shù)表達式、箭頭函數(shù)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

最新評論