简单谈谈javascript中的变量、作用域和内存问题


Posted in Javascript onAugust 30, 2015

【变量】

[1]定义:可变的量,相当于给一个不定的数据起了一个外号。变量是存储信息的容器。
[2]特性:js中的变量是松散类型的,可以保存任何类型的数据。它只是在特定时间用于保存特定值的一个名字而已。由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变。
[3]变量声明:变量可以在声明时赋值,但不能有其他操作,如+=、-=等

var a = 2;//是正确的
var a += 2;//是错误的
var a = 2++;//是错误的,++只能用于变量,不能用于常量

[4]注意:用var操作符定义的变量将成为定义该变量的作用域中的局部变量。若省略var操作符,可以创建一个全局变量,但在严格模式下会抛出 ReferenceError错误

[5]var:使用var声明的变量会自动被添加到最接近的环境中。如果初始化变量时没有使用var声明,该变量会自动被添加到全局环境。在严格模式下,初始化未经声明的变量会导致错误。
[6]局部变量:如果局部环境中存在同名标识符,就不会使用位于父环境中的标识符。任何位于局部变量color的声明之后的代码,如果不使用window.color都无法访问全局color变量

【标识符】

[1]定义:变量、函数、属性的名字,或者函数的参数。
[2]注意:

[2.1]第一个字符必须是一个字母、下划线或一个美元符号。其他字符可以是字母、下划线、美元符号或数字[不能出现中划线]

[2.2]标识符中的字母也可以包括拓展的ASCII或Unicode字母字符,可以使用中文

[2.3]标识符应采用小驼峰格式,第一位应该是数据的类型,常见的标识如下:

数组 

a 
Array aItems


布尔值  
b 
Boolean bIsComplete


浮点数  
f 
 FLoat fPrice


函数 

fn   Function fnHandler


整数 

i 
 Integer iItemCount


对象 

o 
Object oDIv1


正则表达式  re   RegExp reEmailCheck


字符串 
  s 
 String sUserName


变量
 
v 
Variant vAnything

[2.4]不能把关键字、保留字、true、false和null用作标识符

[2.5]对于不符合标识符命名规则的属性如background-color应写为大括号方式[backgroundColor]
[3]标识符解析:标识符解析是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始,然后逐级地向后回溯,直到找到标识符为止(如果找不到标识符,表示标识符尚未声明,通常会导致错误发生)。

[3.1]如果局部环境中存在着同名标识符,就不会使用父环境中的标识符

e.g. 全局和局部有同名标识符color,任何位于局部变量color的声明之后的代码,如果不使用window.color都无法访问全局color变量

[3.2]JavaScript引擎在优化标识符查询方面做得不错,访问全局变量和局部变量的时间差别可以忽略不计

【作用域】(也称为执行环境)

[注意]javascript中没有块级作用域 
[1]执行环境:执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为。每个执行环境都有一个与之相关联的变量对象。环境中定义的所有变量和函数都保存在这个对象中。

[2]全局执行环境:

[2.1]全局执行环境是最外围的一个执行环境,在web浏览器中,全局执行环境被认为是window对象。因此所有全局变量和函数都是作为window对象的属性和方法创建的。全局执行环境直到应用程序退出例如关闭网页或浏览器时才会被销毁

[2.2]一个页面就相当于一个全局作用域。不论是页面中的js代码,还是引用的外部js文件,最终都会按照在页面中的先后依次解析。

[3]函数执行环境:每个函数都有自己的执行环境,当执行流进入一个函数时,函数的环境就会被推入一个环境栈中,而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境。

[4]作用域链:当代码在一个环境中执行时,会创建变量对象的一个作用域链。作用域链的作用是保证对执行环境有权访问的所有变量和函数的有序访问。作用域的前端始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数,则将其活动对象作为变量对象。活动对象在最开始时只包含一个变量,即arguments对象(这个对象在全局环境中是不存在的)。作用域链中的下一个变量对象来自包含环境,而再下一个变量对象则来自下一个包含环境。这样,一直延续到全局执行环境;全局执行环境的变量对象始终都是作用域链中的最后一个对象。

[4.1]作用域链的特点:内部环境可以通过作用域链访问所有的外部环境,但外部环境不能访问内部环境中的任何变量和函数。这些环境之间的联系是线性、有次序的。每个环境都可以向上搜索作用域链,以查询变量和函数名;但任何环境都不能通过向下搜索作用域链而进入另一个执行环境。

[5]延长作用域链:

[5.1]try-catch语句:catch块会创建一个新的变量对象,其中包含的是被抛出的错误对象的声明

[5.2]with语句:会将指定的对象添加到作用域链中

function buildUrl(){
  var qs = '?debug=true';
  with(location){
    var url = href + qs;
  }
  return url;
}

【垃圾回收】:javascript具有自动垃圾收集机制,执行环境会负责管理代码执行过程中使用的内存。

[1]垃圾回收机制:找出那些不再继续使用的变量,然后释放其占用的内存,垃圾收集器会按照固定的时间间隔,或代码执行中预定的收集时间,周期性地执行这一操作

[2]垃圾收集标记无用变量的两种策略

[2.1]标记清除,标记“进入环境”和“离开环境”。离开作用域的值将被自动标记为可以回收,因此将在垃圾收集期间被删除

[2.2]引用计数,跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时,则这个值的引用次数就是1,如果同一个值又被赋给另一个变量,则该值的引用次数加1,相反,如果包含对这个值的引用的变量又取得了另外一个值,则这个值的引用次数减1,当这个值的引用次数为0时,则说明没有办法再访问这个值了,因此就可以将其占用的内存空间回收回来。

[2.2.1]引用计数的问题:循环引用:对象A中包含一个指向对象B的指针,对象B中也包含一个指向对象A的指针

[2.2.2]IE:IE中有一部分对象并不是原生js对象,例如,其BOM和DOM中的对象就是使用c++以COM对象的形式实现,而COM对象的垃圾回收机制采用的就是引用计数策略

var element = document.getElementById('some_element');
var myObject = new Object();
myObject.element = element;
element.someObject = myObject;

解决办法:为了避免类似这样的循环引用,最好是在不使用它们的时候手工断开

myObject.element = null;
element.someObject = null;   

为了解决此问题,IE9把BOM和DOM对象都转换成了真正的js对象

【内存管理】

[1]主要问题:分配给web浏览器的可用内存数量通常要比分配给桌面应用程序的少,目的是防止运行js的网页耗尽全部系统内存而导致系统崩溃。内在限制问题不仅会影响给变量分配内存,同时还会影响调用栈以及在一个线程中能够同时执行的语句数量 

[2]优化方式:为执行中的代码只保存必要的数据。一旦数据不再有用,最好通过将其值设置为null来释放其引用,这种做法叫解除引用。这一做法适用于大多数全局变量和全局对象的属性以及循环引用变量,局部变量会在它们离开执行环境时自动被解除引用。

解除变量的引用并不意味着自动回收该值所占用的内存。解除引用的真正作用是让值脱离执行环境,以便垃圾收集器下次运行时将其回收。

Javascript 相关文章推荐
Knockout text绑定DOM的使用方法
Nov 15 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 #Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 #Javascript
js精美的幻灯片画集特效代码分享
Aug 29 #Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 #Javascript
jquery实现清新实用的网页菜单效果
Aug 28 #Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 #Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 #Javascript
You might like
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
PHP读取目录下所有文件的代码
2008/01/07 PHP
PHP 输出简单动态WAP页面
2009/06/09 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
Python读写Excel文件的实例
2013/11/01 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
python爬虫中多线程的使用详解
2019/09/23 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
GWT都有什么特性
2016/12/02 面试题
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
文秘大学生求职信
2014/02/25 职场文书
生物技术专业求职信
2014/06/10 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
项目验收申请报告
2015/05/15 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书