悟透JavaScript-构造对象

<script>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>

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

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

view plain copy to clipboard print ?

1. function MyFunc() {};         //定义一个空函数   
2. var anObj = new MyFunc();  //使用new操作符，借助MyFun函数，就创建了一个对象   
3. JavaScript的这种创建对象的方式可真有意思，如何去理解这种写法呢？  

    function MyFunc() {};         //定义一个空函数
    var anObj = new MyFunc();  //使用new操作符，借助MyFun函数，就创建了一个对象
    JavaScript的这种创建对象的方式可真有意思，如何去理解这种写法呢？

 
   其实，可以把上面的代码改写成这种等价形式：

view plain copy to clipboard print ?

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

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

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

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

view plain copy to clipboard print ?

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

 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 + " ___FCKpd___2quot; + 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对象时使用这唯一的函数对象作为其方法，就能共享方法逻辑。例如：

view plain copy to clipboard print ?

1. function SayHello()     //先定义一份SayHello函数代码   
2. {   
3.     alert("Hello, I'm " + this.name);   
4. };   
5.   
6. function Person(name)   //带参数的构造函数   
7. {   
8.     this.name = name;   //将参数值赋给给this对象的属性   
9.     this.SayHello = SayHello;   //给this对象SayHello方法赋值为前面那份SayHello代码。   
10. };   
11.   
12. var BillGates = new Person("Bill Gates");   //创建BillGates对象   
13. var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象   
14.   
15. alert(BillGates.SayHello == SteveJobs.SayHello); //显示：true  

    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概念。