理解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动态设置样式实现代码及演示动画
Jan 25 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
jQuery.each使用详解
Jul 07 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
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之第五天
2006/10/09 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python中正则表达式详解
2017/05/17 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
致长跑运动员加油稿
2014/02/20 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
大跃进口号
2014/06/16 职场文书
2019各种承诺书范文
2019/06/24 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python