淺析JavaScript中的特殊函數(shù)及用法小結(jié)
寫在前面
JavaScript中的函數(shù)本質(zhì)上是一個(gè)對象,我們可以將這個(gè)對象賦值給一個(gè)變量,這就使JavaScript中的函數(shù)變得非常的靈活,現(xiàn)在就來淺看一下JavaScript中函數(shù)的一些用法。
匿名函數(shù)
JavaScript 可以將函數(shù)作為數(shù)據(jù)使用。作為函數(shù)本體,它與普通的數(shù)據(jù)一樣,不一定有名字。沒有名字的函數(shù)被稱之為匿名函數(shù)。
示例代碼如下:
//匿名函數(shù) function(){ //匿名函數(shù),會報(bào)錯(cuò) return '一碗周'; }
但是在 JavaScript 并不支持匿名函數(shù)的語法,不過匿名函數(shù)有兩個(gè)應(yīng)用,如下所示:
回調(diào)函數(shù):將一個(gè)函數(shù)作為另一個(gè)函數(shù)的參數(shù)使用,作為參數(shù)的函數(shù)
自調(diào)函數(shù):函數(shù)調(diào)用自身(定義即調(diào)用的函數(shù))
回調(diào)函數(shù)
然函數(shù)與任何可以被賦值給變量的數(shù)據(jù)是相同的,那么它當(dāng)然可以像其他數(shù)據(jù)那樣被定義、刪除、拷貝,以及當(dāng)成參數(shù)傳遞給其他函數(shù)。
當(dāng)一個(gè)函數(shù)作為參數(shù)傳遞給另一個(gè)函數(shù)時(shí),作為參數(shù)的函數(shù)被稱之為回調(diào)函數(shù)。作為使用回調(diào)函數(shù)的函數(shù)稱為目標(biāo)函數(shù)(外層函數(shù))
示例代碼如下所示
// 定義一個(gè)函數(shù),這個(gè)函數(shù)有兩個(gè)函數(shù)類型的參數(shù),然后分別執(zhí)行那兩個(gè)函數(shù),并返回它們的和。 function sum(a, b) { // -> 目標(biāo)函數(shù) return a() + b() } function one() { // -> 回調(diào)函數(shù) return 1; } function two() { // -> 回調(diào)函數(shù) return 2; } console.log(sum(one, two)); // 3
執(zhí)行流程如下:
當(dāng)執(zhí)行 sum
函數(shù)時(shí),傳入兩個(gè)實(shí)參,在 sum
函數(shù)中,會將兩個(gè)實(shí)參作為函數(shù)執(zhí)行,并將返回值計(jì)算并返回。
匿名回調(diào)函數(shù)
所謂匿名回調(diào)函數(shù),就是目標(biāo)函數(shù)中的參數(shù)是沒有名稱的函數(shù),將上一段代碼修改為使用匿名回調(diào)函數(shù)
// 定義一個(gè)函數(shù),這個(gè)函數(shù)有兩個(gè)函數(shù)類型的參數(shù),然后分別執(zhí)行那兩個(gè)函數(shù),并返回它們的和。 function sum(a, b) { // -> 目標(biāo)函數(shù) return a() + b() } console.log(sum( function () { // -> 匿名回調(diào)函數(shù) return 1 }, function () { // -> 匿名回調(diào)函數(shù) return 2 })); // 3
帶參數(shù)的回調(diào)函數(shù)
function multiplyByTwo(a, b, c, callbakc) { var i, ar = [] for (i = 0; i < 3; i++) { // 通過 arguments 對象將傳入的參數(shù) * 2,然后傳入回調(diào)函數(shù)進(jìn)行操作 ar[i] = callbakc(arguments[i] * 2); } return ar; } console.log(multiplyByTwo(1, 2, 3, function (a) { // 匿名回調(diào)函數(shù) return a + 2 }));
回調(diào)函數(shù)的優(yōu)點(diǎn):
匿名回調(diào)函數(shù)節(jié)省了全局命名空間
將私有的數(shù)據(jù)內(nèi)容開放給指定位置使用
保證封裝性 - 雖然可以使用私有數(shù)據(jù),但是并不知道來源
有助于提升性能
但是回調(diào)函數(shù)也是有缺點(diǎn)的,當(dāng)目標(biāo)函數(shù)的參數(shù)是一個(gè)回調(diào)函數(shù)時(shí),回調(diào)函數(shù)的參數(shù)又是另一個(gè)回調(diào)函數(shù),另一個(gè)回調(diào)函數(shù)的參數(shù)還是一個(gè)回調(diào)函數(shù)…也就是套娃,也就形成了回調(diào)陷阱或稱回調(diào)地獄。
自調(diào)函數(shù)
目前我們已經(jīng)討論了匿名函數(shù)在回調(diào)方面的應(yīng)用。接下來我們討論另外一種情況,即自調(diào)函數(shù),這種函數(shù)可以在定義后立即調(diào)用。示例代碼如下所示
( function () { console.log("自調(diào)函數(shù)"); } )()
這種語法看上去有點(diǎn)唬人,其實(shí)沒有什么,我們只需將匿名函數(shù)的定義放進(jìn)一對括號中,然后外面再緊跟一對括號即可。
語法結(jié)構(gòu)如下圖所示
值得注意的是,自調(diào)函數(shù)可以命名,但是還是會自調(diào)用,如果用函數(shù)名調(diào)用的話會拋出異常。
自調(diào)函數(shù)除了以上兩種方式外,還有以下幾種不常用的方式
+ function (v) { // 形參 var w = 100; // 局部變量 console.log("自調(diào)函數(shù)" + v); }(1);// 實(shí)參 ! function (v) { var w = 100; // 局部變量 console.log("自調(diào)函數(shù)" + v); }(2); ~ function (v) { var w = 100; // 局部變量 console.log("自調(diào)函數(shù)" + v); }(3);
使用即時(shí)自調(diào)匿名函數(shù)的好處是不會產(chǎn)生任何全局變量。
缺點(diǎn)在于這樣的函數(shù)是無法重復(fù)執(zhí)行的(除非將它放在某個(gè)循環(huán)或其他函數(shù)中)。這也使得即時(shí)函數(shù)非常適合于執(zhí)行一些一次性的或初始化的任務(wù)。
作為值的函數(shù)
將一個(gè)函數(shù)作為另一個(gè)函數(shù)的結(jié)果并返回,作為結(jié)果返回的函數(shù)稱之為作為值的函數(shù)。
示例代碼如下:
function outer() { var v = 100; // 在函數(shù)的函數(shù)體中定義另一個(gè)函數(shù) -> 內(nèi)部(私有)函數(shù) return function () { // 使用匿名函數(shù) return v * 2 } } var result = outer(); console.log(result); // [Function] // 或者下面這種方式與上面那種方式相同 function outer1() { var v = 100; // 在函數(shù)的函數(shù)體中定義另一個(gè)函數(shù) -> 內(nèi)部(私有)函數(shù) function inner() { return v * 2 } return inner } var result1 = outer1(); console.log(result1); // [Function: inner]
這樣做的好處是:
有助于我們確保全局名字空間的純凈性(這意味著命名沖突的機(jī)會很?。?。
確保私有性 — 這使我們可以選擇只將一些必要的函數(shù)暴露給“外部世界”,而保留屬于自己的函數(shù),使它們不為該應(yīng)用程序的其他部分所用。
到此這篇關(guān)于JavaScript中的特殊函數(shù)的文章就介紹到這了,更多相關(guān)js特殊函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS highcharts動態(tài)柱狀圖原理及實(shí)現(xiàn)
這篇文章主要介紹了JS highcharts動態(tài)柱狀圖原理及實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10

微信小程序下拉刷新組件加載圖片(三個(gè)小點(diǎn))不顯示刷新狀態(tài)的問題

JavaScript棧和隊(duì)列相關(guān)操作與實(shí)現(xiàn)方法詳解

javascript顯式類型轉(zhuǎn)換實(shí)例分析