理解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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
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读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
Node.js简单入门前传
2017/08/21 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
Python中实现常量(Const)功能
2015/01/28 Python
Python 正则表达式的高级用法
2016/12/04 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
python 拼接文件路径的方法
2018/10/23 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
tensorflow自定义激活函数实例
2020/02/04 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
采购部部门职责
2013/12/15 职场文书
结婚典礼证婚词
2014/01/11 职场文书
管理专员自荐信
2014/01/26 职场文书
小学生常见病防治方案
2014/06/06 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
大雁塔英文导游词
2015/02/10 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript