淺談JavaScript function函數種類_基礎知識

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

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         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的變數。

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