前端JS實現繼承的多種方式

2021-10-06 11:57:57 字數 4676 閱讀 1423

// 定義乙個父類

function father(name) ;

this.color = ["red", "blue"];

}// 原型方法

father.prototype.age = 18;

father.prototype.sayage = function() ;

1.原型鏈繼承:將父類的例項作為子類的原型

function son(name) 

son.prototype = new father();

let s1 = new son("s1");

let s2 = new son("s2");

s1.color.push("black");

console.log(s1.name); //s1

console.log(s1.color); //['red','blue','black']

console.log(s1.age); //18

s1.sayage(); //18

console.log(s2.name); //s2

console.log(s2.color); //['red','blue','black']

優點:

1. 簡單,易於實現

2. 父類新增原型方法、原型屬性,子類都能訪問到

缺點:1. 無法實現多繼承,因為原型一次只能被乙個例項更改

2. 來自原型物件的所有屬性被所有例項共享(上訴例子中的color屬性)

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

2.構造繼承繼承:複製父類的例項屬性給子類

function son(name) 

let s = new son("son");

console.log(s.name); // son

// 丟擲錯誤(無法繼承父類原型方法)

s.sayname(); // son

console.log(s.age); // undefined (無法繼承父類原型屬性)

console.log(s instanceof father); // false

console.log(s instanceof son); // true

優點:

1. 解決了原型鏈繼承中子類例項共享父類引用屬性的問題

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

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

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

2. 只能繼承父類例項的屬性和方法,不能繼承其原型上的屬性和方法3. 無法實現函式復用,每個子類都有父類例項函式的副本,影響效能

3.組合繼承:將原型鏈和借用建構函式的技術組合到一塊。使用原型鏈實現對原型屬性和方法的繼承,而通過建構函式來實現對例項屬性的繼承

function son(name) 

// 經過new運算子 第二次呼叫父類構造器 子類原型也增加了父類例項

son.prototype = new father();

let s = new son("son");

console.log(s.name); // son

s.sayage(); // 18

s.sayname(); // son

console.log(s.age); // 18

console.log(s instanceof father); // true

console.log(s instanceof son); // true

console.log(s.constructor === father); // true

console.log(s.constructor === son); // false

優點:

1. 彌補了構造繼承的缺點,現在既可以繼承例項的屬性和方法,也可以繼承原型的屬性和方法

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

3. 可以向父類傳遞引數

4. 函式可以復用

缺點:1. 呼叫了兩次父類建構函式,生成了兩份例項

2. constructor指向問題

4.例項繼承:為父類例項新增新特徵,作為子類例項返回

function son(name) 

let s = new son("son"); //或者直接呼叫子類建構函式 let s = son("son");

console.log(s.name); // son

s.sayage(); // 18

s.sayname(); // son

console.log(s.age); // 18

console.log(s instanceof father); // true

console.log(s instanceof son); // false

console.log(s.constructor === father); // true

console.log(s.constructor === son); // false

優點:

1. 不限制呼叫方式,不管是new 子類()還是子類(),返回的物件具有相同的效果

缺點:1. 例項是父類的例項,不是子類的例項2. 不支援多繼承

5.拷貝繼承:對父類例項中的的方法與屬性拷貝給子類的原型

function son(name) 

son.prototype.name = name;

}let s = new son("son");

console.log(s.name); // son

s.sayage(); // 18

s.sayname(); // son

console.log(s.age); // 18

console.log(s instanceof father); // false

console.log(s instanceof son); // true

console.log(s.constructor === father); // false

console.log(s.constructor === son); // true

優點:

1. 支援多繼承

缺點:1. 效率低,效能差,占用記憶體高(因為需要拷貝父類屬性)

2. 無法獲取父類不可列舉的方法(不可列舉的方法,不能使用for-in訪問到)

6.寄生組合繼承:通過寄生方式,砍掉父類的例項屬性,避免了組合繼承生成兩份例項的缺點

function son(name) 

// 方法一 自己動手建立乙個中間類

// (function() ;

// nonefun.prototype = father.prototype;

// son.prototype = new nonefun();

// son.prototype.constructor = son;

// })();

// 方法二 直接借用object.create()方法

son.prototype = object.create(father.prototype);

// 修復建構函式指向

son.prototype.constructor = son;

let s = new son("son");

console.log(s.name); // son

s.sayage(); // 18

s.sayname(); // son

console.log(s.age); // 18

console.log(s instanceof father); // true

console.log(s instanceof son); // true

console.log(s.constructor === father); // false

console.log(s.constructor === son); // true

優點:

1. 比較完美(js實現繼承首選方式)

缺點:1.實現起來較為複雜(可通過object.create簡化)

7.es6–class繼承:使用extends表明繼承自哪個父類,並且在子類建構函式中必須呼叫super

class son extends father 

}let s = new son("son");

console.log(s.name); // son

s.sayage(); // 18

s.sayname(); // son

console.log(s.age); // 18

console.log(s instanceof father); // true

console.log(s instanceof son); // true

console.log(s.constructor === father); // false

console.log(s.constructor === son); // true

JS實現繼承的多種方式(一)

注 部分名詞和示例 摘自高程及犀牛書,即站在巨人的肩膀上?將父類的屬性及原型方法初始化給例項原型,即讓乙個引用型別值繼承另乙個引用型別的屬性和方法 function supertype supertype.prototype.getsupervalue function function subty...

JS中的多種繼承方式

第一種 原型繼承 子類的原型等於父類的例項 function parent parent.prototype.getx function function child child.prototype newparent child.prototype.gety function let c1 new...

繼承的多種方式

常用的繼承方法 1.原生繼承 抽取共同點 人類 function people name,age,people.prototype.say function people.prototype.breath function 學生類 function student name,age,studentn...