javascript函數(shù)聲明和函數(shù)表達式區(qū)別分析
平時再用js寫函數(shù)的時候,一般都是以慣例 function fn () {} 的方式來聲明一個函數(shù),在閱讀一些優(yōu)秀插件的時候又不免見到 var fn = function () {} 這種函數(shù)的創(chuàng)建,究竟他們用起來有什么區(qū)別呢,今天就本著打破砂鍋問到底的精神,好好來說說這個讓人神魂顛倒的--函數(shù)聲明。
函數(shù)聲明
函數(shù)聲明示例代碼
function fn () {
console.log('fn 函數(shù)執(zhí)行..');
// code..
}
這樣我們就聲明了一個名稱為fn的函數(shù),這里出個思考,你認(rèn)為在這個函數(shù)的上面來調(diào)用他的話會執(zhí)行嗎?還是會報錯?
控制臺輸出結(jié)果:
是的,此時fn函數(shù)是可以被調(diào)用到的,這里來總結(jié)下原因。
總結(jié):
1:此時fn函數(shù)是變量的結(jié)果,默認(rèn)存儲在全局上下文的變量中(可用 window.函數(shù)名 來驗證)
2:此方式為函數(shù)聲明,在進入全局上下文階段創(chuàng)建,代碼執(zhí)行階段,它們已經(jīng)可用。ps:javaScript在每次進入方法時都會先初始化上下文環(huán)境(由全局 → 局部)
3:它可以影響變量對象(僅影響存儲在上下文中的變量)
函數(shù)表達式
函數(shù)表達式示例代碼
var fn = function () {
console.log('fn 函數(shù)【表達式】聲明執(zhí)行..')
// code..
}
這樣我們就聲明了一個匿名函數(shù),并且把它的引用指向了變量fn?
再次在該表達式聲明的函數(shù)上下方各調(diào)用一次,來看控制臺的輸出結(jié)果。
// 為了清晰的看到控制臺的輸出,我們在各自調(diào)用前后做個標(biāo)記,增加可讀性。
console.log('之前調(diào)用開始..');
fn();
console.log('之前調(diào)用結(jié)束..');
var fn = function () {
console.log('fn 函數(shù)【表達式】聲明執(zhí)行..')
// code..
}
console.log('之后調(diào)用開始..');
fn();
console.log('之后調(diào)用開始..');
控制臺打印結(jié)果:
可以看到代碼在執(zhí)行到第一次調(diào)用fn()函數(shù)的時候,提示:fn is not a function (fn 不是一個方法),遇到錯誤而終止運行。
這說明在第一次調(diào)用fn()的同時,var fn 變量沒有做為全局對象的一個屬性而存在,且 fn 引用的匿名函數(shù)上下文也沒有被初始化,所以在他之前調(diào)用失敗。
// 現(xiàn)在先把之前的調(diào)用邏輯給注釋掉,再看下控制臺的輸出
// console.log('之前調(diào)用開始..');
// fn();
// console.log('之前調(diào)用結(jié)束..');
var fn = function () {
console.log('fn 函數(shù)【表達式】聲明執(zhí)行..')
// code..
}
console.log('之后調(diào)用開始..');
fn(); // 在表達式之后調(diào)用
console.log('之后調(diào)用開始..');
控制臺打印結(jié)果:
可以看出,在該表達式函數(shù)之后來調(diào)用是可以的,來總結(jié)下那是為什么呢?
總結(jié):
1:首先變量本身不做為一個函數(shù)存在,而是一個匿名函數(shù)的引用(值類型的不屬于引用)
2:在代碼執(zhí)行階段,初始化全局上下文時,它沒有被做為全局的一個屬性而存在,所以不會造成變量對象的污染
3:該類型的聲明一般在插件的開發(fā)比較常見,也可做為閉包中回調(diào)函數(shù)的調(diào)用
所以 function fn () {} 并不等于 var fn = function () {} ,他們有本質(zhì)上的區(qū)別。
以上就是本文的全部內(nèi)容了,思路很清晰,對比也很明確,是篇非常不錯的文章,小伙伴們一定要仔細研讀下
- JavaScript中函數(shù)聲明與函數(shù)表達式的區(qū)別詳解
- 淺談javascript 函數(shù)表達式和函數(shù)聲明的區(qū)別
- JavaScript中函數(shù)表達式和函數(shù)聲明及函數(shù)聲明與函數(shù)表達式的不同
- 詳解JavaScript中的函數(shù)聲明和函數(shù)表達式
- js中函數(shù)聲明與函數(shù)表達式
- JavaScript中的函數(shù)聲明和函數(shù)表達式區(qū)別淺析
- 淺析javascript中函數(shù)聲明和函數(shù)表達式的區(qū)別
- Javascript學(xué)習(xí)筆記之 函數(shù)篇(一) : 函數(shù)聲明和函數(shù)表達式
- javascript 函數(shù)聲明與函數(shù)表達式的區(qū)別介紹
- Javascript中的函數(shù)聲明與函數(shù)表達式(奇技淫巧)
- 理解 javascript 中的函數(shù)表達式與函數(shù)聲明
相關(guān)文章
在Javascript中處理數(shù)組之toSource()方法的使用
這篇文章主要介紹了在Javascript中處理數(shù)組之toSource()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06JS?數(shù)組sort方法的升序為什么是a-b你知道嗎
這篇文章主要為大家詳細介紹了JS?數(shù)組sort方法為什么升序是a-b,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02JavaScript函數(shù)、閉包、原型、面向?qū)ο髮W(xué)習(xí)筆記
這篇文章給大家分享了一篇關(guān)于JavaScript函數(shù)、閉包、原型、面向?qū)ο蟮闹R點學(xué)習(xí)筆記內(nèi)容,有興趣的朋友參考下。2018-09-09淺談JavaScript函數(shù)的四種存在形態(tài)
下面小編就為大家?guī)硪黄獪\談JavaScript函數(shù)的四種存在形態(tài)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06Javascript入門學(xué)習(xí)第八篇 js dom節(jié)點屬性說明
上2篇文章我們講了 用dom方式 創(chuàng)建節(jié)點,復(fù)制節(jié)點,插入節(jié)點, 刪除節(jié)點,替換節(jié)點,查找節(jié)點,獲取屬性等。。。2008-07-07