关于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.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 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中使用Oracle数据库(3)
2006/10/09 PHP
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php正则表达式(regar expression)
2011/09/10 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
js跑马灯代码(自写)
2013/04/17 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
python实现计算图形面积
2021/02/22 Python
python lambda的使用详解
2021/02/26 Python
python推导式的使用方法实例
2021/02/28 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
护士检查书
2014/01/17 职场文书
干部作风建设工作总结
2014/10/29 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
小学思品教学反思
2016/02/20 职场文书
MySQL创建管理HASH分区
2022/04/13 MySQL