解决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实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
Node实现搜索框进行模糊查询
Jun 28 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
第十三节 对象串行化 [13]
2006/10/09 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
jQuery的slideToggle方法实例
2013/05/07 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
Python部署web开发程序的几种方法
2017/05/05 Python
Django框架多表查询实例分析
2018/07/04 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
J2EE是技术还是平台还是框架
2016/08/14 面试题
中学生校园广播稿
2014/01/16 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
社区七一党员活动方案
2014/01/25 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
2015年消防工作总结
2015/04/24 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python