0%

JS核心-(36)-函式以及This的運作-閉包 Closure

前言

閉包的概念:函式包函式,並且在子函式中調用父函式的變數,避免父函式的變數在沒有任何參照的情況下被釋放掉。

閉包

function storeMoney() {
    var money = 1000;
    return function (price) {
        money = money + price;
        return money;
    }
}

console.log(storeMoney());
console.log(storeMoney()(100));

我們直接來看範例,如果是這樣的話,兩個 console.log 會印出甚麼呢?

第一個印出的是我們 return 的匿名函式,也就是說 storeMoney( ) 變成一個表達式,他回傳的值是我們定義的匿名函式。

而第二個我們再透過 ( ),並傳入數字去執行剛剛定義的匿名函式執行了 1000 + 傳入的數字後,他會再把總和回傳回來,

所以得到 1100 的結果,這樣的狀況就稱為閉包。

然而閉包還有一個常見的應用如下

function storeMoney() {
    var money = 1000;
    return function (price) {
        money = money + price;
        return money;
    }
}

var odinMoney = storeMoney();
console.log(odinMoney(100)); // 1100
console.log(odinMoney(100)); // 1200
console.log(odinMoney(100)); // 1300

會造成這樣累加的結果是因為父元素的 money 變數沒有消失,一直被子函式給參照著,所以金額就不斷地累加上去。

更特別的是下面這個狀況

function storeMoney() {
    var money = 1000;
    return function (price) {
        money = money + price;
        return money;
    }
}

var odinMoney = storeMoney();
console.log(odinMoney(100)); // 1100
console.log(odinMoney(100)); // 1200
console.log(odinMoney(100)); // 1300

var jayMoney = storeMoney();
console.log(jayMoney(1000)); // 2000
console.log(jayMoney(1000)); // 3000
console.log(jayMoney(1000)); // 4000

如果重新宣告一個變數 jayMoney ,他還可以同時分別累積不同的金額。