解决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 相关文章推荐
JavaScript实现拼音排序的方法
Nov 20 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
vue-swiper的使用教程
Aug 30 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
详解Vue3中对VDOM的改进
Apr 23 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
vue实现顶部菜单栏
Nov 08 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
PHP下对字符串的递增运算代码
2010/08/21 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
vuex如何重置所有state(可定制)
2019/01/17 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
js实现数字滚动特效
2019/12/16 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
Python读写Excel文件的实例
2013/11/01 Python
python实现360皮肤按钮控件示例
2014/02/21 Python
Python兔子毒药问题实例分析
2015/03/05 Python
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
对python函数签名的方法详解
2019/01/22 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
tensorflow多维张量计算实例
2020/02/11 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
入党积极分子党小组意见
2015/06/02 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript