解决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实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 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
PHP 作用域解析运算符(::)
2010/07/27 PHP
php注销代码(session注销)
2012/05/31 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
python实现诗歌游戏(类继承)
2019/02/26 Python
python获取Linux发行版名称
2019/08/30 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
Python gevent协程切换实现详解
2020/09/14 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
办公室主任岗位职责
2013/11/08 职场文书
应届大学生求职的自我评价
2013/11/17 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
Python初识逻辑与if语句及用法大全
2021/08/07 Python
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS