Javascript物件導向程式設計(二) 繼承

2021-05-24 07:05:00 字數 2898 閱讀 9591

上一次的文章,主要介紹了如何"封裝"資料和方法,從原型物件生成例項。

今天要介紹的是,多個原型物件之間如何"繼承"。

比如,現在有乙個"動物"物件,

function animal();

那麼,下一步必然是為新的prototype物件加上constructor屬性,並將這個屬性指回原來的建構函式。

o.prototype.constructor = o;

3. 直接繼承prototype

由於animal物件中,不變的屬性都可以直接寫入animal.prototype。所以,我們也可以讓cat()跳過 animal(),直接繼承animal.prototype。

現在,我們先將animal物件改寫:

function animal()

animal.prototype.species = "動物";

然後,將cat的prototype物件,然後指向animal的prototype物件,這樣就完成了繼承。

cat.prototype = animal.prototype;

cat.prototype.constructor = cat;

var cat1 = new cat("大毛","黃色");

alert(cat1.species); // 動物

與前一種方法相比,這樣做的優點是效率比較高(不用執行和建立animal的例項了),比較省記憶體。缺點是 cat.prototype和animal.prototype現在指向了同乙個物件,那麼任何對cat.prototype的修改,都會反映到animal.prototype。

所以,上面這一段**其實是有問題的。請看第二行

cat.prototype.constructor = cat;

這一句實際上把animal.prototype物件的constructor屬性也改掉了!

alert(animal.prototype.constructor); // cat

4. 利用空物件作為中介

由於"直接繼承prototype"存在上述的缺點,所以可以利用乙個空物件作為中介。

var f = function(){};

f.prototype = animal.prototype;

cat.prototype = new f();

cat.prototype.constructor = cat;

f是空物件,所以幾乎不佔記憶體。這時,修改cat的prototype物件,就不會影響到animal的prototype物件。

alert(animal.prototype.constructor); // animal

5. prototype模式的封裝函式

我們將上面的方法,封裝成乙個函式,便於使用。

function extend(child, parent) ;

f.prototype = parent.prototype;

child.prototype = new f();

child.prototype.constructor = child;

child.uber = parent.prototype;

使用的時候,方法如下

extend(cat,animal);

var cat1 = new cat("大毛","黃色");

alert(cat1.species); // 動物

這個extend函式,就是yui庫如何實現繼承的方法。

另外,說明一點。函式體最後一行

child.uber = parent.prototype;

意思是為子物件設乙個uber屬性,這個屬性直接指向父物件的prototype屬性。這等於是在子物件上開啟一條通道,可以直接呼叫父物件的方法。這一行放在這裡,只是為了實現繼承的完備性,純屬備用性質。

6. 拷貝繼承

上面是採用prototype物件,實現繼承。我們也可以換一種思路,純粹採用"拷貝"方法實現繼承。簡單說,如果把父物件的所有屬性和方法,拷貝進子物件,不也能夠實現繼承嗎?

首先,還是把animal的所有不變屬性,都放到它的prototype物件上。

function animal(){}

animal.prototype.species = "動物";

然後,再寫乙個函式,實現屬性拷貝的目的。

function extend2(child, parent) {

var p = parent.prototype;

var c = child.prototype;

for (var i in p) {

c[i] = p[i];

c.uber = p;

這個函式的作用,就是將父物件的prototype物件中的屬性,一一拷貝給child物件的prototype物件。

使用的時候,這樣寫:

extend2(cat, animal);

var cat1 = new cat("大毛","黃色");

alert(cat1.species); // 動物

(完)

javascript 學習筆記之物件導向程式設計

物件特殊屬性 資料屬性和訪問器屬性 1 資料屬性 configurable 是否可刪除 enumerable 是否可列舉for in writable 是否可寫 value 值 要修改預設屬性必須使用defineproperty object,key,descriptor 方法 例如 var per...

JavaScript物件導向

方法一 建構函式法 function cat cat.prototype.showname function var cat new cat cat.name tom cat.showname tom 它用建構函式模擬 類 在其內部用this關鍵字指代例項物件。類的屬性和方法,還可以定義在建構函式的...

javaScript物件導向

code 類lecture構造器 使用兩個字串函式,name和teacher function lecture name,teacher 類lecture的方法,生成乙個顯示該課程資訊的字串 lecture.prototype.display function 類schedule的構造器 使用乙個l...