解决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 相关文章推荐
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
Javascript 入门基础学习
2010/03/10 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
python类参数self使用示例
2014/02/17 Python
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
python django中8000端口被占用的解决
2019/12/17 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
北大研究生linux应用求职信
2013/10/29 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
《长城》教学反思
2014/02/14 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
五年级学生评语大全
2014/12/26 职场文书
二审代理词范文
2015/05/25 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
Python绘制地图神器folium的新人入门指南
2021/05/23 Python