理解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 相关文章推荐
prototype class详解
Sep 07 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
node.js博客项目开发手记
Mar 16 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
React 父子组件通信的实现方法
Dec 05 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中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
学习ExtJS border布局
2009/10/08 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
python批量修改文件名的实现代码
2014/09/01 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
解决python报错MemoryError的问题
2018/06/26 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
python 内置函数汇总详解
2019/09/16 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
如何通过python实现人脸识别验证
2020/01/17 Python
python 实现任务管理清单案例
2020/04/25 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
新闻网站实习自我鉴定
2013/09/25 职场文书
大班幼儿评语大全
2014/04/30 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
环卫个人总结
2015/03/03 职场文书
现役军人家属慰问信
2015/03/24 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
Oracle表空间与权限的深入讲解
2021/11/17 Oracle