理解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 插件开发方法小结
Oct 23 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
详解React之key的使用和实践
Sep 29 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
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 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
模仿百度三维地图的js数据分享
2011/05/12 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
Python中的包和模块实例
2014/11/22 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python星号*与**用法分析
2018/02/02 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
解析python实现Lasso回归
2019/09/11 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
Python中的With语句的使用及原理
2020/07/29 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
文案策划求职信
2014/04/14 职场文书
个人总结怎么写
2015/02/26 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书