理解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 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
取选中的radio的值
Jan 11 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 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
咖啡的传说和历史
2021/03/03 新手入门
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
JavaScript QueryString解析类代码
2010/01/17 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
轮播图组件js代码
2016/08/08 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python多线程学习资料
2012/12/19 Python
python 布尔操作实现代码
2013/03/23 Python
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python实现五子棋游戏
2019/06/18 Python
python字符串查找函数的用法详解
2019/07/08 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
iPython pylab模式启动方式
2020/04/24 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
python右对齐的实例方法
2020/07/05 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
消防工作实施方案
2014/06/09 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
国企干部对照检查材料
2014/08/22 职场文书
2015年工程师工作总结
2015/04/30 职场文书
公司表扬信格式
2015/05/04 职场文书