理解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 相关文章推荐
自动更新作用
Oct 08 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
微信小程序实现点击效果
Jun 21 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
js操作select控件的几种方法
2010/06/02 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
pandas对指定列进行填充的方法
2018/04/11 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
运动会通讯稿150字
2014/02/15 职场文书
承诺书的格式范文
2014/03/28 职场文书
授权委托书样本
2014/04/03 职场文书
人事专员岗位说明书
2014/07/29 职场文书
社区两委对照检查材料
2014/08/23 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang