原型的引出

来源：互联网发布：淘宝网如何购买处方药编辑：程序博客网时间：2024/05/23 15:49

如果没有原型这个方案，可能我们会遇到多个副本的问题，先看下面的代码：参考文章：js精通

<script> function Person(name)   //带参数的构造函数 {     this.name = name;   //将参数值赋给给this对象的属性     this.SayHello = function() {document.write("<br>Hello, I'm " + this.name);};   //给this对象定义一个SayHello方法。 }; function Employee(name, salary)     //子构造函数 {     Person.call(this, name);        //将this传给父构造函数     this.salary = salary;       //设置一个this的salary属性     this.ShowMeTheMoney = function() {document.write("<br>"+this.name + " $" + this.salary);};  //添加ShowMeTheMoney方法。 }; var BillGates = new Person("Bill Gates");   //用Person构造函数创建BillGates对象 var SteveJobs = new Employee("Steve Jobs", 1234);   //用Empolyee构造函数创建SteveJobs对象 var Me = new MyEmployee("it is me"); BillGates.SayHello();   //显示：I'm Bill Gates SteveJobs.SayHello();   //显示：I'm Steve Jobs SteveJobs.ShowMeTheMoney();   //显示：Steve Jobs $1234 document.write("<br>"); document.write(BillGates.constructor == Person);  //显示：true document.write("<br>"); document.write(SteveJobs.constructor == Employee);  //显示：true document.write("<br>"); document.write(BillGates.SayHello == SteveJobs.SayHello); //显示：false</script>

这段代码表明，函数不但可以当作构造函数，而且还可以带参数，还可以为对象添加成员和方法。其中的第9行，Employee构造函数又将自己接收的 this作为参数调用Person构造函数，这就是相当于调用基类的构造函数。第21、22行还表明这样一个意思：BillGates是由Person构造的，而SteveJobs是由Employee构造的。对象内置的constructor属性还指明了构造对象所用的具体函数！
    但要注意的是，用构造函数操作this对象创建出来的每一个对象，不但具有各自的成员数据，而且还具有各自的方法数据。换句话说，方法的代码体(体现函数逻辑的数据)在每一个对象中都存在一个副本。尽管每一个代码副本的逻辑是相同的，但对象们确实是各自保存了一份代码体。上例中的最后一句说明了这一实事，这也解释了JavaScript中的函数就是对象的概念。
    同一类的对象各自有一份方法代码显然是一种浪费。在传统的对象语言中，方法函数并不象JavaScript那样是个对象概念。即使也有象函数指针、方法指针或委托那样的变化形式，但其实质也是对同一份代码的引用。一般的对象语言很难遇到这种情况。
    不过，JavaScript语言有大的灵活性。我们可以先定义一份唯一的方法函数体，并在构造this对象时使用这唯一的函数对象作为其方法，就能共享方法逻辑。例如：

<script>  function SayHello()     //先定义一份SayHello函数代码    {        document.write("<br>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对象BillGates.SayHello();    SteveJobs.SayHello();    document.write("<br>");document.write(BillGates.SayHello == SteveJobs.SayHello); //显示：true</script>

如果把10行的代码换成下面的代码，那么同一类不同对象都不能共享一个方法 this.SayHello = function() {document.write("<br>Hello, I'm " + this.name);};那么18行将输出false。

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

<script> function Person(name)    {        this.name = name;   //设置对象属性，每个对象各自一份属性数据    };        Person.prototype.SayHello = function()  //给Person函数的prototype添加SayHello方法。    {        document.write("<br>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方法 document.write("<br>");for(var item in BillGates){   document.write("<br>"+item);} document.write("<br>");for(var item in SteveJobs){   document.write("<br>"+item);}     document.write("<br><br>");document.write(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello，所以显示：true</script>

输出结果为：

Hello, I'm Bill Gates
Hello, I'm Steve Jobs

name
SayHello

name
SayHello

true
再看下面的代码：（为了看出区别，可以先注释第21行的代码Employee.prototype = new Person();）

<script>function Person(name)   //基类构造函数                                                    {                                                                                             this.name = name;   this.SayGoodbye = function(){    document.write("Goodbye,my friend");     };};                                                                                                                                                                                  Person.prototype.SayHello = function()  //给基类构造函数的prototype添加方法               {                                                                                             document.write("<br>Hello, I'm " + this.name);                                        };                                                                                                                                                                                  function Employee(name, salary) //子类构造函数                                            {                                                                                             Person.call(this, name);    //调用基类构造函数                                            this.salary = salary;                                                                 };                                                                                                                                                                                  Employee.prototype = new Person();  //建一个基类的对象作为子类原型的原型，这里很有意思                                                                                              Employee.prototype.ShowMeTheMoney = function()  //给子类添构造函数的prototype添加方法     {                                                                                             document.write("<br>"+this.name + " $" + this.salary);                                };                                                                                                 var BillGates = new Person("Bill Gates");   //创建基类Person的BillGates对象               var SteveJobs = new Employee("Steve Jobs", 1234);   //创建子类Employee的SteveJobs对象                                                                                               BillGates.SayHello();       //通过对象直接调用到prototype的方法      document.write("<br>");for(var item in BillGates){       document.write("<br>"+item);} document.write("<br>");for(var item in SteveJobs){       document.write("<br>"+item);} document.write("<br>");SteveJobs.SayHello();       //通过子类对象直接调用基类prototype的方法，关注！             SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类prototype的方法                                                                                                                 document.write("<br><br>BillGates.SayHello == SteveJobs.SayHello: ");   document.write(BillGates.SayHello == SteveJobs.SayHello); //显示：true，表明prototype的方法是共享的</script>

如果注释Employee.prototype = new Person(); 这行代码，将发现Employee 少了一个SayHello()的函数，这就是第21行 prototype的妙处，基类prototype方法。
另外 document.write(BillGates.SayHello == SteveJobs.SayHello); //显示：true，表明prototype的方法可以实现继承中方法共享，而不是简单的同一类的不同对象之间的共享。