JavaScript中的函數(shù)申明、函數(shù)表達(dá)式、箭頭函數(shù)
JavaScript中的函數(shù)可以通過幾種方式創(chuàng)建,如下。
// 函數(shù)聲明
function getName() {
return 'Michael'
}
// 函數(shù)表達(dá)式
const getName = function() {
return 'Michael'
}
// 箭頭函數(shù)(同樣也是表達(dá)式)
const getName = () => {
return 'Michael'
}
函數(shù)聲明和表達(dá)式之間的差別是
JavaScript 解釋器中存在一種變量聲明被提升的機(jī)制,也就是說函數(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
上面的問題可以分解成兩個(gè)簡(jiǎ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è)難以察覺并且“致命“的陷阱。出現(xiàn)這個(gè)陷阱的本質(zhì)原因體現(xiàn)在這兩種類型在函數(shù)提升和運(yùn)行時(shí)機(jī)(解析時(shí)/運(yùn)行時(shí))上的差異。
箭頭函數(shù)
箭頭函數(shù)是語法和函數(shù)表達(dá)式比起來稍有不同的函數(shù)表達(dá)式。在上面的示例中,你可以看到箭頭函數(shù)看起來像函數(shù)表達(dá)式,但沒有單詞function,然后在括號(hào)和大括號(hào)之間帶有粗箭頭=>。
你可能聽說過,在JavaScript中,函數(shù)會(huì)創(chuàng)建自己的作用域。這意味著JavaScript函數(shù)會(huì)創(chuàng)建自己的上下文this,如果我們需要一個(gè)函數(shù)但是這個(gè)函數(shù)卻沒有自己的上下this,那么就可能會(huì)遇到問題。箭頭函數(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ì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- JS中箭頭函數(shù)與this的寫法和理解
- JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別實(shí)例分析【 5 個(gè)區(qū)別】
- JavaScript基礎(chǔ)之this和箭頭函數(shù)詳析
- JavaScript箭頭函數(shù)中的this詳解
- 深入理解JavaScript 箭頭函數(shù)
- JavaScript函數(shù)式編程(Functional Programming)箭頭函數(shù)(Arrow functions)用法分析
- JavaScript ES6箭頭函數(shù)使用指南
- 淺談箭頭函數(shù)寫法在ReactJs中的使用
- JavaScript箭頭函數(shù)_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
- JavaScript哪些場(chǎng)景不能使用箭頭函數(shù)
相關(guān)文章
js+html實(shí)現(xiàn)周歲年齡計(jì)算器
這篇文章主要為大家詳細(xì)介紹了js+html實(shí)現(xiàn)周歲年齡計(jì)算器的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06
原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式示例
這篇文章主要介紹了原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式,結(jié)合具體實(shí)例形式分析了javascript循環(huán)遍歷Nodelist Dom列表的常用操作技巧,需要的朋友可以參考下2018-02-02
Javascript計(jì)算二維數(shù)組重復(fù)值示例代碼
這篇文章主要給大家介紹了利用Javascript計(jì)算二維數(shù)組重復(fù)值的方法,文中給出了詳細(xì)的示例代碼,相信對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。2016-12-12
JS中檢測(cè)數(shù)據(jù)類型的幾種方式及優(yōu)缺點(diǎn)小結(jié)
這篇文章主要介紹了JS中檢測(cè)數(shù)據(jù)類型的幾種方式及優(yōu)缺點(diǎn)小結(jié),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12
Bootstrap實(shí)現(xiàn)input控件失去焦點(diǎn)時(shí)驗(yàn)證
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)input控件失去焦點(diǎn)時(shí)驗(yàn)證的相關(guān)資料,非常不錯(cuò),需要的朋友可以參考下,需要的朋友可以參考下2016-08-08
layui table 復(fù)選框跳頁后再回來保持原來選中的狀態(tài)示例
今天小編就為大家分享一篇layui table 復(fù)選框跳頁后再回來保持原來選中的狀態(tài)示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
使用JSON格式提交數(shù)據(jù)到服務(wù)端的實(shí)例代碼
這篇文章主要介紹了使用JSON格式提交數(shù)據(jù)到服務(wù)端的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2018-04-04

