快捷導(dǎo)航

JavaScript中的函數(shù)申明、函數(shù)表達(dá)式、箭頭函數(shù)

更新時(shí)間：2019年12月06日 15:02:27 作者：吾日三省吾身，兩頓飯

js中的函數(shù)可以通過(guò)幾種方式創(chuàng)建，具體創(chuàng)建方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，文中通過(guò)例子給大家介紹了函數(shù)聲明和表達(dá)式之間的差別，感興趣的朋友跟隨小編一起看看吧

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

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

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

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

看一個(gè)例子

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

上面的問(wèn)題可以分解成兩個(gè)簡(jiǎn)單的問(wèn)題，有助于你更清楚的看出函數(shù)聲明和表達(dá)式之間的區(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')
}

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

箭頭函數(shù)

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

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

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

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

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

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

總結(jié)

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

您可能感興趣的文章: