关于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 相关文章推荐
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
js实现随机圆与矩形功能
Oct 29 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高自定义性安全验证码代码
2011/11/27 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
python如何查看系统网络流量的信息
2016/09/12 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
python图形用户接口实例详解
2019/12/16 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
幼儿园大班开学寄语
2014/08/02 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
会计人员岗位职责
2015/02/03 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android