关于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 相关文章推荐
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
动态加载js文件简单示例
Apr 21 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 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
WHOOPS PHP调试库的使用
2017/09/29 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
JS删除String里某个字符的方法
2021/01/06 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Unicode和Python的中文处理
2017/03/19 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Python绘制数码晶体管日期
2021/02/19 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
党校培训思想汇报
2013/12/30 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
行政管理专业求职信
2014/07/06 职场文书
个人委托书范本汇总
2014/10/01 职场文书
预备党员转正材料
2014/12/19 职场文书
让子弹飞观后感
2015/06/11 职场文书
公司业务员管理制度
2015/08/05 职场文书
python使用BeautifulSoup 解析HTML
2022/04/24 Python