本篇主要介紹普通函式、匿名函式、閉包函式

目錄

1. 普通函式：介紹普通函式的特性：同名覆蓋、arguments物件、預設返回值等。

2. 匿名函式：介紹匿名函式的特性：變數匿名函式、無名稱匿名函式。

3. 閉包函式：介紹閉包函式的特性。

1. 普通函式

1.1 示例

function ShowName(name) {
    alert(name);
}

1.2 Js中同名函式的覆蓋

在Js中函式是沒有過載，定義相同函式名、不同引數簽名的函式，後面的函式會覆蓋前面的函式。呼叫時，只會呼叫後面的函式。

var n1 = 1;

function add(value1) {
    return n1 + 1; 
}
alert(add(n1));//呼叫的是下面的函式，輸出：3

function add(value1, value2) {
    return value1 + 2;
}
alert(add(n1));//輸出：3

1.3 arguments物件

arguments 類似於C#的params，操作可變引數：傳入函式的引數數量大於定義時的引數數量。

function showNames(name) {
    alert(name);//張三
    for (var i = 0; i < arguments.length; i++) {
        alert(arguments[i]);//張三、李四、王五
    }
}
showNames('張三','李四','王五');

1.4 函式的預設返回值

若函式沒有指明返回值，預設返回的是'undefined'

function showMsg() {
}
alert(showMsg());//輸出：undefined

2.匿名函式

2.1 變數匿名函式

2.1.1 說明

可以把函式賦值給變數、事件。

2.1.2 示例

//變數匿名函式，左側可以為變數、事件等
var anonymousNormal = function (p1, p2) { 
    alert(p1+p2);
}
anonymousNormal(3,6);//輸出9

2.1.3 適用場景

①避免函式名汙染。若先宣告個帶名稱的函式，再賦值給變數或事件，就造成了函式名的濫用。

2.2 無名稱匿名函式

2.2.1 說明

即在函式宣告時，在後面緊跟引數。Js語法解析此函式時，裡面程式碼立即執行。

2.2.2 示例

(function (p1) {
    alert(p1);
})(1);

2.2.3 適用場景

①只需執行一次的。如瀏覽器載入完，只需要執行一次且後面不執行的功能。

3. 閉包函式

3.1 說明

 假設，函式A內部聲明瞭個函式B，函式B引用了函式B之外的變數，並且函式A的返回值為函式B的引用。那麼函式B就是閉包函式。

3.2 示例

3.2.1 示例1：全域性引用與區域性引用

function funA() {
    var i = 0;
    function funB() { //閉包函式funB
        i++;
        alert(i)
    }
    return funB;
}
var allShowA = funA(); //全域性變數引用：累加輸出1,2,3,4等

function partShowA() {
    var showa = funA();//區域性變數引用：只輸出1
    showa();
}

allShowA是個全域性變數，引用了函式funA。重複執行allShowA()，會輸出1,2,3,4等累加的值。

執行函式partShowA(),因為內部只聲明瞭區域性變數showa來引用funA，執行完畢後因作用域的關係，釋放showa佔用的資源。

閉包的關鍵就在於作用域：全域性變數佔有的資源只有當頁面變換或瀏覽器關閉後才會釋放。var allShowA = funA() 時，相當於allShowA引用了funB()，從而使funB()裡的資源不被GC回收，因此funA()裡的資源也不會。

3.2.2 示例2：有參閉包函式

function funA(arg1,arg2) {
    var i = 0;
    function funB(step) {
        i = i + step;
        alert(i)
    }
    return funB;
}
var allShowA = funA(2, 3); //呼叫的是funA arg1=2，arg2=3
allShowA(1);//呼叫的是funB step=1,輸出 1
allShowA(3);//呼叫的是funB setp=3,輸出 4

3.2.3 示例3：父函式funA內的變數共享

function funA() {
    var i = 0;
   function funB() {
        i++;
        alert(i)
    }
    allShowC = function () {// allShowC引用匿名函式,與funB共享變數i
        i++;
        alert(i)
    }
    return funB;
}
var allShowA = funA(); 
var allShowB = funA();//allShowB引用了funA，allShowC在內部重新進行了繫結，與allShowB共享變數i

3.3 適用場景

①保證函式funA內裡的變數安全，因為外部不能直接訪問funA的變數。