【js】js閉包的10種表現形式

1.返回值

var fn = function() {
    var name = function() {
        var name = 'lzx';
        return function() {
            return name;
        }
    }
}

2.函數賦值, 將內部函數賦值給外部變量

var fn2;
var fn = function() {
    var name = 'lzx';
    fn2 = function(){
        return name;
    }
}
fn();
console.log(fn2());

3.函數參數(高階函數)

function fn2(fn){
    console.log(fn());
}

function fn() {
    var name = 'lzxx';
    fn2(function() {
        return name;
    });
}
fn();

4.IIFE

function fn3(fn){
    console.log(fn());
}
(function(){
    var name = 'lll';
    var a = function() {
        return name;
    };
    fn3(a)
})()

5.循環賦值

function fn5() {
    var arr = [];
    for(var i=0; i<10; i++) {
        arr[i] = (function(n){
            return function(){
                return n;
            }
        })(i)
    }
    return arr;
}

6.getter和setter

var setVal, getVal;
(function(){
    var num = 0;
    getVal = function(){
        return num;
    };
    setVal = function(n) {
        num = n;
    }
})()

7.迭代器

var add = (function() {
    var num = 0;
    return function(){
        return ++num;
    }
})()
console.log(add());
console.log(add());

8.區分是否首次的場景

var isFirstLoad = (function(){
    var list = [];
    return function(id){
        if(list.indexOf(id) > -1){
            return false;
        } else {
            list.push(id);
            return true
        }
    }
})()

9.緩存

var mult = function(){
    var _arguments = arguments;
    var cash = {};
    var calc = function() {
        var sum = 0;
        for(var i=0; i<_arguments.length; i++){
            sum += _arguments[i];
        }
        return sum;
    }
    return function() {
       var args = Array.prototype.join.apply(_arguments);
       if(args in cash){
           return cash[args];
       }
       return cash[args] = calc(_arguments);
    }
};

10.img對象圖片上報;低版本ie瀏覽器會丟失上傳的數據,原因是代碼執行了完了,變量也隨之刪除,使用閉包將變量保存在內存中

var report = function(url) {
    var imgs = [];
    return function(url) {
        var img = new Image();
        imgs.push(img);
        img.src = url;
    }
}();
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章