Javascript物件導向程式設計(三)

2021-07-11 18:01:31 字數 2502 閱讀 1995

日期: 2023年5月24日

這個系列的第一部分介紹了"封裝",第二部分介紹了使用建構函式實現"繼承"。

今天是最後乙個部分,介紹不使用建構函式實現"繼承"。

一、什麼是"非建構函式"的繼承?

比如,現在有乙個物件,叫做"中國人"。

var chinese = ;

還有乙個物件,叫做"醫生"。

var doctor =

請問怎樣才能讓"醫生"去繼承"中國人",也就是說,我怎樣才能生成乙個"中國醫生"的物件?

這裡要注意,這兩個物件都是普通物件,不是建構函式,無法使用建構函式方法實現"繼承"。

二、object()方法

json格式的發明人douglas crockford,提出了乙個object()函式,可以做到這一點。

function object(o)

f.prototype = o;

return new f();

}

這個object()函式,其實只做一件事,就是把子物件的prototype屬性,指向父物件,從而使得子物件與父物件連在一起。

使用的時候,第一步先在父物件的基礎上,生成子物件:

var doctor = object(chinese);

然後,再加上子物件本身的屬性:

doctor.career = '醫生';

這時,子物件已經繼承了父物件的屬性了。

alert(doctor.nation); //中國

三、淺拷貝

除了使用"prototype鏈"以外,還有另一種思路:把父物件的屬性,全部拷貝給子物件,也能實現繼承。

下面這個函式,就是在做拷貝:

function extendcopy(p) ;

for (var i in p)

c.uber = p;

return c;

}

使用的時候,這樣寫:

var doctor = extendcopy(chinese);

doctor.career = '醫生';

alert(doctor.nation); // 中國

但是,這樣的拷貝有乙個問題。那就是,如果父物件的屬性等於陣列或另乙個物件,那麼實際上,子物件獲得的只是乙個記憶體位址,而不是真正拷貝,因此存在父物件被篡改的可能。

請看,現在給chinese新增乙個"出生地"屬性,它的值是乙個陣列。

chinese.birthplaces = ['北京','上海','香港'];

通過extendcopy()函式,doctor繼承了chinese。

var doctor = extendcopy(chinese);

然後,我們為doctor的"出生地"新增乙個城市:

doctor.birthplaces.push('廈門');

發生了什麼事?chinese的"出生地"也被改掉了!

alert(doctor.birthplaces); //北京, 上海, 香港, 廈門

alert(chinese.birthplaces); //北京, 上海, 香港, 廈門

所以,extendcopy()只是拷貝基本型別的資料,我們把這種拷貝叫做"淺拷貝"。這是早期jquery實現繼承的方式。

四、深拷貝

所謂"深拷貝",就是能夠實現真正意義上的陣列和物件的拷貝。它的實現並不難,只要遞迴呼叫"淺拷貝"就行了。

function deepcopy(p, c) ;

for (var i in p) ;

deepcopy(p[i], c[i]);

} else

}return c;

}

使用的時候這樣寫:

var doctor = deepcopy(chinese);

現在,給父物件加乙個屬性,值為陣列。然後,在子物件上修改這個屬性:

chinese.birthplaces = ['北京','上海','香港'];

doctor.birthplaces.push('廈門');

這時,父物件就不會受到影響了。

alert(doctor.birthplaces); //北京, 上海, 香港, 廈門

alert(chinese.birthplaces); //北京, 上海, 香港

目前,jquery庫使用的就是這種繼承方法。

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...