理解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 相关文章推荐
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
javascript中的float运算精度实例分析
Aug 21 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
Vue 的 v-model用法实例
Nov 23 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下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
vuex提交state&&实时监听state数据的改变方法
2018/09/16 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python中__call__内置函数用法实例
2015/06/04 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
python编程嵌套函数实例代码
2018/02/11 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
耐克中国官方商城:Nike中国
2018/10/18 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
建筑总经理岗位职责
2014/02/02 职场文书
法律进学校实施方案
2014/03/15 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
外贸业务员求职信
2014/06/16 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
党建工作汇报材料
2014/12/24 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js