关于JS管理作用域的问题


Posted in Javascript onApril 10, 2013

关键字:标识符、执行上下文、作用域、作用域链、变量对象、活动对象理论知识

理解JavaScript如何管理作用域和作用域链很重要。因为在作用域链中要查找的变量对象的个数直接影响标识符解析的性能。标识符在作用域链中的位置越深,查找和访问它所需的时间越长;如果作用域管理不当,就会给脚本的执行时间带来负面影响。

    当执行JavaScript代码时,JavaScript引擎会创建一个执行上下文(Execution Context)。执行上下文(有时被称为作用域)设定了代码执行时所处的环境。JavaScript引擎会在页面加载后创建一个全局的执行上下文,然后每执行一个函数时都会创建一个对应的执行上下文,最终建立一个执行上下文的堆栈,当前起作用的执行上下文在堆栈的最顶端。

    每个执行上下文都有一个与之关联的作用域链,用于解析标识符。作用域链包含一个或多个变量对象,这些对象定义了执行上下文作用域内的标识符。全局执行上下文的作用域链中只有一个变量对象,它定义了JavaScript中所有可用的全局变量和函数。当函数被创建(不是执行)时,JavaScript引擎会把创建时执行上下文的作用域链赋给函数的内部属性[[Scope]]。然后,当函数被执行时,JavaScript引擎会创建一个活动对象(Activetion Object),并在初始化时给this、arguments、命名参数和该函数的所有局部变量赋值。活动对象会出现在执行上下文作用域链的顶端,紧接其后的是函数[[scope]]属性中的对象。

   在执行代码时,JavaScript引擎通过搜索执行上下文的作用域链来解析诸如变量和函数名这样的标识符。解析标识符的过程从作用域的顶端开始,按照自上而下的顺序进行。

验证理论

function add(num1, num2) {

    return num1 + num2;

}

当这段代码执行开始时,add函数拥有一个仅包含全局变量对象的[[scope]]属性。如下图:

关于JS管理作用域的问题

在执行add函数时,JavaScript引擎会创建一个新的执行上下文和一个包含this、arguments、num1、num2的活动对象,并把活动对象添加到作用域链中。在add()函数内部运行时,JavaScript引擎需要解析函数里的num1和num2标识符。var total = add(5, 10);

关于JS管理作用域的问题

解析过程是从作用域链中的第一个对象开始,这个对象就是包含该函数局部变量的活动对象。如果在该对象中没有找到标识符,就会继续在作用域链中下一个对象里查找标识符。一旦找到标识符,查找就结束。

高效的数据存取

局部变量是JavaScript中读写最快的标识符。

一个好的经验:任何非局部变量在函数中的使用超过一次时,都应该将其存储为局部变量。

对于数组和对象,始终将那些需要频繁存取的值存储到局部变量中。

实际上每次存取HTMLCollection对象属性,都会对DOM文档进行动态查询。

如果需要对HTMLCollection对象的成员反复存取,高效的方式是将它们复制到数组里。

Javascript 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
node实现的爬虫功能示例
May 04 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 Javascript
js异常捕获方法介绍
Apr 10 #Javascript
Javascript 中 null、NaN和undefined的区别总结
Apr 10 #Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 #Javascript
javascipt基础内容--需要注意的细节
Apr 10 #Javascript
使用javascipt---实现二分查找法
Apr 10 #Javascript
页面使用密码保护代码
Apr 10 #Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 #Javascript
You might like
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
php数据访问之查询关键字
2016/05/09 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
关于Python中异常(Exception)的汇总
2017/01/18 Python
基于Python的关键字监控及告警
2017/07/06 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript