关于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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 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
php 方便水印和缩略图的图形类
2009/05/21 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
详解javascript appendChild()的完整功能
2018/08/18 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
vant中的toast轻提示实现代码
2020/11/04 Javascript
Python正则抓取网易新闻的方法示例
2017/04/21 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
学生自我鉴定模板
2013/12/30 职场文书
工业学校毕业生自荐书
2014/01/03 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫
详解CSS3浏览器兼容
2022/12/24 HTML / CSS