解决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的倒计时插件代码
May 07 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
详解React 元素渲染
Jul 07 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
PHP正则验证Email的方法
2015/06/15 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
three.js 入门案例详解
2018/01/23 Javascript
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
使用python求解二次规划的问题
2020/02/29 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
音乐教学案例
2014/01/30 职场文书
个人贷款担保书
2014/04/01 职场文书
《桥》教学反思
2014/04/09 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
应届生自荐书
2014/06/23 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
学生个人总结范文
2015/02/15 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
电频谱管理的原则是什么
2022/02/18 无线电
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python