js 繼承方式

2021-08-26 02:59:03 字數 1855 閱讀 1771

父類:

// 定義乙個動物類

function

animal

(name)

}// 原型方法

animal.prototype.eat = function

(food) ;

1. 原型繼承

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

function cat()

cat.prototype = new animal();

cat.prototype.name = 'cat';

var cat = new cat();

console.log(cat.name);

console.log(cat.eat('fish'));

console.log(cat instanceof animal); //

true

console.log(cat instanceof cat); //

true

缺點:

要想為子類新增屬性和方法,必須要在new animal()這樣的語句之後執行,不能放到構造器中

無法實現多繼承

來自原型物件的引用屬性是所有例項共享的(詳細請看附錄**: 示例1)

建立子類例項時,無法向父類建構函式傳參

2. 建構函式繼承

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

function

cat(name)

console.log(cat instanceof animal); // false

console.log(cat instanceof cat); // true

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

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

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

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

3. 例項繼承

核心:為父類例項新增新特性,作為子類例項返回

function

cat(name)

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

console.log(cat instanceof cat); // false

缺點:

例項是父類的例項,不是子類的例項

不支援多繼承

4. 組合繼承

核心:通過呼叫父類構造,繼承父類的屬性並保留傳參的優點,然後通過將父類例項作為子類原型,實現函式復用

function

cat(name)

cat.prototype = new animal();

//組合繼承也是需要修復建構函式指向的

//敲黑板!!!!!

cat.prototype.constructor = cat;

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

console.log(cat instanceof cat); // true

特點:

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

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

3、不存在引用屬性共享問題

4、可傳參

5、函式可復用

缺點:

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

JS 繼承方式

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

js繼承方式

一.原型鏈繼承 function parent function son son.prototype new parent 原理 子類的原型物件指向父類的例項。缺點 1.子類例項共享子類原型物件的引用屬性。2.建立子類的時候不能向父類建構函式傳參。二.建構函式繼承 function parent f...

JS繼承方式

1.原型鏈繼承 子類的原型是父類的乙個例項物件。優點 父類新增原型屬性或者原型方法,子類都能夠訪問到 簡單容易實現。缺點 原型物件的所有屬性被所有例項共享 無法實現多繼承 建立子類例項時不能向父類建構函式傳參 新增子類原型或方法,必須在語句student.prototype new people 之...