解决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接受和处理xml数据的代码(.net)
Mar 28 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
vue实现添加与删除图书功能
Oct 07 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
js实现计算器功能
Aug 10 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
JS input 数字验证代码
2009/07/30 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
js确定对象类型方法
2012/03/30 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
Python pickle模块用法实例
2015/04/14 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
python科学计算之narray对象用法
2019/11/25 Python
Python datetime模块使用方法小结
2020/06/18 Python
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
新大陆软件面试题
2016/11/24 面试题
书法培训心得体会
2014/01/05 职场文书
家教广告词
2014/03/19 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
男人帮观后感
2015/06/18 职场文书
担保书怎么写 ?
2019/04/22 职场文书
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技