JavaScript的各種常見函數(shù)定義方法
本文詳細(xì)講述了JavaScript的各種常見函數(shù)定義方法,分享給大家供大家參考。具體分析如下:
首先看一下JavaScript最常見的四種函數(shù)定義:
用Function構(gòu)造函數(shù)定義的函數(shù),代碼如下:
var multiply = new Function('x', 'y', 'return x * y;');
函數(shù)聲明,這種方式也是最為常見的一種:
function multiply(x, y) { return x * y; }
函數(shù)表達(dá)式,聲明為匿名函數(shù)然后賦值給一變量,很常見的方式:
var multiply = function(x, y) { return x * y; }
函數(shù)表達(dá)式,但是函數(shù)聲明為命名函數(shù)再賦值給一變量,長得跟上一種方式真像:
var multiply = function multi(x, y) { return x * y; }
首先比較一下函數(shù)名,以及將函數(shù)賦值給的那個(gè)函數(shù)變量直接的關(guān)系,真繞……直觀一點(diǎn)兒,從剛剛的例4說吧,就是multiply這個(gè)函數(shù)變量與multi這個(gè)函數(shù)名的關(guān)系:
函數(shù)名是不能夠被修改的,相反的,函數(shù)變量是可以重新被賦值的。函數(shù)變量可以被重新賦值應(yīng)該很好理解,我們第4個(gè)例子剛剛定義的multiply這個(gè)變量,看它不順眼,重新賦值為:
multiply = function(x, y) { return x + y; }
立馬搖身一變,從乘法變成加法了。但是multi這個(gè)函數(shù)變量想變就是不可能的了,函數(shù)定義已經(jīng)在那兒了,只要還保留這它的引用,它就是不會(huì)變的,可能這里不大好理解,先這樣想著,往下看,慢慢就應(yīng)該能理解了。
函數(shù)名同時(shí)是無法在函數(shù)外部使用的,它只在函數(shù)體內(nèi)部可見,一個(gè)很簡單的例子:
var foo = function bar() { alert('hello'); } foo(); // 提示“hello”字符串 bar(); // 執(zhí)行報(bào)錯(cuò),bar未定義
和明顯,這里的bar確實(shí)是一個(gè)函數(shù)名,但是它確實(shí)不能在外部調(diào)用。這時(shí)候肯定會(huì)有童鞋問干嘛這個(gè)例子還是長得那么乖,和例4一個(gè)樣,怎么不用例2的方式呢?問得好,且聽我慢慢分解。
繼續(xù)說例4,我們可以看見函數(shù)名(multi)和函數(shù)變量(multiply),本不相同,其實(shí)兩者根本就沒有任何關(guān)系,因此沒有保持一致的必要。說到這兒,我想上面4個(gè)例子應(yīng)該可以精簡到3個(gè),例2和例4本質(zhì)應(yīng)該是一致的。什么,不信?嘻嘻,我還得繼續(xù)賣關(guān)子哈~繼續(xù)讀下去~~
我們發(fā)現(xiàn)例2和例4相比,只不過少了var的函數(shù)變量,而例3與例4相比,只不過少了那個(gè)函數(shù)名,這里從現(xiàn)象上看,例2和例4的本質(zhì)是相同的,鐵證如下:
function foo() {} alert(foo); // 提示包含“foo”的函數(shù)名 var bar = foo; alert(bar); // 提示依然只包含“foo”的函數(shù)名,和bar半毛錢關(guān)系都沒有
的確是鐵證吧?上面的類似例2的代碼結(jié)合起來寫是不是就成例4的方式了?正確,這就是我剛剛所說的兩者本質(zhì)應(yīng)該相同,只是用例2方式定義函數(shù)的時(shí)候,JS引擎幫我們做了一些事情,比如聲明了函數(shù)名為multiply的函數(shù),同時(shí)還悄悄定義了一個(gè)也叫multiply的變量,然后賦值給這個(gè)變量,兩個(gè)完全一樣的名字,我們自以為在使用函數(shù)名multiply的時(shí)候,實(shí)際是在用multiply這個(gè)函數(shù)變量,暈了吧~說實(shí)話,我也暈了~~總之我們調(diào)用的時(shí)候,實(shí)在用函數(shù)變量調(diào)用,而函數(shù)名是無法在外部調(diào)用函數(shù)的,因此有了我上述的推斷。
但是這里要提到的一個(gè)小小的差別,函數(shù)聲明方式定義的函數(shù),與構(gòu)造函數(shù)聲明的或者函數(shù)表達(dá)式聲明的不同之處在于,函數(shù)聲明方式的函數(shù)可以在函數(shù)定義之前就調(diào)用……不說了,還是看代碼:
foo(); // 提示Foo function foo() { alert('Foo'); } bar(); // 哥們,和上面確實(shí)不一樣,就不要逞能,這不報(bào)錯(cuò)了?提示bar未定義 var bar = function() { alert('Bar'); }
再說說構(gòu)造函數(shù)聲明的函數(shù),這樣聲明的函數(shù)是不會(huì)繼承當(dāng)前聲明位置的作用域,它默認(rèn)只會(huì)擁有全局作用域,然而這個(gè)是其他幾種函數(shù)聲明方式也一樣有的,如下:
function foo() { var hi = 'hello'; //return function() { // alert(hi); //}; return Function('return hi;'); } foo()(); // 執(zhí)行效果大家自己跑一下看看
可以想見,用構(gòu)造函數(shù)聲明返回的這個(gè)函數(shù)執(zhí)行必然報(bào)錯(cuò),因?yàn)槠渥饔糜颍慈肿饔糜颍┲袥]有hi這個(gè)變量。
還有一點(diǎn),就是往往大家要說構(gòu)造函數(shù)方式聲明的函數(shù)效率要低,這是為什么呢?今天從文檔是得知是因?yàn)榱硗?種方式申明的函數(shù)只會(huì)被解析一次,其實(shí)他們存在于閉包中,但是那也只與作用域鏈有關(guān),函數(shù)體是只會(huì)被解析一次的。但是構(gòu)造函數(shù)方式呢,每次執(zhí)行函數(shù)的時(shí)候,其函數(shù)體都會(huì)被解析一次,我們可以想想這樣聲明的函數(shù)是一個(gè)對(duì)象,其中存放了參數(shù)以及函數(shù)體,每次執(zhí)行的時(shí)候都要先解析一次,參數(shù)和函數(shù)體,才會(huì)執(zhí)行,這樣必然效率低下。具體實(shí)驗(yàn)不知道如何做?
最后說一個(gè)大家都不怎么注意的地方,什么時(shí)候看似函數(shù)聲明方式的方式卻不是函數(shù)生命方式(還是這么繞~簡單點(diǎn)兒說,就是例2的方式什么時(shí)候在不經(jīng)意間就成其他方式了):
當(dāng)成為表達(dá)式的一部分,就如同例3和例4。
不再是腳本本身或者函數(shù)的“源元素”(source element)。什么是源元素呢?即在腳本中的非嵌套語句或者函數(shù)體(A "source element" is a non-nested statement in the script or a function body),例如:
var x = 0; // source element if (x == 0) { // source element x = 10; // not a source element, 因?yàn)榍短自诹薸f語句里 function boo() {} // not a source element, 因?yàn)榍短自诹薸f語句里 } function foo() { // source element var y = 20; // source element function bar() {} // source element while (y == 10) { // source element function blah() {} // not a source element, 因?yàn)榍短自诹藈hile語句里 y++; // not a source element, 因?yàn)榍短自诹藈hile語句里 } }
源元素的概念大概有了理解,繼續(xù)剛剛說的函數(shù)聲明,請(qǐng)看:
// 函數(shù)聲明 function foo() {} // 函數(shù)表達(dá)式 (function bar() {}) // 函數(shù)表達(dá)式 x = function hello() {} if (x) { // 函數(shù)表達(dá)式 function world() {} } // function statement function a() { // function statement function b() {} if (0) { // 函數(shù)表達(dá)式 function c() {} } }
最后這里說一下我自己的理解,之所以要區(qū)分函數(shù)聲明與非函數(shù)聲明,因?yàn)樵谖铱戳?,函?shù)聲明方式的函數(shù)定義,在JS解析引擎執(zhí)行的時(shí)候會(huì)將其提前聲明,也就是像我們剛剛上面說的那樣,可以在函數(shù)定義之前使用,實(shí)際上是解析引擎在我們使用前已經(jīng)將其解析了,但是非函數(shù)聲明式,就像表達(dá)式函數(shù)聲明,JS解析引擎只會(huì)把var聲明的變量提前定義,此時(shí)變量值為undefined,而真正對(duì)這個(gè)變量的賦值是在代碼實(shí)際所在位置,因此上述提到報(bào)錯(cuò)都是undefined,實(shí)際變量已經(jīng)定義了,只是還沒有賦值,JS解析引擎不知道它為函數(shù)。
相信本文所述對(duì)大家javascript WEB程序設(shè)計(jì)的有一定的借鑒價(jià)值。
- 類似php的js數(shù)組的in_array函數(shù)自定義方法
- Javascript 構(gòu)造函數(shù),公有,私有特權(quán)和靜態(tài)成員定義方法
- 淺談js函數(shù)的多種定義方法與區(qū)別
- javascript中數(shù)組的多種定義方法和常用函數(shù)簡介
- js function定義函數(shù)使用心得
- JS函數(shù)的幾種定義方式分析
- javascript定義函數(shù)的方法
- js function定義函數(shù)的幾種不錯(cuò)方法
- js 在定義的時(shí)候立即執(zhí)行的函數(shù)表達(dá)式(function)寫法
- JavaScript定義類或函數(shù)的幾種方式小結(jié)
- JavaScript函數(shù)定義方法實(shí)例詳解
相關(guān)文章
js實(shí)現(xiàn)簡易點(diǎn)擊切換顯示或隱藏
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡易點(diǎn)擊切換顯示或隱藏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11JavaScript位置參數(shù)實(shí)現(xiàn)原理及過程解析
這篇文章主要介紹了JavaScript位置參數(shù)實(shí)現(xiàn)原理及過程解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09element-ui?對(duì)話框dialog使用echarts報(bào)錯(cuò)'dom沒有獲取到'的問題
這篇文章主要介紹了element-ui?對(duì)話框dialog里使用echarts,報(bào)錯(cuò)'dom沒有獲取到'的問題,在這個(gè)事件里邊進(jìn)行echarts的初始化,執(zhí)行數(shù)據(jù),本文結(jié)合實(shí)例代碼給大家詳細(xì)講解,需要的朋友可以參考下2022-11-11微信公眾號(hào)中的JSSDK接入及invalid signature等常見錯(cuò)誤問題分析(全面解析)
這篇文章主要介紹了微信公眾號(hào)中的JSSDK接入及invalid signature等常見錯(cuò)誤問題分析(全面解析),需要的朋友可以參考下2020-04-04antd?table長表格出現(xiàn)滾動(dòng)條的操作方法
這篇文章主要介紹了antd?table長表格如何出現(xiàn)滾動(dòng)條,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06JavaScript Typescript基礎(chǔ)使用教程
TypeScript是Microsoft(微軟)開發(fā)的一種開源編程語言,它充分利用了JavaScript原有的對(duì)象模型,并在此基礎(chǔ)上進(jìn)行了擴(kuò)充,TypeScript設(shè)計(jì)目標(biāo)是開發(fā)大型應(yīng)用,它可以編譯成純JavaScript,編譯出來的JavaScript可以運(yùn)行在任何一種JS運(yùn)行環(huán)境中2022-12-12JavaScript實(shí)現(xiàn)單圖片上傳并預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)單圖片上傳并預(yù)覽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09