javascript繼承方法以及優缺點

2021-09-13 11:02:51 字數 2369 閱讀 1530

前提: 組合指的是什麼?就是這兩部分的組合:建構函式屬性的繼承和建立子類和父類原型的鏈結。

借用建構函式繼承

function super(name)

super.prototype.sayname = function();

function sub(name)

var instance1 = new sub('小明');

var instance2 = new sub('小明');

instance1.friends.push('張三');

console.log(instance1.friends);//["小紅", "小強", "張三"]

console.log(instance2.friends);//["小紅", "小強"]

缺點: 沒辦法繼承超類中的原型屬性和方法

原型鏈繼承

function super()

super.prototype.sayname = function();

function sub(){}

sub.prototype = new super();

sub.prototype.constructor = sub;

//此句的作用是為了不讓繼承鏈的紊亂,因為任何乙個prototype物件都有乙個constructor屬性,指向它的建構函式,

//並且每乙個例項也有乙個constructor屬性,預設呼叫prototype物件的constructor屬性,

//所以new animal()的constructor指向super,導致sub.prototype.constructor改而指向了super 為了不導致紊亂 所以要手動指回

var instance = new sub();

instance.sayname();//小明

缺點:

1.當父類中包含引用型別屬性值時,其中乙個子類的多個例項中,只要其中乙個例項引用屬性只發生修改乙個修改,其他例項的引用型別屬性值也會立即發生改變

2.原因是父類的屬性變成子類的原型屬性

組合式繼承

(原型繼承+借用建構函式繼承)

function super()

super.prototype.sayname = function();

function sub()

sub.prototype = new super();

var instance1 = new sub();

var instance2 = new sub();

instance1.friends.push('張三');

console.log(instance1.friends);//["小紅", "小強", "張三"]

console.log(instance2.friends);//["小紅", "小強"]

instance1.sayname();//小明

instance2.sayname();//小明

缺點:

1.兩次呼叫父建構函式 並且子類的自由屬性和原型鏈上的屬性會重複覆蓋 (列印instance1物件 instance1.prototype和instance1都有乙個name屬性)

2.同原型鏈繼承的第乙個缺點

寄生組合式繼承

寄生組合式繼承 兩步:

1.在子類中呼叫父類的建構函式:

2.建立子類和父類原型的鏈結

最簡單的方法就是用object.create()方法對父類的原型進行淺複製,賦給子類原型:

sub.prototype=object.create(super.prototype); //相比之前的原型鏈繼承方法:subtype.prototype=new supertype();這裡沒有建立建構函式;

//寄生組合式繼承函式

function inheritprototype(sub,super)

//最終的實現方法

function super(name)

super.prototype.sayname=function()

function sub(name,age)

inheritprototype(subtype,supertype); //實現繼承

//其實,說白了寄生組合式繼承就是乙個借用建構函式 + 相當於淺拷貝父類的原型物件

這種方式的高效率體現它只呼叫了一次parent建構函式,並不會建立不必要的、多餘的屬性。與此同時,原型鏈還能保持不變;開發人員普遍認為寄生組合式繼承是引用型別最理想的繼承方式.

Javascript物件導向繼承方法

function supertype supertype.prototype.saycolor function function subtype subtype.prototype new supertype subtype.prototype.sayname function var a new...

javascript繼承的幾種方法

理解鏈結 1,簡單原型鏈 function super function sub sub.prototype new super 核心 var sub1 new sub var sub2 new sub sub1.val 2 sub1.arr.push 2 alert sub1.val 2 aler...

JavaScript 繼承 組合繼承

繼承 組合繼承 組合繼承也叫做偽經典繼承,指的是將原型鏈和借用建構函式的技術組合到一塊,從而發揮二者之長的一種繼承模式。組合繼承的基本思路是使用原型鏈實現對原型屬性和和方法的繼承,而通過借用建構函式來實現對例項屬性的繼承。組合繼承通過在原型上定義方法實現了函式復用,又能夠保證每個例項都有它自己的屬性...