悟透JavaScript(续)

构造对象
 
    好了，接下我们来讨论一下对象的另一种创建方法。

    除JSON外，在JavaScript中我们可以使用new操作符结合一个函数的形式来创建对象。例如：

     function  MyFunc() {};          // 定义一个空函数
     var  anObj  =   new  MyFunc();   // 使用new操作符，借助MyFun函数，就创建了一个对象

    JavaScript的这种创建对象的方式可真有意思，如何去理解这种写法呢？
 
   其实，可以把上面的代码改写成这种等价形式：

     function  MyFunc(){};
     var  anObj  =  {};      // 创建一个对象
    MyFunc.call(anObj);  // 将anObj对象作为this指针调用MyFunc函数

    我们就可以这样理解，JavaScript先用new操作符创建了一个对象，紧接着就将这个对象作为this参数调用了后面的函数。其 实，JavaScript内部就是这么做的，而且任何函数都可以被这样调用！但从 “anObj = new MyFunc()” 这种形式，我们又看到一个熟悉的身影，C++和C#不就是这样创建对象的吗？原来，条条大路通灵山，殊途同归啊！

    君看到此处也许会想，我们为什么不可以把这个MyFunc当作构造函数呢？恭喜你，答对了！JavaScript也是这么想的！请看下面的代码：

 1       function  Person(name)    // 带参数的构造函数
 2      {
 3           this .name  =  name;    // 将参数值赋给给this对象的属性
 4           this .SayHello  =   function () {alert( " Hello, I'm  "   +   this .name);};    // 给this对象定义一个SayHello方法。
 5      };
 6  
 7       function  Employee(name, salary)      // 子构造函数
 8      {
 9          Person.call( this , name);         // 将this传给父构造函数
10           this .salary  =  salary;        // 设置一个this的salary属性
11           this .ShowMeTheMoney  =   function () {alert( this .name  +   "  $ "   +   this .salary);};   // 添加ShowMeTheMoney方法。
12      };
13      
14       var  BillGates  =   new  Person( " Bill Gates " );    // 用Person构造函数创建BillGates对象
15       var  SteveJobs  =   new  Employee( " Steve Jobs " ,  1234 );    // 用Empolyee构造函数创建SteveJobs对象
16  
17      BillGates.SayHello();    // 显示：I'm Bill Gates
18      SteveJobs.SayHello();    // 显示：I'm Steve Jobs
19      SteveJobs.ShowMeTheMoney();    // 显示：Steve Jobs $1234
20  
21      alert(BillGates.constructor  ==  Person);   // 显示：true
22      alert(SteveJobs.constructor  ==  Employee);   // 显示：true
23      
24      alert(BillGates.SayHello  ==  SteveJobs.SayHello);  // 显示：false

    这段代码表明，函数不但可以当作构造函数，而且还可以带参数，还可以为对象添加成员和方法。其中的第9行，Employee构造函数又将自己接收的 this作为参数调用Person构造函数，这就是相当于调用基类的构造函数。第21、22行还表明这样一个意思：BillGates是由Person构 造的，而SteveJobs是由Employee构造的。对象内置的constructor属性还指明了构造对象所用的具体函数！

    其实，如果你愿意把函数当作“类”的话，她就是“类”，因为她本来就有“类”的那些特征。难道不是吗？她生出的儿子各个都有相同的特征，而且构造函数也与类同名嘛！

    但要注意的是，用构造函数操作this对象创建出来的每一个对象，不但具有各自的成员数据，而且还具有各自的方法数据。换句话说，方法的代码体(体现函数 逻辑的数据)在每一个对象中都存在一个副本。尽管每一个代码副本的逻辑是相同的，但对象们确实是各自保存了一份代码体。上例中的最后一句说明了这一实事， 这也解释了JavaScript中的函数就是对象的概念。

    同一类的对象各自有一份方法代码显然是一种浪费。在传统的对象语言中，方法函数并不象JavaScript那样是个对象概念。即使也有象函数指针、方法指针或委托那样的变化形式，但其实质也是对同一份代码的引用。一般的对象语言很难遇到这种情况。

    不过，JavaScript语言有大的灵活性。我们可以先定义一份唯一的方法函数体，并在构造this对象时使用这唯一的函数对象作为其方法，就能共享方法逻辑。例如：

     function  SayHello()      // 先定义一份SayHello函数代码
    {
        alert( " Hello, I'm  "   +   this .name);
    };
    
     function  Person(name)    // 带参数的构造函数
    {
         this .name  =  name;    // 将参数值赋给给this对象的属性
         this .SayHello  =  SayHello;    // 给this对象SayHello方法赋值为前面那份SayHello代码。
    };

     var  BillGates  =   new  Person( " Bill Gates " );    // 创建BillGates对象
     var  SteveJobs  =   new  Person( " Steve Jobs " );    // 创建SteveJobs对象
    
    alert(BillGates.SayHello  ==  SteveJobs.SayHello);  // 显示：true

    其中，最后一行的输出结果表明两个对象确实共享了一个函数对象。虽然，这段程序达到了共享了一份方法代码的目的，但却不怎么优雅。因为，定义 SayHello方法时反映不出其与Person类的关系。“优雅”这个词用来形容代码，也不知道是谁先提出来的。不过，这个词反映了程序员已经从追求代 码的正确、高效、可靠和易读等基础上，向着追求代码的美观感觉和艺术境界的层次发展，程序人生又多了些浪漫色彩。

   显然，JavaScript早想到了这一问题，她的设计者们为此提供了一个有趣的prototype概念。

初看原型

    prototype源自法语，软件界的标准翻译为“原型”，代表事物的初始形态，也含有模型和样板的意义。JavaScript中的prototype概念恰如其分地反映了这个词的内含，我们不能将其理解为C++的prototype那种预先声明的概念。

    JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对 象，因此我们也可以给这个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”，那么由该函数构造出来的对象应该都会具 有这个“原型”的特性。事实上，在构造函数的prototype上定义的所有属性和方法，都是可以通过其构造的对象直接访问和调用的。也可以这么 说，prototype提供了一群同类对象共享属性和方法的机制。

    我们先来看看下面的代码：

     function  Person(name)
    {
         this .name  =  name;    // 设置对象属性，每个对象各自一份属性数据
    };
    
    Person.prototype.SayHello  =   function ()   // 给Person函数的prototype添加SayHello方法。
    {
        alert( " Hello, I'm  "   +   this .name);
    }

     var  BillGates  =   new  Person( " Bill Gates " );    // 创建BillGates对象
     var  SteveJobs  =   new  Person( " Steve Jobs " );    // 创建SteveJobs对象

    BillGates.SayHello();    // 通过BillGates对象直接调用到SayHello方法
    SteveJobs.SayHello();    // 通过SteveJobs对象直接调用到SayHello方法

    alert(BillGates.SayHello  ==  SteveJobs.SayHello);  // 因为两个对象是共享prototype的SayHello，所以显示：true

    程序运行的结果表明，构造函数的prototype上定义的方法确实可以通过对象直接调用到，而且代码是共享的。显然，把方法设置到prototype的 写法显得优雅多了，尽管调用形式没有变，但逻辑上却体现了方法与类的关系，相对前面的写法，更容易理解和组织代码。

    那么，对于多层次类型的构造函数情况又如何呢？

    我们再来看下面的代码：

 1       function  Person(name)    // 基类构造函数
 2      {
 3           this .name  =  name;
 4      };
 5      
 6      Person.prototype.SayHello  =   function ()   // 给基类构造函数的prototype添加方法
 7      {
 8          alert( " Hello, I'm  "   +   this .name);
 9      };
10      
11       function  Employee(name, salary)  // 子类构造函数
12      {
13          Person.call( this , name);     // 调用基类构造函数
14           this .salary  =  salary;
15      };
16      
17      Employee.prototype  =   new  Person();   // 建一个基类的对象作为子类原型的原型，这里很有意思
18      
19      Employee.prototype.ShowMeTheMoney  =   function ()   // 给子类添构造函数的prototype添加方法
20      {
21          alert( this .name  +   "  $ "   +   this .salary);
22      };
23  
24       var  BillGates  =   new  Person( " Bill Gates " );    // 创建基类Person的BillGates对象
25       var  SteveJobs  =   new  Employee( " Steve Jobs " ,  1234 );    // 创建子类Employee的SteveJobs对象
26  
27      BillGates.SayHello();        // 通过对象直接调用到prototype的方法
28      SteveJobs.SayHello();        // 通过子类对象直接调用基类prototype的方法，关注！
29      SteveJobs.ShowMeTheMoney();  // 通过子类对象直接调用子类prototype的方法
30  
31      alert(BillGates.SayHello  ==  SteveJobs.SayHello);  // 显示：true，表明prototype的方法是共享的

    这段代码的第17行，构造了一个基类的对象，并将其设为子类构造函数的prototype，这是很有意思的。这样做的目的就是为了第28行，通过子类对象也可以直接调用基类prototype的方法。为什么可以这样呢？

    原来，在JavaScript中，prototype不但能让对象共享自己财富，而且prototype还有寻根问祖的天性，从而使得先辈们的遗产可以代 代相传。当从一个对象那里读取属性或调用方法时，如果该对象自身不存在这样的属性或方法，就会去自己关联的prototype对象那里寻找；如果 prototype没有，又会去prototype自己关联的前辈prototype那里寻找，直到找到或追溯过程结束为止。

    在JavaScript内部，对象的属性和方法追溯机制是通过所谓的prototype链来实现的。当用new操作符构造对象时，也会同时将构造函数的 prototype对象指派给新创建的对象，成为该对象内置的原型对象。对象内置的原型对象应该是对外不可见的，尽管有些浏览器(如Firefox)可以 让我们访问这个内置原型对象，但并不建议这样做。内置的原型对象本身也是对象，也有自己关联的原型对象，这样就形成了所谓的原型链。

    在原型链的最末端，就是Object构造函数prototype属性指向的那一个原型对象。这个原型对象是所有对象的最老祖先，这个老祖宗实现了诸如 toString等所有对象天生就该具有的方法。其他内置构造函数，如Function, Boolean, String, Date和RegExp等的prototype都是从这个老祖宗传承下来的，但他们各自又定义了自身的属性和方法，从而他们的子孙就表现出各自宗族的那些 特征。

    这不就是“继承”吗？是的，这就是“继承”，是JavaScript特有的“原型继承”。

    “原型继承”是慈祥而又严厉的。原形对象将自己的属性和方法无私地贡献给孩子们使用，也并不强迫孩子们必须遵从，允许一些顽皮孩子按自己的兴趣和爱好独立 行事。从这点上看，原型对象是一位慈祥的母亲。然而，任何一个孩子虽然可以我行我素，但却不能动原型对象既有的财产，因为那可能会影响到其他孩子的利益。 从这一点上看，原型对象又象一位严厉的父亲。我们来看看下面的代码就可以理解这个意思了：

     function  Person(name)
    {
         this .name  =  name;
    };
    
    Person.prototype.company  =   " Microsoft " ;  // 原型的属性
    
    Person.prototype.SayHello  =   function ()   // 原型的方法
    {
        alert( " Hello, I'm  "   +   this .name  +   "  of  "   +   this .company);
    };
    
     var  BillGates  =   new  Person( " Bill Gates " );
    BillGates.SayHello();    // 由于继承了原型的东西，规规矩矩输出：Hello, I'm Bill Gates
    
     var  SteveJobs  =   new  Person( " Steve Jobs " );
    SteveJobs.company  =   " Apple " ;     // 设置自己的company属性，掩盖了原型的company属性
    SteveJobs.SayHello  =   function ()  // 实现了自己的SayHello方法，掩盖了原型的SayHello方法
    {
        alert( " Hi,  "   +   this .name  +   "  like  "   +   this .company  +   " , ha ha ha  " );
    };

    SteveJobs.SayHello();    // 都是自己覆盖的属性和方法，输出：Hi, Steve Jobs like Apple, ha ha ha 
    
    BillGates.SayHello();    // SteveJobs的覆盖没有影响原型对象，BillGates还是按老样子输出

    对象可以掩盖原型对象的那些属性和方法，一个构造函数原型对象也可以掩盖上层构造函数原型对象既有的属性和方法。这种掩盖其实只是在对象自己身上创建了新 的属性和方法，只不过这些属性和方法与原型对象的那些同名而已。JavaScript就是用这简单的掩盖机制实现了对象的“多态”性，与静态对象语言的虚 函数和重载(override)概念不谋而合。

    然而，比静态对象语言更神奇的是，我们可以随时给原型对象动态添加新的属性和方法，从而动态地扩展基类的功能特性。这在静态对象语言中是很难想象的。我们来看下面的代码：

     function  Person(name)
    {
         this .name  =  name;
    };
    
    Person.prototype.SayHello  =   function ()   // 建立对象前定义的方法
    {
        alert( " Hello, I'm  "   +   this .name);
    };
    
     var  BillGates  =   new  Person( " Bill Gates " );    // 建立对象
    
    BillGates.SayHello();
    
    Person.prototype.Retire  =   function ()     // 建立对象后再动态扩展原型的方法
    {
        alert( " Poor  "   +   this .name  +   " , bye bye! " );
    };
    
    BillGates.Retire();  // 动态扩展的方法即可被先前建立的对象立即调用

    阿弥佗佛，原型继承竟然可以玩出有这样的法术！

 

 

原著：李战(leadzen)   http://www.cnblogs.com/leadzen/archive/2008/02/25/1073404.html

分享到：

悟透JavaScript(结) | 悟透JavaScript

• 2008-12-18 11:07
• 浏览 900
• 评论(0)
• 查看更多