解决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实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP面向对象概念
2011/11/06 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
犀利的js 函数集合
2009/06/11 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
解决python爬虫中有中文的url问题
2018/05/11 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
python通过实例讲解反射机制
2019/10/17 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Python实现像awk一样分割字符串
2020/09/15 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
int和Integer有什么区别
2013/05/25 面试题
护士自荐信
2013/10/25 职场文书
工作疏忽检讨书
2014/01/25 职场文书
班主任新年寄语
2014/04/04 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
Go语言读取txt文档的操作方法
2022/01/22 Golang
MYSQL常用函数介绍
2022/05/05 MySQL