JavaScript之作用域原理

原文出处

1.问题的提出

var name='wicle';
function echo(){
    alert(name);
    var name='eve';
    alert(name);
    alert(age);
}
echo();

很多人会认为上面的结果是：

wicle
eve
[脚本出错]

理由是：他们认为，在echo()中，第一次alert的时候，取到全局变量name的值，而第二次值被局部变量name覆盖，所以第二次是‘eve’，而age属性没有定义，所以脚本会出错。
但其实，运行结果是:

undefined
eve
[脚本出错]

2.JavaScript的作用域链

JS权威指南中描述的JS的作用域原理：
JavaScript中的函数运行在它们被定义的作用域里，而不是它们被执行的作用域里。
还有一句著名的话：

在JS中，一切皆是对象，函数也是。

在JS中，作用域的概念和其他语言差不多，在每次调用一个函数的时候，就会进入一个函数内的作用域，当从作用域返回以后，就会返回调用前的作用域。
JS的作用域实现并非是C/C++的堆栈方式，而是使用列表，具体如下：
（ECMA262：）
任何执行上下文时刻的作用域，都是由作用域链（scope chain）来实现。
在一个函数被定义的时候，会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性。
在一个函数对象被调用的时候，会创建一个活动对象（也就是一个对象），然后对于每一个函数的形参，都命名为该活动对象的命名属性，然后将这个活动对象作为此时的作用域链的最前端，并将这个函数对象的【【scope】】（里面是函数定义时的作用域链）加入到scope chain中。

//一个例子
var func = function (lps,rps){
    var name = 'wicle';
}
func();

在执行func的定义语句的时候，会创建一个这个函数对象的【【scope】】属性（内部属性，只有JS引擎可以访问，但FF的几个引擎（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 = 'wicle';
function echo(){
    alert(name);
}
function env(){
    var name = 'eve';
    echo();
}
env();

运行结果是

wicle

现在看下面这个例子

function factory(){
    var name='wicle';
    var intro=function(){
        alert('I am '+name);
    }
    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]]=[
{
    para:'eve',
    name:unfefined,
    func:undefined,
    arguments:[]
},{
    window call object
}
]

当调用进入factory的函数体的时候，此时的factory的scope chain为：

[[scope chain]]=[
{
    name:unfefined,
    intro:undefined,
},{
    window call object
}
]

注意到，此时的作用域链中，并不包含app的活动对象。
在定义intro函数的时候，intro函数的【【scope】】为：

[[scope chain]]=[
{
    name:'wicle',
    intro:undefined,
},{
    window call object
}
]

从factory函数返回后，在app体内调用intro的时候，发生了标识符解析，此时的scope chain 是：

[[scope chain]]=[
{
    intro call object
},{
    name:'wicle',
    intro:undefined,
},{
    window call object
}
]

因为scope chain中，并不包含factory活动对象，所以，name标识符解析的结果应该是factory活动对象中的name属性，也就是’wicle‘
所以，运行结果是

I am wicle

3.JavaScript的预编译

JS是一种脚本语言，JS的执行过程，是一种翻译执行的过程，
那么，JS的执行中，有没有类似编译的过程呢？
例子：

<script>
alert(typeof eve);//function
function eve(){
    alert ("I am wicle.");
}
</script>

在js中，是有预编译过程的，JS在执行梅一段代码之前，都会首先处理var关键字和function定义式（函数定义式和函数表达式）。
如上文所说，在调用函数执行之前，会首先创建一个活动对象，然后搜寻这个函数中的局部变量定义和函数定义，将变量名和函数名都作为这个活动对象的同名属性，对于局部变量定义，变量的值会在真正执行的时候才计算，此时只是简单的赋值为undefined
而对于函数的定义，有一个要注意的地方：

<script>
    alert(typeof eve);//结果：function
    alert(typeof walle);//结果：undefined
    function eve(){//函数定义式
        alert('I am wicle');
    };
    var walle = function(){//函数表达式
//函数体       
    }
    alert(typeof walle);//结果：function
</script>

对于函数定义式，会将函数提前执行，而函数表达式，会在执行过程中才计算。

顺便：

var name = 'wicle';
age=20;

不使用var 关键字定义的变量，相当于全局变量，联系到刚才的知识：
在对age做标识符解析的时候，因为是写操作，所以当找到全局的window活动对象的时候，都没有找到这个标识符的时候，会在window活动对象的基础上，返回一个值为undefined的age属性。
也就是说，age会被定义在顶级作用域中。

???说的什么意思？？

下面再看一个例子

<script>
    alert(typeof eve);//结果：undefined
</script>
<script>
    function(){
        alert('I am wicle');
    }
</script>

也就是说，JS的预编译是以段为处理单元的。

揭开谜底

回到最开始的问题
当echo函数被调用的时候，echo的活动对象已经被预编译过程创建，此时echo的活动对象为：

[callObj]={
    name:undefined
}

当第一次alert的时候，发生了标识符解析，在echo的活动对象中找到了name属性，所以这个name属性完全遮挡了全局活动对象中的name属性。