细节：js 函数闭包内存泄露的解决办法举例

Chaz 发布于2019-08-19 17:07 / 490人阅读

摘要：这里存在内存泄露问题，油画后的代码如下这里这里这里这里这里这里

原始代码：

function Cars(){
    this.name = "Benz";
    this.color = ["white","black"];
}
Cars.prototype.sayColor = function(){
    var outer = this;
    return function(){
        return outer.color
    };
};

var instance = new Cars();
console.log(instance.sayColor()())

优化后的代码：

function Cars(){
    this.name = "Benz";
    this.color = ["white","black"];
}
Cars.prototype.sayColor = function(){
    var outerColor = this.color; //保存一个副本到变量中
    return function(){
        return outerColor; //应用这个副本
    };
    outColor = null; //释放内存
};

var instance = new Cars();
console.log(instance.sayColor()())

稍微复杂一点的例子：

function inheritPrototype(subType,superType){
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

function Cars(){
    this.name = "Benz";
    this.color = ["white","black"];
}
Cars.prototype.sayColor = function(){
    var outer = this;
    return function(){
        return outer.color;
    };
};

function Car(){
    Cars.call(this);
    this.number = [321,32];
}
inheritPrototype(Car,Cars);
Car.prototype.sayNumber = function(){
    var outer = this;
    return function(){
        return function(){
            return outer.number[outer.number.length - 1];
        }
    };
};

var instance = new Car();
console.log(instance.sayNumber()()());

首先，该例子组合使用了构造函数模式和原型模式创建Cars 对象，并用了寄生组合式继承模式来创建Car 对象并从Cars 对象获得属性和方法的继承；

其次，建立一个名为instance 的Car 对象的实例；instance 实例包含了sayColor 和sayNumber 两种方法；

最后，两种方法中，前者使用了一个闭包，后者使用了两个闭包，并对其this 进行修改使其能够访问到this.color 和this.number。

这里存在内存泄露问题，油画后的代码如下：

function inheritPrototype(subType,superType){
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

function Cars(){
    this.name = "Benz";
    this.color = ["white","black"];
}
Cars.prototype.sayColor = function(){
    var outerColor = this.color; //这里
    return function(){
        return outerColor; //这里
    };
    this = null; //这里
};

function Car(){
    Cars.call(this);
    this.number = [321,32];
}
inheritPrototype(Car,Cars);
Car.prototype.sayNumber = function(){
    var outerNumber = this.number; //这里
    return function(){
        return function(){
            return outerNumber[outerNumber.length - 1]; //这里
        }
    };
    this = null; //这里
};

var instance = new Car();
console.log(instance.sayNumber()()());

混合云专线服务闭包内存泄露 js内存泄露解决方案 js中的内存泄露的解决办法

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

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

[总结贴] 十个 JavaScript 中易犯的小错误

摘要：但是在中，的生命还会继续。这其中最典型的问题便是批量增加元素。这时，如果构造函数被调用时没有参数，则会自动设置为。因为从系统的角度来说，当你用字符串的时候，它会被传进构造函数，并且重新调用另一个函数。序言在今天，JavaScript已经成为了网页编辑的核心。尤其是过去的几年，互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。如果初次打交道，很多人会觉得js很简单...

icattlecoder 2019-08-22 10:57 评论0 收藏0
JS高程中的垃圾回收机制与常见内存泄露的解决方法

摘要：解决方式是，当我们不使用它们的时候，手动切断链接淘汰把和对象转为了真正的对象，避免了使用这种垃圾收集策略，消除了以下常见的内存泄漏的主要原因。以上参考资料高程垃圾收集类内存泄漏及如何避免内存泄露及解决方案详解类内存泄漏及如何避免 showImg(http://ww1.sinaimg.cn/large/005Y4rCogy1ft1ikzcqzqj30ka0et77a.jpg); 前言起...

kidsamong 2019-08-22 18:35 评论0 收藏0
新鲜出炉的8月前端面试题

摘要：前言最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题主要考察前端技基础是否扎实，是否能够将前端知识体系串联。前言最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题: 主要考察前端技基础是否扎实，是否能够将前端知识体系串联。一种是开放式问题: 考察业务积累，是否有自己的思考，思考问题的方式，这类问题没有标准答案。基础题题目的答...

qingshanli1988 2019-08-23 10:47 评论0 收藏0
[译文] JavaScript工作原理：内存管理+如何处理4种常见的内存泄露

摘要：本系列的第一篇文章着重提供一个关于引擎运行时和调用栈的概述。在硬件层面，计算机内存由大量的触发器组成。每个触发器包含几个晶体管能够存储一个比特译注位。可以通过唯一标识符来访问单个触发器，所以可以对它们进行读写操作。比特称为个字节。原文 How JavaScript works: memory management + how to handle 4 common memory lea...

adam1q84 2019-08-26 10:33 评论0 收藏0
javascript 内存泄漏

摘要：什么是内存泄漏简介，内存，硬盘的关系工作的时候需要从存储器里取数据出来。引发内存泄漏的方式意外的全局变量对未声明变量的处理方式在全局对象上创建该变量的引用即全局对象上的属性，不是变量，因为它能通过删除。这样会造成意外的内存泄漏。什么是内存泄漏简介 CPU，内存，硬盘的关系 CPU(Central Processing Unit)工作的时候：　　1、需要从存储器里取数据出来。　　2、...

刘永祥 2019-08-22 17:17 评论0 收藏0