作用域是程序开发的一个重要的部分。
javascript 程序的每一个字节都是在这个或那个运行上下文(execution context)中执行的。你可以把这些上下文想象为代码的邻居,它们可以给每一行代码指明:从何处来,朋友和邻居又是谁。没错,这是很重要的信息,因为 javascript社会有相当严格的规则,规定谁可以跟谁交往,我们通常可以把这些社会边界称为作用域。并且有充足的重要性在每一位邻居的宪章里立法,而这个宪章就是我们要说的上下文的作用域链(scope chain)【摘抄,写的挺形象】。
理解JavaScript作用域链首选的知道javascript一些JavaScript的运行机制
(1)JavaScript是先编译再执行【并且是边编译边执行】
编译期对所有的变量和函数处理,注意:变量处理只为变量的声明,而没有赋值,所有再编译期时无法分别是否提示变量是否已初始化。
执行时JavaScript解释器按代码逻辑从上到下依次执行,如果变量没有初始化则为undefined。
(2)JavaScript与html一样都是从上到下依次执行
(3)JavaScript是按script块编译。 即解释器时在加载完毕<script language="JavaScript" type="text/javascript"> </script> 的</script> 标签是才编译因此在<script>中直接使用下个<script>中的函数或者变量时,会提示undefined;
所说JavaScript是按<script>块执行,但对应块中的函数及变量都属于同一作用域window。
(4)JavaScript中只有函数有作用域,而对于if、for、while、switch等块结构是没有作用域的。
其他还有很多这里就不一一列举了,以上四条条主要是在后面讲解JavaScript域链有作用,如果就想更深一步的了解JavaScript的运行机制可以看看书籍的<<javascript征途>>第一章讲的挺好的,我也是从里面才知道前面的四条。JavaScript作用域机制
javascript的作用域机制:词法作用域(lexcical scope)。通俗地讲,就是javascript变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,编译器通过静态分析就能确定,因此词法作用域也叫做静态作用域(static scope)。但需要注意,with和eval的语义无法仅通过静态技术实现,所以只能说javascript的作用域机制非常接近词法作用域(lexical scope)。javascript引擎在执行每个函数实例时,都会创建一个执行环境(execution context)。执行环境中包含一个调用对象(call object), 调用对象是一个scriptObject结构(scriptObject是 与函数相关的一套静态系统,与函数实例的生命周期保持一致),用来保存内部变量表varDecls、内嵌函数表funDecls、父级引用列表 upvalue等语法分析结构(注意varDecls和funDecls等信息是在语法分析阶段就已经得到,并保存在语法树中。函数实例执行时,会将这些 信息从语法树复制到scriptObject上)。
词法作用域(lexical scope)它的实现方法,就是作用域链(scope chain)。作用域链是一个name lookup机制,首先在当前执行环境的scriptObject中寻找,没找到,则顺着upvalue到父scriptObject中寻找,一直lookup到全局调用对象(global object)。 【这段也是摘抄的后面将结合实例介绍该作用域机制】;
换句话说“JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里”。
JavaScript作用域分为两类
全局作用域window及函数调用作用域
全局作用域只存在唯一的一个及widows作用域,函数作用域可以嵌套函数作用域。
哪些变量具有函数的作用域呢,哪些是具有全局的作用域?
函数作用域就简单提一下,函数中使用var声明的变量和函数都是函数作用域当中。
JavaScript全局的作用域主要包含三类:
一:window对象的属性或函数。
示例一
<script language="JavaScript" type="text/javascript">
window.wVar = "wVar";//wVar window对象的属性具有全局作用域
function getWvar(){
alert( wVar );//弹出wVar
}
getWvar();
</script>
二:<script>中直接定义的变量。
示例二
<script language="JavaScript" type="text/javascript">
var wVar = "wVar";//在<script>声明的变量都具有window作用域
//wVar = "wVar";//该方式声明已可以
function getWvar(){
alert( wVar );//弹出wVar
alert( window.wVar );//弹出wVar,全局变量即为window的属性
}
getWvar();
</script>
三:函数中未带var修饰符的变量。
示例三
<script language="JavaScript" type="text/javascript">
function setWvar(){
wVar = "wVar";//未加var 修饰符为全局变量
}
function getWvar(){
alert( wVar );//弹出wVar
alert( window.wVar );//弹出wVar,全局变量即为window的属性
}
setWvar();
getWvar();
</script>
<script language="JavaScript" type="text/javascript">
function setWvar(){
var wVar = "wVar";//加var 为setWvar域的局部变量
}
function getWvar(){
alert( wVar );//出错提示未定义
}
setWvar();
getWvar();
</script>
注意,为什么window域的属性能在函数中使用,这就是JavaScript作用域机制造成的,预编译函数会创建作用域【scope】,并在调用该函数时将该作用域链接到,已有的作用域链的最前端。示例二中,预编译函数getWvar时,将创建getWvar的作用域,
[[scope]] = [
{
}
]
调用函数getWvar,将该作用域链接到已有作用域链的最前端,此时作用域链为 getWvar->window,
[[scope chain]] = [
{
}, {
//window
wVar : 'laruence'
}
]
当getWvar使用wVar变量时先会在getWvar函数作用域中查找是否存在变量wVar的定义,它没有查询到,就会作用域链的上级window域查找变量wVar,能查询到所以弹出值wVar。如果getWvar函数中存在变量wVar的定义,则在函数变量wVar会屏蔽window域同名的变量。总结来说"调用对象位于作用域链的前端,局部变量(在函数内部用var声明的变量)、函数参数及Arguments对象都在函数内的作用域中——这意味着它们隐藏了作用域链更上层的任何同名的属性。";。
会有人问函数调用是否会造成作用域链嵌套,请看如下示例。
<script language="JavaScript" type="text/javascript">
function setWvar(){
var wVar = "wVar";
getWvar();
}
function getWvar(){
alert( wVar );
}
setWvar();
</script>
示例中的的setWvar();执行结果会怎样,是否值为wVar,答案是错误的。实际值为undefine;
这个怎么会这样呢,不时按照作用域链来说getWvar->setWvar->window结构如下
[[scope chain]] = [
{
//getWvar scope
wVar = undefine
},
{
//setWvar scope
wVar="wVar"
}, {
//window
}
]
以上理解是错误的,JavaScript作用域中最重要的是“JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里”;
getWvar是在script中定义,所以调用它时,它的作用域链为
[[scope chain]] = [
{
//getWvar scope
wVar = undefine
},
{
//window
}
]
同样对于setWvar()来说也是在script中定义,所以调用它时,它的作用域链为
[[scope chain]] = [
{
//setWvar scope
wVar = undefine
},
{
//window
}
]
并不因为调用关系而将作用域链接在一起。
所以调用函数setWvar时,getWvar的作用域也仅仅是getWvar定义是的作用域,而不时它执行的作用域。
那如下情况呢
<script language="JavaScript" type="text/javascript">
function setWvar(){
function getWvar(){
alert( wVar );
}
var wVar = "wVar";
getWvar();
}
setWvar();
</script>
结果为值wVar,怎么和上面的结果不一样,这里你要特别的注意到,getWvar()被定义在setWvar函数里面的所以getWvar函数的作用链为
[[scope chain]] = [
{
//getWvar scope
wVar = undefine
},
{
//setWvar scope
wVar="wVar"
}, {
//window scope
}
]
这样你就能看到为什么值为wVar【这也是JavaScript闭包的应用】。
再看如下示例
<script language="JavaScript" type="text/javascript">
wVar = "window"
function setWvar(){
alert( wVar ); //1
var wVar = "wVar";
alert( wVar ); //2
}
setWvar();
</script>
猜猜会是什么结果是否1弹出window,2弹出的wVar。
真正的结果是1为undefined,2为wVar。
我们从作用域链解释为什么会这样,首先wVar定义在setWvar中所以setWvar应该处于setWvar的scope中【上面提到的第四条,只有函数存在作用域,编译时就已经确定局部变量wVar作用域时setWvar】,所以它会覆盖window scope中wVar 的值。而当执行到1时,此时局部变量wVar并未赋值,所以系统化给出初始值为undefined。而执行到2时,此时局部变量已赋值为wVar,所以2弹出wVar;
上面的示例代码等价于
<script language="JavaScript" type="text/javascript">
wVar = "window"
function setWvar(){
var wVar;
alert( wVar ); //1
wVar = "wVar";
alert( wVar ); //2
}
setWvar();
</script>
要理解这些示例,请一定要理解前面讲到的JavaScript运行机制,及词法作用域。
函数作用域链就写到这里,以后再补充作用域与闭包,
参考
http://www.laruence.com/2009/05/28/863.html
http://www.cnblogs.com/hhyy329/archive/2009/08/20/1550827.html
分享到:
相关推荐
javascript作用域链(Scope Chain)初探.docx
scope-chains-closures, Javascript作用域链和闭包 workshop 范围链和闭包 workshop正在启动$ npm install -g scope-chains-closures$ scope-chains-closures # or, shorter: sccjs使用箭头
本文实例讲述了JavaScript作用域链。分享给大家供大家参考,具体如下: 跟其他语言一样,变量和函数的作用域揭示了这些变量和函数的搜索路径。对于JavaScript而言,理解作用域更加重要,因为在JavaScript中,作用域...
主要介绍了javascript作用域链(Scope Chain)用法,结合实例形式较为详细的分析了javascript作用域链(Scope Chain)的概念、功能与相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript 采用词法作用域(lexical scoping),函数执行依赖的变量作用域是由函数定义的时候决定,而不是函数执行的时候决定,通过本文给大家介绍JavaScript作用域链、执行上下文与闭包相关知识,感兴趣的朋友一起...
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。任何程序...
先来一段简单的javascript代码: ...1.javascript引擎会在页面加载脚本被执行时为每个函数创建一个作用域(执行上下文)及作用域链。 2.javascript引擎在产生这些作用域后,会创建一个堆栈。 3.将onload对应的
1. JavaScript函数的作用域链分为定义时作用域链和运行时作用域链; 2.函数被定义的时候,它有一个属性[[scope]]标明它的定义作用域链,定义时作用域链[[scope]]遵守这样的规则:一个函数的定义时作用域链[[scope]]...
主要为大家详细介绍了javascript作用域链与执行环境,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。 ...
之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包,觉得写得很清晰,可以简单理解闭包产生原因,但看评论都在说了解了作用域链和活动对象才能真正理解闭包,起初不以为然,后来在跟公司同事交流的时候发现作用...
JavaScript 作用域 和作用域链作用域作用域链 作用域 作用域就是变量与函数的可访问范围,作用域控制着变量与函数的可见性和生命周期。换句话说,作用域决定了代码区块中变量和其他资源的可见性。 function fun() { ...
JavaScript中有Scope(作用域),Scope chain(作用域链),Execute context(执行上下文),Active Object (活动对象),Dynamic Scope(动态作用域),Closure(闭包)这些概念,要理解这些概念,我们从静态和动态两个方面去...