JS 闭包(Closure) DAY63

闭包(Closure)

可以让资源的记忆体不被释放，让外部能重复执行

function storeMoney(){
    var money = 100;
    // 这里子函式我们假设名称 func
    return function(price){
        money = money + price;
        return money;
    }
}
// 因 func 的 money 会因范围练而像外层寻找
// 所以 storeMoney() 的 money变数会保留，不会释放记忆体
console.log(storeMoney()); // 子函式
console.log(storeMoney()(100)); // 200 (执行完就结束了，直接释放记忆体)
console.log(storeMoney()(100)); // 200 (执行完就结束了，直接释放记忆体)
console.log(storeMoney()(100)); // 200 (执行完就结束了，直接释放记忆体)

function storeMoney(){
    var money = 100;
    return function(price){
        money = money + price;
        return money;
    }
}
// 因 子函式 的 money 会因范围练而像外层寻找
// 所以 storeMoney() 的 money变数会保留，不会释放记忆体
console.log(storeMoney()); // 子函式
console.log(storeMoney()(100)); // 200 (执行完就结束了，直接释放记忆体)
console.log(storeMoney()(100)); // 200 (执行完就结束了，直接释放记忆体)
console.log(storeMoney()(100)); // 200 (执行完就结束了，直接释放记忆体)

// 为什麽可以一直累加??
// MingMoney变数 接收子函式结果，而子函式会一直取用父函式(storeMoney)的 money 
// 导致 storeMoney 函式里第 2 行的 money 不断地改变数字

// 而为什麽 storeMoney 函式里第 2 行的 money 不会被记忆体释放??
// MingMoney变数 会因范围练而像外层寻找 ， 所以"参照" storeMoney 函式里第 2 行的 money 
// 故串连起来，外界跟外层 storeMoney 变的有关联
var MingMoney = storeMoney(); 
console.log(MingMoney(1000)); // 1100
console.log(MingMoney(1000)); // 2100
console.log(MingMoney(1000)); // 3100

var JayMoney = storeMoney(); 
console.log(JayMoney(1000)); // 1100
console.log(JayMoney(1000)); // 2100
console.log(JayMoney(1000)); // 3100

工厂模式及私有方法

我们先来看一个例子

function arrFunction(){
    var arr = [];
    for(var i = 0 ; i < 3 ; i++){
        arr.push(function(){
            console.log(i); // 是取函式作用域的 i ，但这时 i 为 3 
        })
    }
    console.log('i' + i); // 3 
    return arr;
}
var fn = arrFunction();
fn[0]();
fn[1]();
fn[2]();

解决方法(2种)
利用 立即函式 限制作用域

function arrFunction(){
    var arr = [];
    for(var i = 0 ; i < 3 ; i++){
        (function(j){
            arr.push(function(){
                console.log(j); // 0 1 2
            })
        }(i))
    }
    return arr;
}
var fn = arrFunction();
fn[0]();
fn[1]();
fn[2]();

JS ES6 let

function arrFunction(){
    var arr = [];
    for(let i = 0 ; i < 3 ; i++){
        arr.push(function(){
            console.log(i); // 0 1 2
        })
    }
    return arr;
}
var fn = arrFunction();
fn[0]();
fn[1]();
fn[2]();

函式工厂

function storeMoney(init){
    var money = init || 100;
    return function(price){
        money = money + price;
        return money;
    }
}
var myMoney = storeMoney(100);
console.log(myMoney(500)); // 600

私有方法

function storeMoney(init){
    var money = init || 100;
    return {
        increase: function(price){
            money += price ;
        },
        decrease: function(price){
            money -= price;
        },
        value: function(){
            return money
        }
    }
}
var myMoney = storeMoney(500);
myMoney.increase(1000);
myMoney.increase(1000);
myMoney.increase(1000);
myMoney.decrease(500);
myMoney.decrease(500);
console.log(myMoney.value()); // 2500

那今天的介绍就到这里
若有任何问题 或 内容有误
都可以跟我说唷