解决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 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
一个简单的node.js界面实现方法
Jun 01 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
js实现省级联动(数据结构优化)
Jul 17 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
php写的AES加密解密类分享
2014/06/20 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
php生成微信红包数组的方法
2019/09/05 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
js调用图片隐藏&显示实现代码
2013/09/13 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
Python 第一步 hello world
2009/09/25 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Python jieba库用法及实例解析
2019/11/04 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
python psutil监控进程实例
2019/12/17 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
九年级体育教学反思
2014/01/23 职场文书
预备党员政审材料
2014/02/04 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
继承权公证书
2014/04/09 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL