令人惊奇的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的面向对象世界～

 

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