关于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日历 推荐
Dec 03 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
vue插件实现v-model功能
Sep 10 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 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 xml文件操作代码(一)
2009/03/20 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
用js实现trim()的解决办法
2013/04/16 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
js表单验证实例讲解
2016/03/31 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
python实现百度关键词排名查询
2014/03/30 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
python获取栅格点和面值的实现
2020/03/10 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
解决Python安装cryptography报错问题
2020/09/03 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
教师应聘个人求职信
2013/12/10 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
募捐倡议书
2014/04/14 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫