理解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 相关文章推荐
比较简单的异步加载JS文件的代码
Jul 18 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
javascript 浏览器检测代码精简版
Mar 04 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
js判断在哪个浏览器打开项目的方法
Jan 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
php生成excel列序号代码实例
2013/12/24 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
JavaScript 特殊字符
2007/04/05 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
vue实现选中效果
2020/10/07 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
Python File readlines() 使用方法
2018/03/19 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
巴西网上药房:onofre
2016/11/21 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
室内设计专业学生的自我评价分享
2013/11/27 职场文书
六十大寿答谢词
2014/01/12 职场文书
倡议书范文格式
2014/05/12 职场文书
班风口号
2014/06/18 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
五年级学生期末评语
2014/12/26 职场文书
大学生求职自荐信
2015/03/24 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers