淺談 JavaScript function 函數(shù)種類

本篇主要介紹普通函數(shù)、匿名函數(shù)、閉包函數(shù)

普通函數(shù)介紹

示例

[js] view plaincopy
function ShowName(name) {  

    alert(name);  

}  

Js 中同名函數(shù)的覆蓋

在 Js 中函數(shù)是沒有重載，定義相同函數(shù)名、不同參數(shù)簽名的函數(shù)，后面的函數(shù)會覆蓋前面的函數(shù)。調(diào)用時(shí)，只會調(diào)用后面的函數(shù)。

[js] view plaincopy
var n1 = 1;  

function add(value1) {  

    return n1 + 1;  

}  

alert(add(n1));//調(diào)用的是下面的函數(shù)，輸出：3  

function add(value1, value2) {  

    return value1 + 2;  

}  

alert(add(n1));//輸出：3  

arguments 對象

arguments 類似于 C# 的 params，操作可變參數(shù)：傳入函數(shù)的參數(shù)數(shù)量大于定義時(shí)的參數(shù)數(shù)量。

[js] view plaincopy
function showNames(name) {  

    alert(name);//張三  

    for (var i = 0; i < arguments.length; i++) {  

        alert(arguments[i]);//張三、李四、王五  

    }  

}  

showNames('張三','李四','王五');  

函數(shù)的默認(rèn)范圍值

若函數(shù)沒有指明返回值，默認(rèn)返回的是 'undefined'

[js] view plaincopy
function showMsg() {  

}  

alert(showMsg());//輸出：undefined  

匿名函數(shù)

變量匿名函數(shù)

說明

可以把函數(shù)賦值給變量、事件。

示例

[js] view plaincopy
//變量匿名函數(shù)，左側(cè)可以為變量、事件等  

var anonymousNormal = function (p1, p2) {  

    alert(p1+p2);  

}  

anonymousNormal(3,6);//輸出9  

適用場景

①避免函數(shù)名污染。若先聲明個(gè)帶名稱的函數(shù)，再賦值給變量或事件，就造成了函數(shù)名的濫用。

無名稱匿名函數(shù)

說明

即在函數(shù)聲明時(shí)，在后面緊跟參數(shù)。Js 語法解析此函數(shù)時(shí)，里面代碼立即執(zhí)行。

示例

[js] view plaincopy
(function (p1) {  

    alert(p1);  

})(1);  

適用場景

①只需執(zhí)行一次的。如瀏覽器加載完，只需要執(zhí)行一次且后面不執(zhí)行的功能。

閉包函數(shù)

說明

假設(shè)，函數(shù)A內(nèi)部聲明了個(gè)函數(shù)B，函數(shù)B引用了函數(shù) B 之外的變量，并且函數(shù) A 的返回值為函數(shù)B 的引用。那么函數(shù)B就是閉包函數(shù)。

示例

示例1：全局引用與局部引用

[js] view plaincopy
function funA() {  

    var i = 0;  

    function funB() { //閉包函數(shù)funB  

        i++;  

        alert(i)  

    }  

    return funB;  

}  

var allShowA = funA(); //全局變量引用：累加輸出1,2,3,4等  

function partShowA() {  

    var showa = funA();//局部變量引用：只輸出1  

    showa();  

}  

allShowA 是個(gè)全局變量，引用了函數(shù) funA。重復(fù)運(yùn)行 allShowA()，會輸出 1,2,3,4 等累加的值。

執(zhí)行函數(shù) partShowA(),因?yàn)閮?nèi)部只聲明了局部變量 showa 來引用 funA，執(zhí)行完畢后因作用域的關(guān)系，釋放 showa 占用的資源。

閉包的關(guān)鍵就在于作用域：全局變量占有的資源只有當(dāng)頁面變換或?yàn)g覽器關(guān)閉后才會釋放。var allShowA = funA() 時(shí)，相當(dāng)于 allShowA 引用了 funB()，從而使 funB() 里的資源不被GC 回收，因此 funA() 里的資源也不會。

示例2：有參閉包函數(shù)

[js] view plaincopy
function funA(arg1,arg2) {  

    var i = 0;  

    function funB(step) {  

        i = i + step;  

        alert(i)  

    }  

    return funB;  

}  

var allShowA = funA(2, 3); //調(diào)用的是funA arg1=2，arg2=3  

allShowA(1);//調(diào)用的是funB step=1,輸出 1  

allShowA(3);//調(diào)用的是funB setp=3,輸出 4  

示例3：父函數(shù) funA 內(nèi)的變量共享

[js] view plaincopy
function funA() {  

    var i = 0;  

   function funB() {  

        i++;  

        alert(i)  

    }  

    allShowC = function () {// allShowC引用匿名函數(shù),與funB共享變量i  

        i++;  

        alert(i)  

    }  

    return funB;  

}  

var allShowA = funA();  

var allShowB = funA();//allShowB引用了funA，allShowC在內(nèi)部重新進(jìn)行了綁定，與allShowB共享變量i  

適用場景

①保證函數(shù) funA 內(nèi)里的變量安全，因?yàn)橥獠坎荒苤苯釉L問 funA 的變量。

小伙伴們是否對 javascript 的 function 函數(shù)有所了解了呢，有疑問就給我留言吧。