关于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在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
Javascript 命名空间模式
Nov 01 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
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获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
php文件上传类的分享
2017/07/06 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
React Router基础使用
2017/01/17 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
js实现点击生成随机div
2020/01/16 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
进一步探究Python中的正则表达式
2015/04/28 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
自我评价范文分享
2014/01/04 职场文书
人事文员岗位职责
2014/02/16 职场文书
租房协议书怎么写
2014/04/10 职场文书
患者身份识别制度
2015/08/06 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
《学会看病》教学反思
2016/02/17 职场文书