js繼承的四種實現方式

2021-08-20 09:33:15 字數 2832 閱讀 9344

一、原型鏈繼承

核心:將父類的例項作為子類的原型。

//宣告乙個動物的類

function animal(name)

}animal.prototype.***="公"; //父類新增原型方法/原型屬性,子類都能訪問到

animal.prototype.age="3";

animal.prototype.sleep=function()

animal.prototype.weight="20kg";

//宣告乙個子類

function dog()

/* 原型鏈繼承 直接原型乙個父類*/

dog.prototype=new animal(); //要想為子類新增屬性和方法,必須要在new animal()這樣的語句之後執行,不能放到構造器中無法實現多繼承

dog.prototype.name="哈士奇";

dog.prototype.weight="50kg";

var dog=new dog();//建立子類例項時,無法向父類建構函式傳參

console.log(dog.name);//哈士奇

console.log(dog.eat());//哈士奇正在吃

console.log(dog.sleep());//哈士奇正在睡覺

console.log(dog.weight);//50kg

console.log(dog instanceof dog); //true //例項是子類的例項,也是父類的例項

console.log(dog instanceof animal);//true

//動物類例項化為物件

var animal=new animal("貓");

console.log(animal.name);

console.log(animal.eat());

console.log(animal.***);

console.log(animal.sleep());

特點:非常純粹的繼承關係,例項是子類的例項,也是父類的例項。

父類新增原型方法/原型屬性,子類都能訪問到。

簡單,易於實現。

缺點:要想為子類新增屬性和方法,必須要在new animal()這樣的語句之後執行,不能放到構造器中,無法實現多繼承。

二、構造繼承

核心:使用父類的建構函式來增強子類例項,等於是複製父類的例項屬性給子類(沒用到原型)

function animal(name,***,age)

}animal.prototype.color=function()

function type(type)

type.prototype.weight=function()

function dog(name2,***2,age2,type2)

var dog=new dog("薩摩","公","3歲","犬類");//建立子類例項時,可以向父類傳遞引數 例項並不是父類的例項,只是子類的例項

console.log(dog.name);//薩摩

console.log(dog.***);//公

console.log(dog.age);//3歲

console.log(dog.eat());//薩摩正在吃飯

console.log(dog.type);//犬類

/*只能繼承父類的例項屬性和方法,不能繼承原型屬性/方法*/

/*console.log(dog.weight());

console.log(dog.color())*///會報錯

特點:

建立子類例項時,可以向父類傳遞引數

可以實現多繼承(call多個父類物件)

缺點:例項並不是父類的例項,只是子類的例項

只能繼承父類的例項屬性和方法,不能繼承原型屬性/方法

無法實現函式復用,每個子類都有父類例項函式的副本,影響效能

三、組合繼承

function animal(name)

}animal.prototype.sleep=function ()

function cat(name)

//原型鏈繼承

cat.prototype=new animal();

var cat=new cat("mao");

console.log(cat.name);//mao

console.log(cat.eat());//mao正在吃飯

console.log(cat.sleep());//mao正在睡覺

特點:

彌補了方式二的缺陷,可以繼承例項屬性/方法,也可以繼承原型屬性/方法

既是子類的例項,也是父類的例項

不存在引用屬性共享問題   可傳參   函式可復用

缺點:呼叫了兩次父類建構函式,生成了兩份例項(子類例項將子類原型上的那份遮蔽了)

四、例項繼承

function animal(name)

}animal.prototype.sleep=function ()

function cat()

var cat=new cat();

console.log(cat.name);//mao

console.log(cat.eat());//mao正在吃飯

console.log(cat.sleep());//mao正在睡覺

特點:不限制呼叫方式,不管是new 子類

()還是子類

(),返回的物件具有相同的效果

缺點:例項是父類的例項,不是子類的例項

不支援多繼承

JS 繼承的四種方式

js 本身是基於物件導向開發的程式語言。類 封裝 繼承 多型 繼承機制使得不同的例項可以共享建構函式的原型物件的屬性和方法 以下情況都是 b 為子類,a 為父類 基本思想是利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法。我們知道每個建構函式都有乙個原型物件 prototype 原型物件都包含乙...

js繼承的四種方式,例項詳解

js 本身是基於物件導向開發的語言 封裝 繼承 多型 封裝 類也是乙個函式,把實現乙個 的功能進行封裝,以此實現 低耦合高內聚 多型 過載 重寫 重寫 子類重寫父類上的方法 過載 相同的方法,由於引數或者返回值不同,具備了不同的功能。js中的過載 同乙個方法內,根據傳參不同實現不同的功能 繼承 子類...

JavaScript四種繼承方式

原型繼承 function person name,age person.prototype.say function function man man.prototype new person 霍頓 22 這句是重點,敲黑板 var man1 new man man1.say var man2 n...