js闭包和应用

青旅半醒 2022-07-12 11:49 214阅读 0赞

## 1、闭包概念 ##

权威讲,闭包指的是内部函数即使在外部函数执行完成并终止以后，仍然可以访问其外部函数的属性。  
通俗讲，闭包就是可以访问其他函数内部数据的函数。

function sum (a,b) { 
            var add = a + b
            return function(){ 
                console.log(add) //add访问的外层函数的add
            }
        }
        sum(1,2)() // 3

但是，如果

function sum (a,b) { 
            var add = a + b
            return function(add){ //这里的add参数和上面的add不是同一变量，相当于在这里重新定义了一个add参数，没有被赋值，所以add为undefined
                console.log(add)
            }
        }
        sum(1,2)()//undefined

## 2、闭包的实际应用 ##

(1)典型应用是:jQuery框架

(function(window){ 
        var jQuery = function(){ 
            return new jQuery.fn.init()
        }
        jQuery.fn = jQuery.prototype = {
            constructor:jQuery
        }
        var init = jQuery.fn.init=function(){ }
        init.prototype = jQuery.fn
        window.jQuery = window.$ = jQuery
    })(window)
    //函数内部访问了外部window对象

(2)匿名自执行函数

(function(){ 
        var data = 'string';  (function(data){ 
        if(data){
        console.log(data);
        }
    })(data)
    })();

(3)jQuery的入口函数

$(function(){ 
    
    })

(4)求圆的面积

var Circle = {
        'PI':3.1415926,
        'r':20,
        'area':function(){ 
            return this.PI*Math.pow(this.r,2)
        }
    }
    Circle.area()

(5)缓存数据  
如在搜索框输入查询关键字，可以将已搜过的关键字缓存起来

//有问题，再调试
    var CachedSearchBox = (function(){     
                var cache = {},    
                count = [];    
                return {    
                    attachSearchValue : function(value){     
                       for(key in cache){
                            if(/value/.test(key)){
                                count.push(key)
                            }
                       }
                       if(count.length===0){
                        cache['value']=true;
                        return count.push(value)
                       }
    
                       if(count.length > 100){
       //保正缓存的大小<=100 
                        delete cache[count.shift()];    
                       }    
                       return count;          
                   },    
    
                   clearSearchBox : function(value){     
                    if('value' in cache){    
                        cache[value]=false;      
                    }    
                   }    
               };    
            })();    
    
            console.log(CachedSearchBox.attachSearchValue("input"));