跟我学习javascript的作用域与作用域链


Posted in Javascript onNovember 19, 2015

作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。
一、JavaScript作用域

任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

1. 全局作用域(Global Scope)

在代码中任何地方都能访问到的对象拥有全局作用域,一般来说以下几种情形拥有全局作用域:

(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域,例如:

var authorName="小平果";
function doSomething(){
 var blogName="你不知道的JavaScript";
 function innerSay(){
 alert(blogName);
 }
 innerSay();
}
alert(authorName); //小平果
alert(blogName); //脚本错误
doSomething(); //你不知道的JavaScript
innerSay() //脚本错误

(2)所有末定义直接赋值的变量自动声明为拥有全局作用域,例如:

function doSomething(){
 var authorName="小平果";
 blogName="你不知道的JavaScript";
 alert(authorName);
}
doSomething(); //小平果
alert(blogName); //你不知道的JavaScript
alert(authorName); //脚本错误

变量blogName拥有全局作用域,而authorName在函数外部无法访问到。

(3)所有window对象的属性拥有全局作用域

一般情况下,window对象的内置属性都拥有全局作用域,例如window.name、window.location、window.top等等。

 2. 局部作用域(Local Scope)

 

和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所有在一些地方也会看到有人把这种作用域称为函数作用域,例如下列代码中的blogName和函数innerSay都只拥有局部作用域。

function doSomething(){
 var blogName="你不知道的JavaScript";
 function innerSay(){
 alert(blogName);
 }
 innerSay();
}
alert(blogName); //脚本错误
innerSay(); //脚本错误

二、作用域链(Scope Chain)

在JavaScript中,函数也是对象,实际上,JavaScript里一切都是对象。函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合,这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问。

当一个函数创建后,它的作用域链会被创建此函数的作用域中可访问的数据对象填充。例如定义下面这样一个函数:

function add(num1,num2) {
 var sum = num1 + num2;
 return sum;
}

在函数add创建时,它的作用域链中会填入一个全局对象,该全局对象包含了所有全局变量,如下图所示(注意:图片只例举了全部变量中的一部分):

跟我学习javascript的作用域与作用域链

函数add的作用域将会在执行时用到。例如执行如下代码:

var total = add(5,10);

执行此函数时会创建一个称为“运行期上下文(execution context)”的内部对象,运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链,用于标识符解析,当运行期上下文被创建时,而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。

这些值按照它们出现在函数中的顺序被复制到运行期上下文的作用域链中。它们共同组成了一个新的对象,叫“活动对象(activation object)”,该对象包含了函数的所有局部变量、命名参数、参数集合以及this,然后此对象会被推入作用域链的前端,当运行期上下文被销毁,活动对象也随之销毁。新的作用域链如下图所示:

跟我学习javascript的作用域与作用域链

在函数执行过程中,没遇到一个变量,都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部,也就是从活动对象开始搜索,查找同名的标识符,如果找到了就使用这个标识符对应的变量,如果没找到继续搜索作用域链中的下一个对象,如果搜索完所有对象都未找到,则认为该标识符未定义。函数执行过程中,每个标识符都要经历这样的搜索过程。

三、作用域链和代码优化

从作用域链的结构可以看出,在运行期上下文的作用域链中,标识符所在的位置越深,读写速度就会越慢。如上图所示,因为全局变量总是存在于运行期上下文作用域链的最末端,因此在标识符解析的时候,查找全局变量是最慢的。所以,在编写代码的时候应尽量少使用全局变量,尽可能使用局部变量。一个好的经验法则是:如果一个跨作用域的对象被引用了一次以上,则先把它存储到局部变量里再使用。例如下面的代码:

function changeColor(){
 document.getElementById("btnChange").onclick=function(){
 document.getElementById("targetCanvas").style.backgroundColor="red";
 };
}

这个函数引用了两次全局变量document,查找该变量必须遍历整个作用域链,直到最后在全局对象中才能找到。这段代码可以重写如下:

function changeColor(){
 var doc=document;
 doc.getElementById("btnChange").onclick=function(){
 doc.getElementById("targetCanvas").style.backgroundColor="red";
 };
}

这段代码比较简单,重写后不会显示出巨大的性能提升,但是如果程序中有大量的全局变量被从反复访问,那么重写后的代码性能会有显著改善。

四、改变作用域链

函数每次执行时对应的运行期上下文都是独一无二的,所以多次调用同一个函数就会导致创建多个运行期上下文,当函数执行完毕,执行上下文会被销毁。每一个运行期上下文都和一个作用域链关联。一般情况下,在运行期上下文运行的过程中,其作用域链只会被 with 语句和 catch 语句影响。

with语句是对象的快捷应用方式,用来避免书写重复代码。例如:

function initUI(){
 with(document){
 var bd=body,
 links=getElementsByTagName("a"),
 i=0,
 len=links.length;
 while(i < len){
 update(links[i++]);
 }
 getElementById("btnInit").onclick=function(){
 doSomething();
 };
 }
}

这里使用width语句来避免多次书写document,看上去更高效,实际上产生了性能问题。

当代码运行到with语句时,运行期上下文的作用域链临时被改变了。一个新的可变对象被创建,它包含了参数指定的对象的所有属性。这个对象将被推入作用域链的头部,这意味着函数的所有局部变量现在处于第二个作用域链对象中,因此访问代价更高了。如下图所示:

跟我学习javascript的作用域与作用域链

因此在程序中应避免使用with语句,在这个例子中,只要简单的把document存储在一个局部变量中就可以提升性能。

另外一个会改变作用域链的是try-catch语句中的catch语句。当try代码块中发生错误时,执行过程会跳转到catch语句,然后把异常对象推入一个可变对象并置于作用域的头部。在catch代码块内部,函数的所有局部变量将会被放在第二个作用域链对象中。示例代码:

try{
 doSomething();
}catch(ex){
 alert(ex.message); //作用域链在此处改变
}

请注意,一旦catch语句执行完毕,作用域链机会返回到之前的状态。try-catch语句在代码调试和异常处理中非常有用,因此不建议完全避免。你可以通过优化代码来减少catch语句对性能的影响。一个很好的模式是将错误委托给一个函数处理,例如:

try{
 doSomething();
}catch(ex){
 handleError(ex); //委托给处理器方法
}

        优化后的代码,handleError方法是catch子句中唯一执行的代码。该函数接收异常对象作为参数,这样你可以更加灵活和统一的处理错误。由于只执行一条语句,且没有局部变量的访问,作用域链的临时改变就不会影响代码性能了。

以上就是本文的全部内容,希望通过这篇文章大家更加了解javascript的作用域与作用域链,大家共同进步。

Javascript 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
Vue中props的使用详解
Jun 15 Javascript
小程序实现多选框功能
Oct 30 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
用VsCode编辑TypeScript的实现方法
May 07 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 #Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 #Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 #Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 #Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 #Javascript
原生js模拟淘宝购物车项目实战
Nov 18 #Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 #Javascript
You might like
PHP生成带有雪花背景的验证码
2008/09/28 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
Python  连接字符串(join %)
2008/09/06 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python类的动态修改的实例方法
2017/03/24 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
Python datetime 如何处理时区信息
2020/09/02 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
2015年初中生自我评价范文
2015/03/03 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
中秋节感想
2015/08/10 职场文书
《青山不老》教学反思
2016/02/22 职场文书
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers