js的三種繼承方式及其優缺點

2022-08-28 21:42:22 字數 2930 閱讀 7172

***

第一種,prototype的方式:

//父類  

function person()

} //子類

function man()

man.prototype = new person();

var one = new man();

console.log(one.feature); //['beard','strong']

console.log(one.hair); //black

console.log(one.eye); //black

console.log(one.skin); //yellow

console.log(one.view()); //black,black,yellow

這種方式最為簡單,只需要讓子類的prototype屬性值賦值為被繼承的乙個例項就行了,之後就可以直接使用被繼承類的方法了。 

prototype 屬性是啥意思呢? prototype 即為原型,每乙個物件 ( 由 function 定義出來 ) 都有乙個預設的原型屬性,該屬性是個物件型別。 

並且該預設屬性用來實現鏈的向上攀查。意思就是說,如果某個物件的屬性不存在,那麼將通過prototype屬性所屬物件來查詢這個屬性。如果 prototype 查詢不到呢? 

js會自動地找prototype的prototype屬性所屬物件來查詢,這樣就通過prototype一直往上索引攀查,直到查詢到了該屬性或者prototype最後為空 (「undefined」);

例如上例中的one.view()方法,js會先在one例項中查詢是否有view()方法,因為沒有,所以查詢man.prototype屬性,而prototype的值為person的乙個例項, 

該例項有view()方法,於是呼叫成功。

//父類  

function person()

} //子類

function man()

var one = new man();

console.log(one.feature); //['beard','strong']

console.log(one.hair); //black

console.log(one.eye); //black

console.log(one.skin); //yellow

console.log(one.view()); //black,black,yellow

第三種,call+prototype的方式:

//父類  

function person()

} //子類

function man()

man.prototype = new person();

var one = new man();

console.log(one.feature); //['beard','strong']

console.log(one.hair); //black

console.log(one.eye); //black

console.log(one.skin); //yellow

console.log(one.view()); //black,black,yellow

call方式的實現機制卻要多一條 man.prototype = new person(); 為啥呢? 

那是因為call方法只實現了方法的替換而沒有作物件屬性的複製操作。 

google map api 的繼承就是使用這種方式。

上面總結了三種繼承方式的實現。但是每種方法都有其優缺點。

假如父類是這樣的:

//父類  

function person(hair,eye,skin)

}

//子類

function man(hair,eye,skin)

//call方式

//子類

function man(hair,eye,skin)

function person(name)  

person.prototype.getname = function()

function chinese(name, nation)

//繼承方法

function inherit(subclass, superclass)

f.prototype = superclass.prototype;

subclass.prototype = new f();

subclass.prototype.constructor = subclass.constructor;

} inherit(chinese, person);

chinese.prototype.getnation = function() ;

var p = new person('shijun');

var c = new chinese("liyatang", "china");

console.log(p); // person

console.log(c); // chinese

console.log(p.constructor); // function person(name){}

console.log(c.constructor); // function chinese(){}

console.log(c instanceof chinese); // true

console.log(c instanceof person); // true

js的三種繼承方式及其優缺點

第一種,prototype的方式 父類 function person 子類 function man man.prototype new person var one new man console.log one.feature beard strong console.log one.hair...

js繼承方式及其優缺點?

原型鏈繼承的缺點 一是字面量重寫原型會中斷關係,使用引用型別的原型,並且子型別還無法給超型別傳遞引數。借用建構函式 類式繼承 借用建構函式雖然解決了剛才兩種問題,但沒有原型,則復用無從談起。所以我們需要原型鏈 借用建構函式的模式,這種模式稱為組合繼承 組合式繼承 組合式繼承是比較常用的一種繼承方法,...

Js繼承方式及優缺點

作為一門基於物件的語言,js中也可以通過繼承來實現父型別和子型別之間屬性或方法的傳遞,其方式有以下幾種 1 原型鏈繼承 子型別的原型物件是父型別的例項即subertype.prototype new supertype 缺點 子型別繼承了父型別原型中的所有屬性和方法,但是對於引用型別的屬性值,所有例...