闭包的作用

封装变量

// 加入缓存,调用相同参数时,直接从缓存取值,不必再进行运算
var cache = {};
var multi = (function() {
    return function() {
        var args = Array.prototype.join.call(arguments, ',');

        if (cache[args]) {
            return cache[args];
        }

        var a = 1;
        for (var i = 0, len = arguments.length; i < len; i++) {
            a = a * arguments[i]
        }

        return cache[args] = a;
    }
})()

console.log(multi(1, 2, 3));   // 6
console.log(multi(1, 2, 3));   // 6

由于cache只在multi函数被使用,可以把它封闭在multi函数内部

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

        var a = 1;
        for (var i = 0, len = arguments.length; i < len; i++) {
            a = a * arguments[i]
        }

        return cache[args] = a;
    }
})()

进一步封闭运算函数

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

    return function() {
        var args = Array.prototype.join.call(arguments, ',');

        if (cache[args]) {
            return cache[args];
        }

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

延续局部变量的寿命

var report = function() {
    var img = new Image();
    img.src = src;
}

report('http://xxx.com/getUserInfo');

在低版本浏览器中report函数进行数据上报时会丢失30%左右的数据,这是因为img是report函数的局部变量,函数执行完后,局部变量销毁,而此时可能还没来得及发出http请求,所以此次请求丢失

// 将img用闭包封装起来,防止局部变量销毁
var report = (function(){
    var imgs = [];
    return function() {
        var img = new Image();
        imgs.push(img);
        img.src = src;
    }
})()

你可能感兴趣的:(闭包的作用)