解决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 UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
js select option对象小结
Dec 20 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
js实现二级导航功能
Mar 03 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
图文讲解vue的v-if使用方法
Feb 11 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之数据库操作详解及乱码解决!
2007/01/02 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python 流程控制实例代码
2009/09/25 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python实现按首字母分类查找功能
2019/10/31 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
创意婚礼策划方案
2014/05/18 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
病危通知单
2015/04/17 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript