JS 物件導向之繼承 原型鏈

2022-03-04 21:32:47 字數 2366 閱讀 8369

繼承是oo語言中乙個重要的特性和概念。許多的oo語言中都支援兩種繼承方式:介面繼承和實現繼承。

ecmascript只支援實現繼承,其實現繼承主要是靠原型鏈來實現。在php語言中,是使用extend來實現繼承。那麼我們就先來講講原型鏈。

原型鏈的基本思想是利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法。

簡單回顧下建構函式、原型和例項的關係:

每個建構函式都有乙個原型物件,原型物件包含乙個指向建構函式的指標(prototype),而例項則包含乙個指向原型物件的內部指標(__proto__)。

實現原型鏈有一種基本模式,其**大致如下:

function

supertype()

supertype.prototype.getsupervalue = function

() ;

function

subtype()

//繼承了supertype

subtype.prototype = new

supertype();

subtype.prototype.getsubvalue = function

() ;

var instance = new

subtype();

alert(instance.getsubvalue());

//true

以上**是定義了2個型別:supertype()和subtype(),每個型別分別有乙個屬性和方法。2者的區別是subtype繼承了supertype。通過建立supertype例項並將該例項賦給subtype.prototype。原來存在於supertype中所有的屬性和方法也都存在於subtype.prototype中了。在確立了這種繼承關係後,又在subtype.prototype中新增了乙個方法。

請看下圖展示的例項以及建構函式和原型之間的關係:ps:找線畫了半天沒畫好,先這麼看吧:)

確定原型和例項的關係:

可以通過兩種方式來確定原型和例項之間的關係。第一種方式是使用instanceof操作符;第二種是使用isprototypeof()方法。

alert(instance instanceof object); //

true

alert(instance instanceof supertype); //

true

alert(instance instanceof subtype); //

true

alert(object.prototype.isprototypeof(instance));

//true

alert(supertype.prototype.isprototypeof(instance)); //

true

alert(subtype.prototype.isprototypeof(instance)); //

true

原型鏈的問題:

雖然很強大,可以用它來實現繼承,但它也存在一些問題。最主要的問題來自包含引用型別值的原型。在通過原型來實現繼承時,原型實際上會變成乙個型別的例項。於是,原先的例項屬性也順理成章的變成了現在的原型的屬性了。看例子吧!

function

supertype()

function

subtype()

//繼承了supertype

subtype.prototype = new

supertype();

var instance1 = new

subtype();

instance1.colors.push("black");

alert(instance1.colors);

//red,green,blue,black

var instance2 = new

subtype();

alert(instance2.colors);

//red,green,blue,black

supertype建構函式定義了乙個屬性,該屬性包含乙個陣列(引用型別值)。當subtype通過原型繼承了supertype之後,subtype.prototype就變成了supertype的乙個例項。因此也擁有了supertype的所有屬性和方法。結果subtype會共享這個colors屬性,我們通過對instance1.colors的修改,能夠通過instance2.colors反映出來。

第二個問題是建立子型別的例項時,不能向超型別的建構函式中傳遞函式。鑑於這幾點問題,實踐中很少會單獨使用原型鏈。

JS物件導向之原型鏈

什麼是原型鏈?原型鏈就是例項物件與原型之間的連線 function example example.prototype.num 20 如果注釋此行以及上一行,結果是什麼呢?object.prototype.num 30 var e1 new example console.log e1.num 有這...

js原型物件 原型鏈 繼承

原型物件 只要建立了乙個新函式,就會根據一些特定的規則為該函式建立乙個prototype屬性,這個屬性指向的物件就是該新函式的原型物件。預設情況下,所有原型物件都會自動獲取乙個constructor屬性,這個屬性是乙個指向prototype屬性所在函式的指標 原型物件的優點 可以讓所有物件例項共享它...

js物件導向(2) 原型鏈的繼承

下面介紹的原型鏈的繼承是指建構函式通過 物件的prototype 屬性來完成的繼承 建構函式的通過prototype 的原型鏈繼承 function man function person name,age person.prototype new man 改變person的prototype pe...