JavaScript进阶设计模式系列——基础篇——闭包（3）--闭包的作用

闭包的作用

通常咱们使用闭包，有两种场景。一是封装变量。二是延续局部变量的寿命。

封装变量

我们来看一段封装前的一端代码，用来实现乘法的一个函数。

封装前

var cache = {};

var mult = function () {
    var args = Array.prototype.join.call(arguments,',');
    if(cache[args]){
        return cache[args];
    }
    var a = 1;
    for(i = 0, l = arguments.length; i < l ; i ++){
        a = a * arguments[i];
    }

    return cache[args] = a;
};

console.log(mult(1,2,3));
console.log(mult(1,2,3));  //注意：此时调用的将是缓存的值，而不会进行再次计算！

注意：为了提高计算的效率，我们将重复的参数值的计算结果进行了缓存。

使用闭包封装后：

var mult = (function(){
    var cache = {};
    return function(){
        var args = Array.prototype.join.call(arguments,',');
        if(cache[args]){
            return cache[args];
        }
        var a = 1;
        for(i = 0, l = arguments.length; i < l ; i ++){
            a = a * arguments[i];
        }
        return cache[args] = a;
    }

})();

console.log(mult(1,2,3));
console.log(mult(1,2,3));

进一步优化和封装：提炼一个函数calculate

var mult =(function (){
        var cache = {};
        var calculate = function () {
            var a = 1;
            for(i = 0, l = arguments.length ; i < l ; i ++){
                a *= arguments[i];
            }
            return a ;
        }

        return function () {
            var args = Array.prototype.join.call(arguments,',');
            if(args in cache){
                return cache[args];
            }

            return cache[args] = calculate.apply(null,arguments);
        }

    }
)();
console.log(mult(1,2,3));
console.log(mult(1,2,3));

延续变量的生命周期

如同上一篇博客《闭包和生命周期》中写到的一样，该demo展示的就是延续变量生命周期的例子。