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)); // 1100console.log(MingMoney(1000)); // 2100console.log(MingMoney(1000)); // 3100var JayMoney = storeMoney(); console.log(JayMoney(1000)); // 1100console.log(JayMoney(1000)); // 2100console.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

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