理解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,发个JS接受URL参数的代码
Sep 25 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
原生JS轮播图插件
Feb 09 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
详解CocosCreator消息分发机制
Apr 16 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/01 无线电
php中的实现trim函数代码
2007/03/19 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python并行分布式框架Celery详解
2018/10/15 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
pytorch中index_select()的用法详解
2021/01/06 Python
招商业务员岗位职责
2013/12/16 职场文书
八一慰问活动方案
2014/02/07 职场文书
会计专业求职信范文
2014/03/16 职场文书
一年级评语大全
2014/04/23 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
2015年教师节活动总结
2015/03/20 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript