问题
先看一个例子:
var name = "name";
function echo() {
alert(name);
var name = "anotherName";
alert(name);
alert(age);
}
echo();
大家觉得这个东西的输出是什么?
估计很多人会觉得是:
name
eve
[脚本出错]
大家的分析过程可能是这样的:
在echo中,第一次alert的时候,会去到全局变量name的值,而第二次值被局部变量name覆盖,所以第二次alert是”eve”.而age属性没有定义,所以脚本会出错.
然而,事实并非如此:
undefined
eve
[脚本出错]
可是why?
作用域链
想知道why,首先我们得先知道JavaScript中的作用域的原理以及什么是作用域链(scope chain).
在JavaScript权威指南里面有这么一句话说的很好: JavaScript中的函数是运行在他们被定义的作用域里,而不是他们被执行的作用域里.
在JavaScript中,作用域的概念和其他语言差不多,每次调用函数,就会进入一个函数内的作用域,当从函数返回以后,就返回调用前的作用域.任何执行上下文时刻的作用,都是由作用域链来实现的.大致过程如下:
- 在一个函数被定义的时候,会将他定义时刻的scope chain链接到这个函数对象的[[scope]]属性.
- 在一个函数对象被调用的时候,会创建一个活动对象,然后对于每一个函数的形参,都命名为该活动对象的命名属性,然后将这个活动对象做为此时的作用域链(scope chain)最前端,并将这个函数对象[[scope]]加入到scope chain中.
举个例子说明一下:
var func = function(a, b) {
var name = "name";
... ...
}
func();
我们来分析一下上面这段代码.
在执行func的定义语句的时候,会创建一个这个函数对象的[[scope]]属性,并将这个[[scope]]属性,链接到定义它的作用域链上,此时因为func定义在全局环境,所以此时的[[scope]]只是指向全局活动对象window active object.
在调用func的时候,会创建一个活动对象,我们假设他为object,并创建实参对象(arguments),然后会给这个对象添加俩命名属性object.a,object.b;对于每一个在这个函数中申明的局部变量和函数定义,都作为该活动对象同名命名属性.
然后将调用参数赋值给形参,对于缺少的实参,赋值为undefined.
然后将这个活动对象作为scope chain的最前端,并将func的[[scope]]属性所指向的,定义func时候的顶级活动对象加入到scope chain.
有了上面的作用域链,在发生标识符解析的时候,就会逆向查询当前的scope chain列表每一个活动对象的属性,如果找到同名的就返回,招不到就标识undefined
注意,因为函数对象的[[scope]]属性是在定义一个函数的时候决定的,而非调用函数的时候,所以如下面的例子:
var name = "name";
function echo() {
alert(name);
}
function env() {
var name = "eve";
echo();
}
env();
运行的结果是:
name
再来一个例子:
function factory() {
var name = "x";
var intro = function() {
alert('Hello ' + 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和fund.和一个值为’eve'的属性para;此时scope chain如下:
[[scope chain]] = [
{
para : 'eve',
name : undefined,
func : undefined,
arguments : []
},{
window call object
}
]
当调用进入factory的函数体的时候,此时的factory的scope chain为:
[[scope chain]] = [
{
name : undefined,
intro : undefined
},{
window call object
}
]
请注意,此时的作用域链,并不包含app的活动对象.
在定义intro函数的时候,intro函数的[[scope]]为:
[[scope chain]] = [
{
name : 'x',
intro ; undefined
},{
window call object
}
]
从factory函数返回以后,在app体内调用intro的时候,发生了标识符解析,而此时的scope chain是:
[[scope chain]] = [
{
intro call object
},{
name : 'x',
intro : undefined
},{
window call object
}
]
因为scope chain中,并不包含factory活动对象,所以,name标识符解析的结果应该是factory活动对象中的name属性,也就是’x’.
所以运行结果应该是:
Hello x
所以请记住:
JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里!!!
生命不息，折腾不止...
I'm not a real coder,but i love it so much!
