关于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/jquery对上传文件格式过滤的方法
Jul 25 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
javascript流程控制语句集合
2017/09/18 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
Python序列操作之进阶篇
2016/12/08 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
python 爬取疫情数据的源码
2020/02/09 Python
Python request使用方法及问题总结
2020/04/26 Python
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
作文评语大全
2014/04/23 职场文书
学校督导评估方案
2014/06/10 职场文书
电话客服工作职责
2014/07/27 职场文书
开业典礼致辞
2015/07/29 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
科普 | 业余无线电知识-波段篇
2022/02/18 无线电