理解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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
Vue scoped及deep使用方法解析
Aug 01 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
xml+php动态载入与分页
2006/10/09 PHP
php实现的MySQL通用查询程序
2007/03/11 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python实现读取并保存文件的类
2017/05/11 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
python和c语言哪个更适合初学者
2020/06/22 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
办公设备采购方案
2014/03/16 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
2015年班干部工作总结
2015/04/29 职场文书
宪法宣传标语100条
2019/10/15 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
python实现会员管理系统
2022/03/18 Python