解决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 相关文章推荐
js 遍历json返回的map内容示例代码
Oct 29 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
纯JS实现简单的日历
Jun 26 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
js实现日历
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
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
php页面缓存方法小结
2015/01/10 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
javascript操作符"!~"详解
2015/02/10 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
Node.js事件的正确使用方法
2019/04/05 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
渡河少年教学反思
2014/02/12 职场文书
水电站项目建议书
2014/05/12 职场文书
读群众路线的心得体会
2014/09/03 职场文书
户籍证明书标准模板
2014/09/10 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
初中差生评语
2014/12/29 职场文书
MySQL基础(二)
2021/04/05 MySQL
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android