声明:本文为转载
原文作者:
laruence(http://www.laruence.com)
原文地址:
http://www.laruence.com/2009/05/28/863.html
首先看一个例子:
var name = 'laruence';
function echo() {
alert(name);
var name = 'eve';
alert(name);
alert(age);
}
echo();
运行结果是什么呢?
上面的问题, 我相信会有很多人会认为是:
laruence
eve
[脚本出错]
因为会以为在echo中, 第一次alert的时候, 会取到全局变量name的值, 而第二次值被局部变量name覆盖, 所以第二次alert是’eve’.
而age属性没有定义, 所以脚本会出错.
但其实, 运行结果应该是:
undefined
eve
[脚本出错]
为什么呢?
JavaScript的作用域链
首先让让我们来看看Javasript(简称JS, 不完全代表JScript)的作用域的原理:
JS权威指南中有一句很精辟的描述: ”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.”
为了接下来的知识, 你能顺利理解, 我再提醒一下, 在JS中:”一切皆是对象, 函数也是”.
在JS中,作用域的概念和其他语言差不多, 在每次调用一个函数的时候 ,就会进入一个函数内的作用域,当从函数返回以后,就返回调用前的作用域.
JS的语法风格和C/C++类似, 但作用域的实现却和C/C++不同,并非用“堆栈”方式,而是使用列表,具体过程如下(ECMA262中所述):
任何执行上下文时刻的作用域, 都是由作用域链(scope chain,
后面介绍)来实现.
在一个函数被定义(注意不是运行)的时候, 会将它定义时刻的scope
chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候,会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参,都命名为该活动对象的命名属性,
然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.
看个例子:
var func = function(lps, rps){
var name = 'laruence';
........
}
func();
在执行func的定义语句的时候,
会创建一个这个函数对象的[[scope]]属性(内部属性,只有JS引擎可以访问,
但FireFox的几个引擎(SpiderMonkey和Rhino)提供了私有属性__parent__来访问它), 并将这个[[scope]]属性,
链接到定义它的作用域链上(后面会详细介绍), 此时因为func定义在全局环境, 所以此时的[[scope]]只是指向全局活动对象window active object.
//下面这段话非常的重要
在调用func的时候, 会创建一个活动对象(假设为aObj, 由JS引擎预编译时刻创建,
后面会介绍),并创建arguments属性,
然后会给这个对象添加俩个命名属性aObj.lps,
aObj.rps; 对于每一个在这个函数中申明的局部变量和函数定义, 都作为该活动对象的同名命名属性.
然后将调用参数赋值给形参数,对于缺少调用参数的形参,赋值为undefined。
然后将这个活动对象做为scope chain的最前端,
并将func的[[scope]](定义时候确定)属性所指向的,定义func时候的顶级活动对象, 加入到scope chain.
有了上面的作用域链, 在发生标识符解析的时候,
就会从前往后查找当前scope
chain列表的每一个活动对象的属性,如果找到同名的就返回。找不到,那就是这个标识符没有被定义。
注意到, 因为函数对象的[[scope]]属性是在定义一个函数的时候决定的, 而非调用的时候, 所以如下面的例子:
var name = 'laruence';
function echo() {
alert(name);
}
function env() {
var name = 'eve';
echo();
}
env();
运行结果是:
laruence
结合上面的知识, 我们来看看下面这个例子:
function factory() {
var name = 'laruence';
var intro = function(){
alert('I am ' + name);
}//执行factory函数执行到这一行结束时,intro已经是一个函数,拥有prototype属性,但是不能创建对象,因为函数匿名
return intro;
}
function app(para){
var name = para;
var func = factory();
func();
}
app('eve');
当调用app的时候, scope chain是由: {window活动对象(全局)}->{app的活动对象} 组成.
在刚进入app函数体时(即将要执行函数体代码的时候,但此时并未执行函数体内代码), app的活动对象有一个arguments属性, 俩个值为undefined的属性:
name和func. 和一个值为’eve’的属性para;
此时的scope chain如下:
[[scope chain]] = [
{//函数调用时的插入前端的scope chain
para : 'eve',
name : undefined,
func : undefined,
arguments : []
},
{//函数app定义时的scrope chain
window call object
}
]
当调用进入factory的函数体的时候, 此时的factory的scope chain为:
[[scope chain]] = [
{
name : undefined,
intor : undefined,arguments:[]
},
{
window call object
}
]
注意到, 此时的作用域链中, 并不包含app的活动对象.
在定义intro函数的时候,
intro函数的[[scope]]为:
[[scope chain]] = [
{//函数
name : 'laruence',
intro: undefined
},
{
window call object
}
]
从factory函数返回以后,在app体内调用intro的时候, 发生了标识符解析, 而此时的sope chain是:
[[scope chain]] = [
{
intro call object
},
{
name : 'laruence',
intro: undefined
},
{
window call object
}
]
因为scope chain中,并不包含factory活动对象. 所以, name标识符解析的结果应该是factory活动对象中的name属性,
也就是’laruence’.
所以运行结果是:
I am laruence
现在, 大家对”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.”这句话, 应该有了个全面的认识了吧?
Javascript的预编译
我们都知道,JS是一种脚本语言, JS的执行过程, 是一种翻译执行的过程.
那么JS的执行中, 有没有类似编译的过程呢?
首先, 我们来看一个例子:
<script>
alert(typeof eve); //function
function eve() {
alert('I am Laruence');
};
</script>
诶? 在alert的时候, eve不是应该还是未定义的么? 怎么eve的类型还是function呢?
恩, 对, 在JS中, 是有预编译的过程的,
JS在执行每一段JS代码之前, 都会首先处理var关键字和function定义式(函数定义式和函数表达式).
如上文所说, 在调用函数执行之前, 会首先创建一个活动对象, 然后搜寻这个函数中的局部变量定义,和函数定义,
将变量名和函数名都做为这个活动对象的同名属性, 对于局部变量定义,变量的值会在真正执行的时候才计算, 此时只是简单的赋为undefined.
而对于函数的定义,是一个要注意的地方:
这就是函数定义式和函数表达式的不同, 对于函数定义式, 会将函数定义提前.
而函数表达式, 会在执行过程中才计算. 请看以下代码:
<script>
alert(fun2); //结果:undefined
alert(typeof fun1); //结果:function
alert(typeof fun2); //结果:undefined
function fun1() { //函数定义式
alert('I am Laruence');
};
var fun2 = function fun3() { //函数表达式
}
/*
这种方式和下面方式都等效,但是这两种方式会导致fun2.prototype不一样前者为fun3后者为Object
var fun2 = function (){
}
*/
alert(typeof fun2); //结果:function
alert(typeof fun3); //结果:undefined
alert(fun3); //结果:js出错,该语句等效于alert(window.fun3.toString()); window.fun3为undefined,调用方法toString的时候出错。
alert(fun4); //结果:js出错,注意和alert(fun2)的区别,alert(fun2)是输出:undefined
</script>
等号右边的是函数定义式,只有在函数执行的时候才会计算scope chain等。例如fun3只有执行的时候才能见到自己,请看以下代码。
<script>
var fun2 = function fun3(n) { //函数表达式
if( n < 1) return;
else{
alert(n);
fun3(n-1)
}
}
fun2(3);
alert(fun3);//脚本出错
</script>
说到这里, 顺便说一个问题 :
不使用var关键字定义的变量,
相当于是全局变量,(在所有函数外使用var定义的变量也是全局变量,请参考以下代码)
var v1 = 'v1';//window.v1 = 'v1';
v2 = 'v2'; //window.v2 = 'v2';
function fun(){
var v3 = 'v3'
v4 = 'v4';
}
//window.v3 = 'undefined';
//window.v4 = 'undefined';
fun();
//window.v3 = 'undefined';
//window.v4 = 'v4';
现在, 也许你注意到了我刚才说的: JS在执行每一段JS代码..
对, 让我们看看下面的例子:
<script>
alert(typeof eve); //结果:undefined
</script>
<script>
function eve() {
alert('I am Laruence');
}
</script>
明白了么? 也就是JS的预编译是以段为处理单元的…
揭开谜底
现在让我们回到我们的第一个问题:
当echo函数被调用的时候, echo的活动对象已经被预编译过程创建, 此时echo的活动对象为:
[callObj] = {
name : undefined
}
当第一次alert的时候, 发生了标识符解析, 在echo的活动对象中找到了name属性, 所以这个name属性,
完全的遮挡了全局活动对象中的name属性.
var name = 'laruence';
function echo() {
alert(name);//如果把后面的代码去掉,输出为:laruence
var name = 'eve';
alert(name);
alert(age);
}
echo();
现在你明白了吧?
分享到:
相关推荐
在 http://www.cnblogs.com/strick/p/3992745.html 有介绍说明
javascript变量作用域 希望对大家有帮助
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。任何程序...
对javascript执行环境,作用域的深层次理解,
深化理解javascript作用域其次篇之词法作用域和动态作用域_.docx
讨论javascript作用域,很多人被javascript作用域搞迷糊了,这个应该有用。
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。 ...
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域示例详解的介绍,希望能帮助大家更好的学习JavaScript。 任何程序设计...
在 http://www.cnblogs.com/strick/p/3994209.html 有介绍说明,修正于2014.9.29
01JavaScript作用域.md
深入理解JavaScript作用域
理解JavaScript变量作用域.pdf 本人还有几十本经典javascript书籍以及无数javascript资料,要的加我qq 568094881,本人网址:www.maoshanhai.com
作用域和作用域链在Javascript和很多其它的编程语言中都是一种基础概念。但很多Javascript开发者并不真正理解它们,但这些概念对掌握Javascript至关重要。 正确的去理解这个概念有利于你去写更好,更高效和更简洁的...
JavaScript 作用域 和作用域链作用域作用域链 作用域 作用域就是变量与函数的可访问范围,作用域控制着变量与函数的可见性和生命周期。换句话说,作用域决定了代码区块中变量和其他资源的可见性。 function fun() { ...
JavaScript作用域示例详解_.docx
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。 ...
深入理解JavaScript作用域共12页.pdf.zip