浅谈Javascript闭包中作用域及内存泄漏问题

source 发布于2019-08-20 12:28 / 483人阅读

摘要：将作用域赋值给变量这里的作用域是，而不是将作用域赋值给一个变量闭包返回浏览器中内存泄漏问题大家都知道，闭包会使变量驻留在内存中，这也就导致了内存泄漏。

上一章我们讲了匿名函数和闭包，这次我们来谈谈闭包中作用域this的问题。

大家都知道，this对象是在运行时基于函数的执行环境绑定的，如果this在全局就是[object window]，如果在对象内部就是指向这个对象，而闭包却是在运行时指向的window，因为闭包并不属于这个对象的属性和方法。
我们先来看一个例子关于全局作用域的问题:

var a = "this is window";

var box = {
    a:"this is object",
    get:function () {
        return this.a;
    }
};
alert(this.a);        //返回window.因为是全局作用域

不难看出，这个时候，this的作用域是全局的。指向的是window.结合上句话来看例子，如果在对象内部就是指向的这个对象。

var a = "this is window";

var box = {
    a:"this is object",
    get:function () {
        return this.a;
    }
};
alert(box.get());        //返回的是this is object 因为这个是box对象下的作用域

我们了解了作用域的问题。接下来我们就说说闭包中this对象作用域的问题:

var a = "this is window";

var box = {
    a:"this is object",
    get:function () {
        return function () {    //闭包
            retun this.a;    
        };
    }
};
alert(box.get()());        //返回this is window.

这就奇怪了，明明嵌套了这么多层，怎么会指向window呢，这就是闭包的机制，还是刚刚那句话：闭包却是在运行时指向的window，因为闭包并不属于这个对象的属性和方法。

那我们如何讲闭包的作用域指针指向对象内部呢？
两种方法：1.使用call()对象冒充，2.将作用域赋值给变量

/*对象冒充*/

var a = "this is window";

var box = {
    a:"this is object",
    get:function () {
        return function () {    //闭包
            retun this.a;    
        };
    }
};
alert(box.get().call(box));    //返回 this is object

使用call()传值box，将box对象冒充。从而使作用域指向box对象内部。

/*将作用域赋值给变量*/

var a = "this is window";

var box = {
    a:"this is object",
    get:function () {
    /*这里的作用域是box，而不是window*/
     var scope = this;    //将作用域赋值给一个变量
        return function () {    //闭包
            retun scope.a;    
        };
    }
};
alert(box.get()());    //返回this is object.

IE浏览器中内存泄漏问题

大家都知道，闭包会使变量驻留在内存中，这也就导致了内存泄漏。但是只是针对IE浏览器，其他浏览器不会出现这种问题.

window.onload = function () {
    function box () {
    var div = document.getElementById("div");
    div.onclick = function () {
        alert(div.innerHTML);
    };
}
box();
};

这里的互相调用会导致IE浏览器内存泄漏，因为div.onclick引用了上面的var div，他俩互相引用导致内存泄漏，解决办法就是将用完的div赋值null，等待垃圾回收

window.onload = function () {
    function box () {
    var div = document.getElementById("div");
    var a = div.innerHTML;
    div.onclick = function () {
        alert(a);
    };
    a = null;    //赋值为null，等待垃圾回收
}
box();
};

如果没有解除引用，必须等待浏览器关闭的时候才能释放！！！

关于作用域及内存泄漏的文章就到这里，欢迎老司机指正错误！

                                                                                                                   Brian Lee

云服务器 GPU云服务器浅谈javascript 闭包内存泄露内存泄漏检测内存泄漏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81002.html

图解作用域及闭包

摘要：那其实闭包的原因就是外层函数的作用域对象无法释放其实就是一个函数调用会生成的临时作用域图中可看出其实就是在中的匿名函数，所以他的就指向留下的作用域。引言网络上关于作用域及闭包的文章很多，自己对于纯理论知识并不能很快的理解，但自己对于图画有很强的记忆和理解能力，因此决定将此知识点以图画的知识表现出来，加深自身理解的同时如果能帮到正在学习的童鞋就再好不过了下面我以函数的整个生命周期来...

shiyang6017 2019-08-22 17:03 评论0 收藏0
详解js变量、作用域及内存

摘要：不是引用类型，无法输出简而言之，堆内存存放引用值，栈内存存放固定类型值。变量的查询在变量的查询中，访问局部变量要比全局变量来得快，因此不需要向上搜索作用域链。赞助我以写出更好的文章，give me a cup of coffee? 2017最新最全前端面试题基本类型值有：undefined，NUll，Boolean，Number和String，这些类型分别在内存中占有固定的大小空...

waltr 2019-08-21 10:19 评论0 收藏0
学习JavaScript之内存泄漏

摘要：接上回我写了一篇关于闭包的博客学习之闭包，最后谈到闭包导致的问题时留了一个尾在以下的浏览器中会有内存泄漏的问题。今天的博客就继续探索一下内存泄漏的问题。博客地址的前端之路原文链接学习之内存泄漏接上回我写了一篇关于闭包的博客《学习JavaScript之闭包》，最后谈到闭包导致的问题时留了一个尾：在IE9以下的浏览器中会有内存泄漏的问题。今天的博客就继续探索一下内存泄漏的问题。浅...

nodejh 2019-08-20 17:29 评论0 收藏0
【前端进阶之路】内存基本知识

摘要：在运行脚本时，需要显示的指定对象。大对象区每一个区域都是由一组内存页构成的。这里是唯一拥有执行权限的内存区。换句话说，是该对象被之后所能回收到内存的总和。一旦活跃对象已被移出，则在旧的半空间中剩下的任何死亡对象被丢弃。内存管理本文以V8为背景对之前的文章进行重新编辑，内容做了很多的调整，使其具有逻辑更加紧凑，内容更加全面。 1. 基础概念 1.1 生命周期不管什么程序语言，内存...

Simon_Zhou 2019-08-22 11:01 评论0 收藏0
浅谈js内存与闭包

摘要：将他们放在堆中是为了不影响栈的效率。接着是临时空间函数执行的时候，会临时开辟一块内存空间，这块内存空间长得和外面这个一样，也有自己的栈堆，当函数运行完就销毁。中的内存第一个部分还是和上面的一样，有栈堆运行时环境，另外还有一个缓冲区存放。 0.前言主要结合了内存的概念讲了js的一些的很简单、但是又不小心就犯错的地方。结论：js执行顺序，先定义，后执行，从上到下，就近原则。闭包可以让外部...

dailybird 2019-08-22 16:30 评论0 收藏0