JS 物件的繼承方式

2022-09-01 13:15:12 字數 2137 閱讀 7555

1.原型鏈

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

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

如果讓原型物件等於另乙個型別的例項,此時的原型物件將包含乙個指向另乙個原型的指標,相應的,另乙個原型中也包含著乙個指向另乙個建構函式的指標,假如另乙個原型又是另乙個型別的例項,那麼按照上述關係,構成了例項與原型的鏈條,這就是所謂的原型鏈。------------------基本概念

function sup()

sup.prototype.getvalue=function()

function sub()

sub.prototype=new sup(); //繼承了sup

sub.prototype.getvalue=function ()

var demo=new sub();

console.log(demo.getvalue());//false

根據這個例項

就這樣以此類推,所以是原型鏈,圖中很多未注釋明白,大致結構就是這樣

console.log(demo instanceof object);

console.log(demo instanceof sup);

console.log(demo instanceof sub);

結果全是true,可以說,demo是object sup sub 任何乙個型別的例項

注意一點:子型別如果需要覆蓋父類的方法,一定要放在替換原型的語句之後。千萬不能使用物件字面量建立原型方法,這樣就會導致重寫原型鏈,構建物件也是如此。

還是存在老問題:

function sup()

function sub()

sub.prototype=new sup(); //繼承了sup

var demo=new sub();

demo.colors.push("yellow");

console.log(demo.colors);

var demo2=new sub();

console.log(demo2.colors);

結果:[ 'red', 'yellow' ]

[ 'red', 'yellow' ]

還存在第二個問題:在建立子型別的例項時,不能向父類的建構函式傳遞引數。

一般不單獨使用。

2.借用建構函式

基本思想:子類的構造函式呼叫父類的建構函式

function sup(name) 

function sub()

var demo=new sub();

console.log(demo.name);

console.log(demo.age);

這次可以傳引數了,但是函式不可以復用,所以該方法很少使用。

3.組合繼承

結合了上面兩個的優點

ps:有種建立物件的感覺

function sup(name) 

sup.prototype.sayname=function ()

function sub(name,age)

sub.prototype=new sup();

sub.prototype.constructor=sub;

sub.prototype.sayage=function ()

var demo=new sub("1",1);

demo.colors.push("yellow");

console.log(demo.colors);

demo.sayage();

demo.sayname();

var demo1=new sub("2",2);

console.log(demo1.colors);

demo1.sayage();

demo1.sayname();

結果:[ 'red', 'yellow' ]11

[ 'red' ]22

這種方式是js最常用的繼承模式

JS的繼承方式

js繼承有5種實現方式 1 繼承第一種方式 物件冒充 function parent username function child username,password var parent new parent zhangsan var child new child lisi 123456 pa...

JS 繼承方式

原型鏈繼承 所謂原型鏈繼承,就是根據js原型鏈的特性而實現的一種繼承方式。原型鏈特性 每個函式都自帶有乙個prototype屬性指向該函式對應的原型物件,而原型物件又會有乙個屬性指向該函式。而通過new 建構函式出來的例項,會有乙個屬性指向原型物件。1 原型鏈繼承 2 function supert...

js 繼承方式

父類 定義乙個動物類 function animal name 原型方法 animal.prototype.eat function food 1.原型繼承 核心 將父類的例項作為子類的原型 function cat cat.prototype new animal cat.prototype.na...