解决js函数闭包内存泄露问题的办法


Posted in Javascript onJanuary 25, 2016

本文通过举例,由浅入深的讲解了解决js函数闭包内存泄露问题的办法,分享给大家供大家参考,具体内容如下

原始代码:

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()()());

以上就是为大家分享的解决方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
JavaScript数据类型学习笔记
Jan 25 #Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 #Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 #Javascript
Jquery实现纵向横向菜单
Jan 24 #Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 #Javascript
JavaScript jquery及AJAX小结
Jan 24 #Javascript
基于JavaScript短信验证码如何实现
Jan 24 #Javascript
You might like
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php 字符串函数收集
2010/03/29 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
Vue中的$set的使用实例代码
2018/10/08 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python访问sqlserver示例
2014/02/10 Python
Python 递归函数详解及实例
2016/12/27 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python框架django项目部署相关知识详解
2019/11/04 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
胡桃夹子观后感
2015/06/11 职场文书
竞聘书的秘诀
2019/04/02 职场文书