解决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 URL传中文参数引发的乱码问题
Sep 02 Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
Ajax异步刷新功能及简单案例
Nov 20 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
编写PHP的安全策略
2006/10/09 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
物流专业大学应届生求职信
2013/11/03 职场文书
运动会标语
2014/06/21 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015感人爱情寄语
2015/02/26 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js