DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js原型繼承的兩種方法對比介紹
js原型繼承的兩種方法對比介紹
編輯:JavaScript綜合知識     

這篇文章主要介紹了js原型繼承的兩種方法對比介紹,需要的朋友可以參考下

在實際的項目中,我們通常都是用構造函數來創建一個對象,再將一些常用的方法添加到其原型對象上。最後要麼直接實例化該對象,要麼將它作為父類,再申明一個對象,繼承該父類。

 

而在繼承的時候有兩種常用方式,今天我們就來稍作探討

 

 代碼如下:

//父類

 function Person(name){

    this.name = name;

};

 

 // 子類

 function Student(sex){

  Person.apply(this,arguments); //繼承父類的構造函數

  this.sex=sex;

 };

 

 

 

1,繼承Prototype:

 

 代碼如下:

Student.prototype = Person.prototype; //執行完此句時,Student.prototype.constructor 指向的是Person,為什麼了?因為Person.prototype.constructor指向Person,對象的賦值實質上是引用賦值,所以Student.prototype.constructor也指向Person

Student.prototype.constructor = Student;  //  將Student.prototype.constructor 指回Person

 

用Person的原型對象來覆蓋Student的原型對象;前面說到對象的賦值實質上是引用賦值,所以如果Student.prototype上的任何修改都會體現到Person.prototype中,即子類會影響父類。

 

看下面:

 

 代碼如下:

Student.prototype.add=function(){alert("add")};

Person.prototype.add();//彈出add

 

 

2,繼承實例:

 

 代碼如下:

Student.prototype = new Person();  //如果此處不傳遞參數,可以不寫();即直接寫成 new Person;

2 Student.prototype.constructor = Student;

 

用Person的實例來覆蓋Student的原型對象;創建了實例,比起前面那種,顯示是浪費內存了,不過這同時也解決了上面那種方法的缺點,即此時Student.prototype上的任何修改不會體現到Person.prototype中,即子類不會影響父類。

 

3,利用控對象來組合1和2的優點,去掉缺點

 

代碼如下:

var  F = function(){};

F.prototype = Person.prototype;

Student.prototype  = new F();

Student.prototype.constructor  = Student;

 

F是個空對象,上面只有些原型方法,實例化時內存占用較少,同時也隔離開了子類對父類的影響。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved