闭包

如何产生闭包(closure)?

当一个嵌套的内部函数引用了嵌套的外部函数的变量时,就产生了闭包

常见的闭包使用形式?

1.将函数作为另一个函数的返回值

2.将函数的形参作为实参传递给另一个函数调用

-------------------------------------------------------------------------------------------------------------

缺点:函数执行完后,函数内的局部变量没有被释放,占用内存时间会变长,容易造成内存泄露

常见的内存泄露:

1.占用内存很大的全局变量

2.没有及时清理的计时器/定时器

3.闭包

 

 

写个闭包的例子

function f1(){
    var n = 99
    onadd = function(){n+=1}
    function f2(){
        alert(n)
    }
    return f2
}

var res = f1()
res()
onadd()
res()

写个闭包传递参数的例子 

function say(words){
   return function(){
       alert(words)
   }
}   
setTimeout(say("hello world"),1000);
setTimeout(say("hello world 你好!"),5000); 

函数节流 (将函数的形参作为实参传递给另一个函数调用)

window.onresize = throttle(function () {
    console.log(‘大家好~~~’)    
}, 200)

function throttle(fn, delay) {
   var timer = null
   return function() {
       clearTimeout(timer)
       timer = setTimeout(fn, delay)  
    }                
}

 

模拟静态私有变量

var Class2 = (function(){
       var s_var = 0;      //静态私有变量
       return function(){
            this.getInstanceCount = function(){
                return s_var; 
            }
           //constructor
          s_var++;  
       }
   })()
   
   var cls1 = new Class2();
   console.log(cls1.getInstanceCount());   //1
   
   var cls2 = new Class2();
   console.log(cls1.getInstanceCount());   //2
   console.log(cls2.getInstanceCount());   //2
   
   var cls3 = new Class2();
   console.log(cls1.getInstanceCount());   //3
   console.log(cls3.getInstanceCount());   //3

  在这个例子中,我们用s_var记录Class2被实例化的次数,使用闭包,我们可以将s_var模拟为一个静态私有变量,每次Class2被实例化的时候将s_var加1。

上例中我们使用了这样形式的一段代码,其中定义在外层函数内,内层函数外的成员类似于静态成员。所以这样形式的代码我们可以把他叫做“静态封装环境”

(function(){     
  return function(){ }; 
})()

 

使用闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,

在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

代码片段:

function A(){
    var x = 1;
    return function(){
        x++
        console.log(x)
    }
}
var m1 = A();//第一次执行A函数
m1()
m1()
var m2 = A();//第二次执行A函数
m2()
m1()

 

posted @ 2018-12-27 14:04  慕斯undefined  阅读(115)  评论(0编辑  收藏  举报