Javascript原型

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

从上面代码可以看出,BillGates和SteveJobs的SayHello是共享以快内存的,dna是Person类和SayHello方法联系不够紧密。

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

用原型模式写出来如下:

[html][/html] view plaincopyprint?

  1. function Person(name)
  2.    {
  3.        this.name = name;   //设置对象属性,每个对象各自一份属性数据
  4.    };
  5.    Person.prototype.SayHello = function()  //给Person函数的prototype添加SayHello方法。
  6.    {
  7.        alert(“Hello, I’m ” + this.name);
  8.    }
  9.    var BillGates = new Person(“Bill Gates”);   //创建BillGates对象
  10.    var SteveJobs = new Person(“Steve Jobs”);   //创建SteveJobs对象
  11.    BillGates.SayHello();   //通过BillGates对象直接调用到SayHello方法
  12.    SteveJobs.SayHello();   //通过SteveJobs对象直接调用到SayHello方法
  13.    alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello,所以显示:true

再看一下下面的代码,两个对象的sayhello方法不是共享内存的:

[html][/html] view plaincopyprint?

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

Employee意义上是Person类的子类,它会调用父类的构造方法:Person.call(this),那么我的疑问就是其继承了父类的SayHello方法为什么Sayhello不共享内存呢?

书上说每一个对象的函数体,都在内存中存储着自己的副本,就像java的父类和子类一样,则虽然他们的结构是一样的但是不共享内存。

再看下面的例子:

[html][/html] view plaincopyprint?

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

第17行父类的对象返回给子类的prototype属性,且基类的sayhello方法也声明为prototype,这样父类和子类的sayhello方法就是共享内存的。言外之意,父类和子类对象指针都指向同一片区域。

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

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

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

标签