解决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中Eval函数的使用说明
Oct 11 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
常用jQuery选择器总结
Jul 11 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
Python中tell()方法的使用详解
2015/05/24 Python
Python学习入门之区块链详解
2017/07/25 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
红领巾广播站广播稿
2014/02/01 职场文书
学生个人总结范文
2015/02/15 职场文书
担保书怎么写 ?
2019/04/22 职场文书