理解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脚本性能的优化方法
Feb 02 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
详解angular应用容器化部署
Aug 14 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 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
SMARTY学习手记
2007/01/04 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
PHP实现的购物车类实例
2015/06/17 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
ASP Json Parser修正版
2009/12/06 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
提升Python程序运行效率的6个方法
2015/03/31 Python
django定期执行任务(实例讲解)
2017/11/03 Python
transform python环境快速配置方法
2018/09/27 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
寄语十八大感言
2014/02/07 职场文书
精神文明单位申报材料
2014/05/02 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
投资意向协议书
2015/01/29 职场文书
三峡大坝导游词
2015/01/31 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
小学六一主持词开场白
2015/05/28 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python