JavaScript之匿名函數(shù)

avaScript中除了自定義函數(shù)之外，還有匿名函數(shù)？什么是匿名函數(shù)？

1. 匿名函數(shù)：沒(méi)有函數(shù)名稱(chēng)的函數(shù)。

如：定義一個(gè)匿名函數(shù)，打印5個(gè)星星。

function (){ //沒(méi)有函數(shù)名稱(chēng)

for(var i=0;i<5;i++){

document.write("*");

}

</script>

2. 調(diào)用匿名函數(shù)有2種方法：

（1）通過(guò)變量名調(diào)用匿名函數(shù)可以理解為將整個(gè)匿名函數(shù)瀆職給一個(gè)變量

然后在body標(biāo)簽中，定義一個(gè)按鈕：

（2） 事件名調(diào)用匿名函數(shù)

同樣在在body標(biāo)簽中，先定義一個(gè)按鈕：注意在input標(biāo)簽中我們不通過(guò)onclick來(lái)調(diào)用匿名函數(shù)

然后我們通過(guò)2個(gè)事件調(diào)用2個(gè)匿名函數(shù)：

注意：window.onload：頁(yè)面加載時(shí)觸發(fā)的事件，這里也就是頁(yè)面加載進(jìn)來(lái)調(diào)用第一匿名函數(shù)

document.getElementById("btn")：獲取id為btn的元素，也就是將按鈕獲取過(guò)來(lái)；document.getElementById("btn").onclick：點(diǎn)擊按鈕時(shí)，觸發(fā)第二個(gè)匿名函數(shù)

一節(jié) 幫你精通JavaScript：簡(jiǎn)單求積分的方法中，我們分享了應(yīng)用抽象的sum函數(shù)近似求pi值的方法：

求pi的序列

function pi_sum(a, b) {
    function pi_term(x) {
        return 1 / (x * (x+2));
    }
    function pi_next(x) {
        return x + 4;
    }
    return sum(pi_term, a, pi_next, b);
}
//該函數(shù)收斂于pi/8

此案例中，我們不得不一本正經(jīng)的寫(xiě)出兩個(gè)“微不足道”的函數(shù)的定義，pi_term與pi_next，只為能在sum函數(shù)中順利的調(diào)用。如果不繁瑣費(fèi)力的逐個(gè)定義，而只用其數(shù)學(xué)關(guān)系，豈不妙哉。

Lambda-Expression應(yīng)運(yùn)而生，pi_term與pi_next可被直接寫(xiě)為：

x=> x + 4 //pi_next
x=> 1 / (x * (x + 2)) //pi_term

此語(yǔ)法簡(jiǎn)潔優(yōu)美，輸入 x 然后輸出所得值，用lambda-function重新撰寫(xiě)pi_sum函數(shù)：

function pi_sum(a, b) {
    return sum(x=> 1 / (x * (x + 2)),
               a,
               x=> x + 4,
               b);
}

匿名函數(shù)的語(yǔ)法為：

(parameters=> expression)

匿名函數(shù)與define的函數(shù)是等效的，比如：

function plus4(x) {
  return x + 4;
}
//等效于
const plus4=(x=> x + 4); //加上括號(hào)，視覺(jué)上更加清晰

函數(shù)的調(diào)用也是相同的：

((x, y, z)=> x + y + square(z))(1, 2, 3);

從直覺(jué)上，我們可以將lambda-function的語(yǔ)法逐步拆解：

從了解js通過(guò)canvas壓縮圖片上傳功能以后，小白對(duì)javascript的敬畏之心又提升了一大截，這兩天在練習(xí)的時(shí)候發(fā)現(xiàn)自己平時(shí)熟悉的代碼變得陌生起來(lái)，比如為什么定義函數(shù)時(shí)這兩個(gè)方式都可以用。

帶著這個(gè)疑問(wèn)，小白找到了老朱?！爸旄?，為啥在js里面要用兩種定義函數(shù)的方式呢？”

老朱：“嚴(yán)格意義上來(lái)說(shuō)上面那個(gè)不是定義一個(gè)函數(shù)，而是將一個(gè)變量指向了一個(gè)匿名函數(shù)，這里是引用的關(guān)系。你可以控制臺(tái)輸出一下兩個(gè)函數(shù)名看看。”

小白執(zhí)行了一下輸出以后驚訝的說(shuō)道：“果然不一樣啊，一個(gè)有函數(shù)名，一個(gè)沒(méi)有函數(shù)名?！?/p>

老朱：“在js中匿名函數(shù)用處非常大，這幾天我們寫(xiě)的代碼里面有很多的匿名函數(shù)，你可以找找?！?/p>

小白：“哇，隨便翻了一下昨天的代碼里面就有匿名函數(shù)啊。這段點(diǎn)擊按鈕上傳圖片的代碼中就有兩個(gè)?！?/p>

老朱：“匿名函數(shù)非常有個(gè)特點(diǎn)，匿名函數(shù)如果沒(méi)有被引用，用完后會(huì)被銷(xiāo)毀，也就是垃圾回收釋放內(nèi)存。如果被引用，而引用它的那個(gè)變量一直在內(nèi)存中，它指向的匿名函數(shù)就會(huì)一直存在，不會(huì)被銷(xiāo)毀。比如上面的代碼中click里面的匿名函數(shù)沒(méi)有被引用，用完后會(huì)被銷(xiāo)毀，匿名函數(shù)中的success指向的匿名函數(shù)被引用，只有success被銷(xiāo)毀時(shí)，這個(gè)匿名函數(shù)才會(huì)被回收。垃圾回收這塊說(shuō)起來(lái)會(huì)比較復(fù)雜，我們有時(shí)間詳細(xì)聊聊。”

老朱頓了一下接著說(shuō)道：“之前我們用到的匿名函數(shù)基本都用在了參數(shù)傳遞和引用上，在js中匿名函數(shù)還有一個(gè)非常重要的用法就是在頁(yè)面加載以后執(zhí)行一個(gè)匿名函數(shù)。”

“這個(gè)函數(shù)在頁(yè)面加載后會(huì)立即執(zhí)行，如果函數(shù)有參數(shù)，可以通過(guò)最后面的小括號(hào)進(jìn)行傳參。如果這個(gè)頁(yè)面被其他頁(yè)面加載調(diào)用，這里的匿名函數(shù)被加載以后就會(huì)立即執(zhí)行，由于匿名函數(shù)中我們使用了var進(jìn)行變量定義，因此匿名函數(shù)中的變量不會(huì)與主頁(yè)面中的變量沖突，匿名函數(shù)執(zhí)行結(jié)束以后內(nèi)部的變量也會(huì)被銷(xiāo)毀，不會(huì)占用內(nèi)存?！?/p>

“另外如果你的頁(yè)面中引入很多其他js文件，為了避免變量沖突，也需要在頁(yè)面中使用上面的匿名函數(shù)來(lái)規(guī)避風(fēng)險(xiǎn)?！?/p>

想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白HTML5成長(zhǎng)之路》的動(dòng)力！

在線咨詢(xún)

上一篇：全球足跡：用GoAccess繪制訪問(wèn)地圖
下一篇：Clappr 一個(gè)可擴(kuò)展的網(wǎng)絡(luò)媒體播放器

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

JavaScript之匿名函數(shù)

您的項(xiàng)目需求