美文网首页
三类闭包实例理解闭包为什么会占用内存以及如何让闭包不占用内存

三类闭包实例理解闭包为什么会占用内存以及如何让闭包不占用内存

作者: 砖用冰西瓜 | 来源:发表于2017-06-25 22:22 被阅读243次

    在试图弄清这个问题之前,先要理解栈内存、堆内存和预处理

    占用内存,不会销毁的闭包实例

    例1:

    var num = 12;
    function fn() {
        var num = 100;
        return function () {
            console.log(num);
        }
    }
    var f = fn();
    f();
    

    例1的图示

    未被占用的堆内存才会被销毁

    所以,正如图中椭圆形关键点中说明的那样,堆内存xxxfff111被返回给了全局变量f,而全局变量只有在窗口关闭的时候才会销毁,因此堆内存xxxfff111将一直被占用而不会销毁,定义它的局部作用域A也不会被销毁。

    例2

    var oDiv = document.getElementById("div1");
    ~function() {
        oDiv.onclick = function() {
    
        }
    }();
    

    这段代码的特点是:私有作用域给DOM元素的事件绑定一个方法。

    例2的图示:

    正如图中椭圆形关键点所说,标签对象的属性里面会自带一个onclick的属性,未被赋值时其值为null。那么,在自执行函数执行的时候,其创建的作用域所占用的堆内存xxxfff111同样也会被全局的堆内存xxxfff000占用(这里要注意,是堆内存占用堆内存),所以堆内存xxxfff111和栈内存A都不会被销毁。

    不占用内存,立即销毁的实例

    只需要将例1稍作修改。

    例3:

    function fn(){
        var num = 100;
        return function(){
            console.log(num);
        }
    }
    fn();   //主要修改在这里
    

    例3的图示

    由于在函数fn中,xxxfff111是被return的,所以栈内存A的预解释不会处理xxxfff111,它只在fn函数执行的时候才会生成,而函数fn的栈内存A每次被执行之后都会被销毁。

    暂时占用内存,延时销毁的闭包实例

    将例3稍作修改,就变成了延时销毁的闭包实例。

    例4:

    function fn(){
      var num = 100;
      return function(){
    
      }
    }
    fn()(); //这里到底发生了什么?其实是执行了一次fn之后,把返回的子函数有执行了一次,所以在子函数执行的时候,栈内存fn()是不能销毁的,但是子函数执行完毕后因为没有被占用,所以最终还是要被销毁的,所以最终fn()还是会被销毁的。
    

    例4的图示:

    正如途中椭圆形关键点处所说,fn()()的意思是在执行完fn()之后再把返回的值函数执行一遍。因此在子函数执行的时候,堆内存xxxfff111被占用了,相应的栈内存A也将保留。

    可堆内存xxxfff111中保存的子函数在执行完成之后还是会被销毁,接着堆内存xxxfff111就作为未被占用的堆内存而被销毁,最终栈内存A也会被销毁。

    所以,栈内存在执行完之后会被保留一段时间,这段时间等于其子函数执行的时间。

    参考资料:

    JavaScript高级程序设计(第三版)。

    相关文章

      网友评论

          本文标题:三类闭包实例理解闭包为什么会占用内存以及如何让闭包不占用内存

          本文链接:https://www.haomeiwen.com/subject/qgorcxtx.html