理解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 遮罩层实现(mask)实现代码
Jan 09 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
js实现移动端轮播图滑动切换
Dec 21 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
php垃圾代码优化操作代码
2010/08/05 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
php获取淘宝分类id示例
2014/01/16 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
vue.config.js常用配置详解
2019/11/14 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
Python的Flask框架与数据库连接的教程
2015/04/20 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
英国电子专家:maplin
2019/09/04 全球购物
C#实现启动一个进程
2016/10/01 面试题
文秘专业自荐信
2013/10/14 职场文书
三方股东合作协议书
2014/10/28 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
2015年体育部工作总结
2015/04/02 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript