理解js回收机制通俗易懂版


Posted in Javascript onFebruary 29, 2016

之前文章中,讲解过js中的回收机制,但是对于当时的我来说,我自己对回收机制的这个概念也有些懵懵懂懂,现在对回收机制有了更深入的理解,所以特此发布此文给于总结,也好加深记忆。
为什么要有回收机制?why?

打个比方,我有一个内存卡,这个内存是8G的,我把文件,视频,音乐,都保存到了这个内存卡,随着我的储存的内容越来越多,这个内存卡已经保存不了了,如果我还想再把其他的文件保存到这个内存卡就需要删除一些文件,但是这些被删除的文件是我们自己手动删除的对吧,手动删除就相当于js中的delete。

在这些程序语言中同样也会出现这些问题,对,内存!我们声明的任何变量都需要消耗内存,这些变量越多运行的速度也会越慢。当然不只是变量,代码中的任何东西。这些语言的设计者为了解决这些问题,设计了一套代码的回收规则。

代码回收规则如下:

1.全局变量不会被回收。

2.局部变量会被回收,也就是函数一旦运行完以后,函数内部的东西都会被销毁。

3.只要被另外一个作用域所引用就不会被回收

我用几个例子来证明这些。

function a(){
 var user = "追梦子";
 return user;
}
var b = a();
console.log(b); //追梦子

按理说我是不能访问函数a里面的变量的,但是我通过全局变量b接收了这个函数a return过后的值,于是最后这段代码就成了下面这样。

function a(){
 var user = "追梦子";
 return user;
}
var b = "追梦子";
console.log(b);

好像这并看不出什么代码回收,那么我们看接下来的一段代码。

function a(){
 var num = 0;
 return function(){
  num ++;
  console.log(num);
 };
}
var b = a();
b(); //1
b(); //2
b(); //3

看到了吧,如果按照正常的做法,那么输出的应该是3次1次对,因为函数体一旦运行那么这个函数体内的代码就会被清空,既然会被清空那么下次运行这段代码的时候num应该还是1,但是这里情况有些不同,我上面说过函数中的局部变量只要被另外一个作用域所引用那么这段代码就不会被销毁。

上面的代码就像这样

function a(){
 var num = 0;
 return function(){
  num ++;
  console.log(num);
 };
}
var b = function(){
  num ++;
  console.log(num);
 };
b();
b();
b();

那么被函数a返回的那个匿名函数的作用域由函数a转向了window,由于这个匿名函数被全局变量b引用所以不会被销毁。

function a(){
 var num = 0;
 return function(){
  num ++;
  console.log(num);
 };
}
var b = {
 fn:a()
}
b.fn(); //1
b.fn(); //2
b.fn(); //3

同样可以,因为匿名函数被对象b的属性fn引用,改变了它的作用域,简单来说只要一个函数或者局部变量被改变作用域那么这个函数或者局部变量就不会被销毁。
以上就是本文的全部内容,希望大家对js回收机制有所帮助。

Javascript 相关文章推荐
javascript下数值型比较难点说明
Jun 07 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
理解Javascript闭包
Nov 01 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
Javascript模块化编程详解
Dec 01 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
jquery trigger实现联动的方法
Feb 29 #Javascript
基于Javascript实现返回顶部按钮
Feb 29 #Javascript
JavaScript实现斗地主游戏的思路
Feb 29 #Javascript
jQuery取消特定的click事件
Feb 29 #Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 #Javascript
JS三级可折叠菜单实现方法
Feb 29 #Javascript
精通JavaScript的this关键字
May 28 #Javascript
You might like
浅谈php优化需要注意的地方
2014/11/27 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
员工自我鉴定
2013/10/09 职场文书
车辆安全检查制度
2014/01/12 职场文书
社区党务公开实施方案
2014/03/18 职场文书
护士个人自我鉴定
2014/03/24 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
商务经理岗位职责
2014/08/03 职场文书
教师党员承诺书2015
2015/01/21 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书