理解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 相关文章推荐
javascript中indexOf技术详解
May 07 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
vue3.0生命周期的示例代码
Sep 24 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取整数函数常用的四种方法小结
2012/07/05 PHP
ThinkPHP中I(),U(),$this->post()等函数用法
2014/11/22 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
JavaScript中Function详解
2015/02/27 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
Django nginx配置实现过程详解
2020/09/10 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
机电工程专业应届生求职信
2013/10/03 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
小区门卫管理制度
2014/01/29 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
超市客服工作职责
2014/06/11 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
利用Python多线程实现图片下载器
2022/03/25 Python
Python正则表达式中flags参数的实例详解
2022/04/01 Python