理解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 相关文章推荐
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
JS实现音量控制拖动
Jan 15 Javascript
JavaScript实现通讯录功能
Dec 27 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版(2)
2006/10/09 PHP
php数组总结篇(一)
2008/09/30 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
在Django的模板中使用认证数据的方法
2015/07/23 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
python中count函数知识点浅析
2020/12/17 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis
Oracle中DBLink的详细介绍
2022/04/29 Oracle