关于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(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
javascript冒泡排序小结
Apr 10 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 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中HTTP_REFERER函数用法实例
2014/11/21 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
vue router demo详解
2017/10/13 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python开发前景如何
2020/06/11 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
高中国旗下的演讲稿
2014/08/28 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
加薪申请报告范本
2015/05/15 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
SQL Server中搜索特定的对象
2022/05/25 SQL Server