js繼承的實現(es5)

2022-07-05 12:30:15 字數 3880 閱讀 5883

js對物件導向的支援很弱,所以在es6之前實現繼承會繞比較多的彎(類似於對物件導向支援弱,然後強行拼湊物件導向的特性)

es5中實現繼承的幾種方式,父類定義為super

function super(name);

this.say=function()

}super.prototype.testinherit=function()

1.建構函式繼承

簡單的在子類構造函式呼叫父類建構函式,類似就是直接把父類建構函式執行一遍,屬性拷貝乙份過來此種繼承方式導致原型鏈斷了,無法實現真正意義上的繼承,

child1.testinherit();

這個呼叫會報錯,因為child1並沒有在super的原型鏈上,導致無法呼叫其原型的方法;同時因為是拷貝的乙份父類的屬性方法,所以子類改動引用型別的屬性並不會影響其他子類的屬性

function child1(name)

}var parent=new super('

lucy');

var child1=new child1('

jack');

var child1=new child1('

jack2');

console.log(parent,child1);

console.log(child1.__proto__===child1.prototype,child1 instanceof super);//

true flase

child1.array.push(4

); console.log(child1.array,child2.array,s1.array,);

child1.testinherit();

2.使用原型鏈繼承

最基本的思想,把子類的原型設定為父類的例項

function child2(name)

}var parent=new super('

lucy');

child2.prototype=parent;

var child1=new child2('

jack');

var child2=new child2('

jack2');

child1.array.push(4);

child1.obj.b="

prop2";

console.log(child1.array,child2.array,child1.obj,child2.obj);

console.log(child1.constructor);

修改乙個例項繼承的引用屬性,可以看到其他所有例項所繼承的屬性都被修改了(他們引用的都是同乙個位址),並且子類例項的建構函式被修改了

前面1和2是繼承的兩種基本模式,也是其他繼承實現的基礎

3.使用組合繼承方式

保證例項繼承屬性私有化並且保證原型鏈不斷

function child3(name)

var parent=new super('

lucy');

child3.prototype=parent;

var child1=new child3('

jack');

var child2=new child3('

jack2');

child1.array.push(5);

console.log(child1.array,child2.array);

console.log(child1.constructor);

此種方式可以實現繼承可以保證原型回溯,同時例項繼承的引用型別的屬性互不影響;不過父類的構造函式呼叫了兩次,子類的例項的建構函式變成了super,可以做進一步優化

4. 針對上面的組合繼承父類的構造函式呼叫了2次的改進,可以將子類的原型直接設定為父類的原型,如下所示

function child4(name)

child4.prototype=super.prototype;//

改進父類構造函式呼叫兩次問題

child4.prototype.constructor=child4;

var child1=new child4('

bob'

);

var child2=new child4('

bob2');

console.log(child1.__proto__===child4.prototype);

console.log(child1.__proto__.constructor,'\n

',child4.prototype.constructor,'\n'

,super.prototype.constructor);

console.log(super.prototype.constructor);

//這種方法改變了父類的建構函式

for(var itm in

child4.prototype)

//

或者使用object.create()建立乙個過渡物件--這樣子類重新定義建構函式,就能使父類和子類各有自己的建構函式

function child5(name)

child5.prototype=object.create(super.prototype);

child5.prototype.constructor=child5;

object.defineproperty(child5.prototype,

'constructor

',);

var child=new child5('

end'

); console.log(child5.prototype.constructor,super.prototype.constructor);

console.log(child instanceof child5,child instanceof super);

console.log(child.constructor,child5.prototype.isprototypeof(child),super.prototype.isprototypeof(child));

for(var itm in

child5.prototype)

5.組合寄生繼承模式(js高程中推薦的實現)

其實這種模式跟上面的第4-2的實現沒有大的區別,不過上邊的中間物件是object.create()建立的,這裡是自己建立

function inheritproperty(sup,child);

f.prototype=sup.prototype;

var inner=new

f();

inner.constructor=child;

child.prototype=inner;

object.defineproperty(child.prototype,

'constructor

',);

}function child6(name)

inheritproperty(super,child6);

child6.prototype.sayage=function()

var child=new child6('

end'

); console.log(child.constructor);

console.log(child6.prototype.constructor);

console.log(child.sayage());

以上繼承都是以1,2為基礎的,具體說實現繼承的方式就這兩種,其他只是對這兩種的組合改造優化

es5實現繼承

繼承es5 這是乙個動物類 param age 年齡 param 性別 param name 名字 introduction 方法 function animal age,name 這是乙個貓類 param ingredients 食物 param age 年齡 當然你也可以在 這個類裡去呼叫ani...

ES5實現繼承

es5實現繼承 在面試過程中,常常會遇到一些es5,es6的問題,如果不能及時的想起來該如何讓面對,結果就可能是同學,你的面試就可能有點懸了,那麼,趕緊來一波乾貨吧 1,原型鏈繼承 原型鏈繼承的基本思想是利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法。function supertype su...

ES5實現繼承

繼承的含義 父類公有屬性和方法為子類公有屬性和方法 父類私有屬性和方法為子類私有屬性和方法 結合二者 function father name father.prototype.printname function 建構函式繼承 function son name,age 原型鏈繼承 son.pro...