[Back To Basic] Javascript - Function Closures

閉包(Closures)

• javascript 變數只有全域變數和區域變數二種
• 閉包(closures)可以讓全域變數變成區域變數

function 和 變數的關係

• function 可以使用所有在內部宣告的變數
• function 也可以使用所有在外部宣告的全域變數
• 不使用 var 宣告的變數，一律被視為全域變數，無論在 function 內或外

問題

• 用全域變數記

var count = 0;

function myAdd1() {

    var count = 0;

    count += 1;

}

myAdd1();

myAdd1();

myAdd1();

var show = count1; // count 想要顯示 3, 但結果 count = 0, 因為這邊的 count 是全域變數

• 用區域變數記

function myAdd2() {

    var count = 0;

    count += 1;

    return count;

}

var show = myAdd2(); // count 想要顯示 1,2,3..., 但結果 count = 1,1,1...

解決步驟

• 1. 建立巢狀 function，額外形成，上下關係作用域

function myAdd3() {

    var count = 0;

    function plus() {

        count += 1;

    }

    plus();

    return count;

}

• 2. 為了讓 var count = 0; 只執行一次，使用匿名自我呼叫函式(anonymous self-invoking function)

var myAdd4 = (function () {

    var count = 0;

    return function () {

        count += 1;

        return count;

    }

})()

myAdd4(); // count = 1

myAdd4(); // count = 2

myAdd4(); // count = 3

說明

宣告 var myAdd4 為立即函式時

• count = 0 立刻執行，且只執行一次
• myAdd4 被指定為 

function () {

    count += 1;

    return count;

}

• 使用 myAdd4()，仍然可以變更 count 的值 <--- 這一連串的設計方式被稱為閉包
• 也讓 count 成功地變成 private 變數
• count 被 匿名函式的作用域(the scope of the anonymous function) 保護起來 <--- 目的達成

閉包特性: 閉包是一個，可以在父作用域(parent scope)被關閉時持續訪問(access)的 function

source code