令人惊奇的JavaScript面向对象(二)

 

 

昨天谈了作用域的问题,现在让我们看看作用域在JavaScript的面向对象特性中是怎么表现的,其中会涉及到上下文的问题,这个也是我们需要好好去理解的。

 

 

学习JavaScript面向特性的朋友可能会迷惑于JavaScript中所谓类声明的方式。类似以下代码:

function WhatIam() {
    alert(
'I'm here');
}

 

你可以用它来声明一个变量:

test = new WhatIam();

或者像函数一样调用它:

WhatIam();

 

这时候我们完全puzzled了,它究竟是个什么东西? 我只能说,它是一个特殊的又让人头痛的东西。但是不要紧,只要我们能看清它是怎样运作的,不怕它是神还是鬼。

 

 

可能你在上面的代码运行情况中看不出当一个function用来声明变量和作为函数调用,它除了返回值之外还有什么不同。但是通过接下来的一些例子,相信你会对这两种用法会有更加深入的理解。

 

首先说说为什么一个function可以像类一样来声明一个变量?我是这样理解的:任何function都是一个构造函数,你不需要定义类,而当你声明function的时候,实际上已经在定义一个类了。这样看来,用function定义出来的函数实际上就是一个类的构造函数了。

 

=================这里观摩一种神奇现象=================== (请参照评论,现在已经转变为正常现象了呵呵)

 

关于这个构造函数我必须跟大家说明一种情况,在上一篇文章中我曾提到,在函数中声明的变量,如果不加var关键字,那么它默认是一个全局变量(也即window对象下的一个属性)。然而在这样的构造函数中,却存在一种特殊的情况(我至今都没搞明白的神奇“失踪”现象):

function TestClass() {

    
//你会发觉这是在定义一个全局变量
    val = 1;
    alert(val);

    
//果然它是一个全局变量
    alert(window.val);

};

//调用TestClass构造函数
test = new TestClass();

//再次验证是一个全局变量
alert(val);

 

运行结果并没有什么不妥,一切都在意料之中。然而下面这段代码的运行结果却绝对让你目瞪口呆:

function TestClass() {
    
//我认为我在定义一个全局变量
    val = 1;
    
//正常显示1
    alert(val);
    
//居然是undefined!
    alert(window.val);
    
    
//我仅仅是添加了以下代码
    var val = 10;
    
//显示了10,这里比较好理解,就是局部变量作用域遮盖了全局作用域
    alert(val);
    
//依然是undefined
    alert(window.val);
}

//调用TestClass构造函数
test = new TestClass();

//确实是undefined
alert(val);

 

看到这里你是不是已经疯狂了?我也是。最开始定义的val全局变量为何神奇失踪?

对于这种情况我也只是顺带提一下,希望引起大家注意,但是我并不能解释为何出现这样的现象,等待高人注解!!

 

关于这个现象说一点我的看法就是:如果你声明function的目的是定义一个类,就要尽量摈弃在其中使用全局变量的做法,这样就可以避免上述现象的发生。

 

==================神奇现象到此结束====================  “神奇现象”解释经大牛指点已经明晰,有兴趣可以参照评论

 

撇开那神奇现象,接下来让我们真正进入JavaScript的面向对象世界~

 

但是现在饿了,等我吃过午饭再继续呵呵~

 

欢迎交流前端开发技术!

posted @ 2008-07-22 11:45 东捣CY 阅读(3111) 评论(16) 编辑 收藏

 回复 引用 查看   
#1楼2008-07-22 12:06 | S.Sams      
一般全局变量都在函数外面定义, 不会遇到你说的这种问题.
 回复 引用 查看   
#2楼2008-07-22 12:08 | 傲然林      
继续。
 回复 引用 查看   
#3楼2008-07-22 12:30 | Yok      
1. js不应该OO。用面向对象语言的思想去写函数式语言,感觉就像我说英文时脑袋先想着中文,然后逐句翻译成Chinglish。
2. val是undefined是因为一个作用域的本地变量在程序进入这个执行场景之前就已经被准备好(很明显,值都是undefined),跟他被声明的先后顺序无关。

 回复 引用 查看   
#4楼2008-07-22 13:18 | 随风逝去(叶进)      
函数实际上是功能完整的对象。
 回复 引用   
#6楼2008-07-22 13:43 | fymap[未注册用户]
@Yok
说得很正确

 回复 引用 查看   
#7楼2008-07-22 14:00 | cloudgamer      
因为var(function也是)有预编译(非官方说法)的特性
不论var放在那个部分都会放到作用域开头定义
例如lz的例子实际执行的是:
function TestClass() {

var val;//预编译
//我认为我在定义一个全局变量 (其实已经是局部变量了)
val = 1;

.......

}

同样
a();
function a(){alert(1)}
a定义比调用晚也能执行

 回复 引用 查看   
#8楼2008-07-22 14:55 | 朝晖的.net      
楼主是不是因为同名的变量后来定义的会覆盖以前变量的内存地址?
 回复 引用 查看   
#9楼2008-07-22 16:06 | 里奥特      
楼主的的写法本来就有问题.没有什么惊奇的.
 回复 引用 查看   
#10楼2008-07-22 18:43 | 火无极      
等出3啊
 回复 引用 查看   
#11楼[楼主]2008-07-22 21:17 | 东捣CY      
太好了,谢谢大家的关注~ 谢谢大家帮忙指点!

真的很开心写出来的东西有人看并且有人指出缺点和不足,这样学到的东西更加深刻!

@cloudgamer
太谢谢你了!我在微软JScript的文档中找到了解释,和你的说法是一样的!贴出来更大家共享:
“JScript 在运行代码前处理变量声明,所以声明是位于一个条件块中还是其他某些结构中无关紧要。JScript 找到所有的变量后立即运行函数中的代码。如果变量是在函数中显式声明的 — 也就是说,如果它出现于赋值表达式的左边但没有用 var 声明 — 那么将把它创建为全局变量。”

@朝晖的.net
不是那么简单,要考虑作用域的问题。

@里奥特
我不觉得这种写法是错误的。或者你可以认为是不合适的呵呵!

 回复 引用 查看   
#12楼2008-07-23 01:01 | 真 OO无双      
繼續啊
期待面向對象部分
看了你的文章 讓我又重學一次JavaScript

其實我覺得設計JavaScript的大牛應該也不是等閒之輩
它們應該很熟C++與Java
只所以將JavaScript設計成這樣,應該是有它的道理
畢竟JavaScript是一個script與動態語言,是有很多東西不必跟C++與Java一樣

期待新作

 回复 引用 查看   
#13楼2008-07-23 10:18 | 十分之七      
--引用--------------------------------------------------
cloudgamer: 因为var(function也是)有预编译(非官方说法)的特性
<br>不论var放在那个部分都会放到作用域开头定义
<br>例如lz的例子实际执行的是:
<br>function TestClass() {
<br>
<br>var val;//预编译
<br>//我认为我在定义一个全局变量 (其实已经是局部变量了)
<br>val = 1;
<br>
<br>.......
<br>
<br>}
<br>
<br>同样
<br>a();
<br>function a(){alert(1)}
<br>a定义比调用晚也能执行
--------------------------------------------------------
领教了

 回复 引用   
#14楼2008-07-23 10:59 | xyzabc[未注册用户]
评论不错。受教了。
 回复 引用   
#15楼2009-07-15 10:49 | richie_qi[未注册用户]
cloudgamer的解释确实让人茅塞顿开
 回复 引用   
#16楼2009-12-10 11:19 | 独雕[未注册用户]
即便照 cloudgamer 的说法来解释,JS还是有一个BUG
仍然这段代码:

function TestClass() {
val = 1;
alert(val);
alert(window.val);

var val = 10;
alert(val);
alert(window.val);
}

为什么JS预编译是这样(1):
function TestClass() {
//创建TestClass的成员变量
var val ;
//此时 val 只是TestClass的成员变量,不是全局变量
val = 1;
alert(val);
alert(window.val);

var val = 10;
alert(val);
alert(window.val);
}
而不是这样呢(2)?

//先创建一个叫val的全局变量
val = 1;
function TestClass() {
//再申明一个叫val的TestClass的成员变量
var val;
alert(val);
alert(window.val);

var val = 10;
alert(val);
alert(window.val);
}

(1)的做法,明显会只创建一个成员变量val,而不会创建一个成员变量和一个全局变量,实际上应该是要创建2个都叫val的变量的。