Javascript作用域原理(转)
来源:互联网 发布:医疗器械 淘宝 编辑:程序博客网 时间:2024/05/16 19:51
问题的提出
首先看一个例子:
1
var
name =
'laruence'
;
2
function
echo() {
3
alert(name);
4
var
name =
'eve'
;
5
alert(name);
6
alert(age);
7
}
8
9
echo();
上面的问题, 我相信会有很多人会认为是:
1
laruence
2
eve
3
[脚本出错]
但其实, 运行结果应该是:
1
undefined
2
eve
3
[脚本出错]
为什么呢?
JavaScript的作用域链
首先让让我们来看看Javasript(简称JS, 不完全代表JScript)的作用域的原理: JS权威指南中有一句很精辟的描述: ”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.”
为了接下来的知识, 你能顺利理解, 我再提醒一下, 在JS中:”一切皆是对象, 函数也是”.
在JS中,作用域的概念和其他语言差不多, 在每次调用一个函数的时候 ,就会进入一个函数内的作用域,当从函数返回以后,就返回调用前的作用域.
JS的语法风格和C/C++类似, 但作用域的实现却和C/C++不同,并非用“堆栈”方式,而是使用列表,具体过程如下(ECMA262中所述):
任何执行上下文时刻的作用域, 都是由作用域链(scope chain, 后面介绍)来实现.
在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候,会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参,都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.
1
var
func =
function
(lps, rps){
2
var
name =
'laruence'
;
3
........
4
}
5
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]]属性是在定义一个函数的时候决定的, 而非调用的时候, 所以如下面的例子:
01
var
name =
'laruence'
;
02
function
echo() {
03
alert(name);
04
}
05
06
function
env() {
07
var
name =
'eve'
;
08
echo();
09
}
10
11
env();
1
laruence
01
function
factory() {
02
var
name =
'laruence'
;
03
var
intro =
function
(){
04
alert(
'I am '
+ name);
05
}
06
return
intro;
07
}
08
09
function
app(para){
10
var
name = para;
11
var
func = factory();
12
func();
13
}
14
15
app(
'eve'
);
当调用app的时候, scope chain是由: {window活动对象(全局)}->{app的活动对象} 组成.
在刚进入app函数体时, app的活动对象有一个arguments属性, 俩个值为undefined的属性: name和func. 和一个值为’eve’的属性para;
此时的scope chain如下:
01
[[scope chain]] = [
02
{
03
para :
'eve'
,
04
name : undefined,
05
func : undefined,
06
arguments : []
07
}, {
08
window call object
09
}
10
]
1
[[scope chain]] = [
2
{
3
name : undefined,
4
intor : undefined
5
}, {
6
window call object
7
}
8
]
注意到, 此时的作用域链中, 并不包含app的活动对象.
在定义intro函数的时候, intro函数的[[scope]]为:
1
[[scope chain]] = [
2
{
3
name :
'laruence'
,
4
intor : undefined
5
}, {
6
window call object
7
}
8
]
01
[[scope chain]] = [
02
{
03
intro call object
04
}, {
05
name :
'laruence'
,
06
intor : undefined
07
}, {
08
window call object
09
}
10
]
因为scope chain中,并不包含factory活动对象. 所以, name标识符解析的结果应该是factory活动对象中的name属性, 也就是’laruence’.
所以运行结果是:
1
I am laruence
Javascript的预编译
我们都知道,JS是一种脚本语言, JS的执行过程, 是一种翻译执行的过程.
那么JS的执行中, 有没有类似编译的过程呢?
首先, 我们来看一个例子:
1
<script>
2
alert(
typeof
eve);
//function
3
function
eve() {
4
alert(
'I am Laruence'
);
5
};
6
</script>
诶? 在alert的时候, eve不是应该还是未定义的么? 怎么eve的类型还是function呢?
恩, 对, 在JS中, 是有预编译的过程的, JS在执行每一段JS代码之前, 都会首先处理var关键字和function定义式(函数定义式和函数表达式).
如上文所说, 在调用函数执行之前, 会首先创建一个活动对象, 然后搜寻这个函数中的局部变量定义,和函数定义, 将变量名和函数名都做为这个活动对象的同名属性, 对于局部变量定义,变量的值会在真正执行的时候才计算, 此时只是简单的赋为undefined.
而对于函数的定义,是一个要注意的地方:
01
<script>
02
alert(
typeof
eve);
//结果:function
03
alert(
typeof
walle);
//结果:undefined
04
function
eve() {
//函数定义式
05
alert(
'I am Laruence'
);
06
};
07
var
walle =
function
() {
//函数表达式
08
}
09
alert(
typeof
walle);
//结果:function
10
</script>
这就是函数定义式和函数表达式的不同, 对于函数定义式, 会将函数定义提前. 而函数表达式, 会在执行过程中才计算.
说到这里, 顺便说一个问题 :
1
var
name =
'laruence'
;
2
age = 26;
我们都知道不使用var关键字定义的变量, 相当于是全局变量, 联系到我们刚才的知识:
在对age做标识符解析的时候, 因为是写操作, 所以当找到到全局的window活动对象的时候都没有找到这个标识符的时候, 会在window活动对象的基础上, 返回一个值为undefined的age属性.
也就是说, age会被定义在顶级作用域中.
现在, 也许你注意到了我刚才说的: JS在执行每一段JS代码..
对, 让我们看看下面的例子:
1
<script>
2
alert(
typeof
eve);
//结果:undefined
3
</script>
4
<script>
5
function
eve() {
6
alert(
'I am Laruence'
);
7
}
8
</script>
揭开谜底
现在让我们回到我们的第一个问题:
当echo函数被调用的时候, echo的活动对象已经被预编译过程创建, 此时echo的活动对象为:
1
[callObj] = {
2
name : undefined
3
}
当第一次alert的时候, 发生了标识符解析, 在echo的活动对象中找到了name属性, 所以这个name属性, 完全的遮挡了全局活动对象中的name属性.
现在你明白了吧?
- Javascript作用域原理(转)
- Javascript作用域原理
- Javascript作用域原理
- Javascript作用域原理
- Javascript作用域原理
- Javascript作用域原理
- Javascript作用域原理
- Javascript作用域原理
- Javascript作用域原理
- Javascript作用域原理
- Javascript作用域原理
- javascript作用域原理
- Javascript作用域原理
- Javascript作用域原理
- 转载:Javascript作用域原理
- JavaScript之作用域原理
- JavaScript作用域基础原理
- JavaScript之作用域原理 2
- Linux的设备管理,主设备号和次设备号
- acm 2026
- Android程序出现错误“Field requires API level 5 (current min is 4)”的解决
- MFC-箭头的画法
- ubuntu下手动安装php-amqp模块教程
- Javascript作用域原理(转)
- 二叉树的非递归遍历
- XCODE
- 揭开内容无关链表的神秘面纱
- 异常,Object,多线程笔记
- oracle 11g 自动内存管理
- DevDiv总经理Vincent来我校做实训宣讲
- 1.2 用初级I/O 从标准输出复制到标准输出
- TCP报文