JS繼承的6種方式非ES6

本篇部落格主要來整合一下js繼承的六種方式及其優缺點。首先我們提供乙個父類：

// 父類
function person(name) 
}

本節中我們使用到的子類如下：

// 子類
function staff(office) 
}

staff.prototype = new person('staff');
const a = new staff('d302');
const b = new staff('d232');
a.showname(); // satff
a.showoffice(); // d302
b.showname(); // staff
b.showoffice(); // d232

上述語句即為原型鏈繼承，此時，a與b有乙個共有屬性name，要注意此時name為基本資料型別，而原型鏈繼承構造的子物件之間共享的是引用資料型別，如果我單獨對a的name屬性進行修改，那麼b的name屬性不會因此而改變。舉例說明如下：

staff.prototype = new person('staff');
const a = new staff('d302');
const b = new staff('d232');
a.name = 'change'
a.showname(); // change
b.showname(); // staff

但是，如果person物件的name屬性值引用型別的話，那麼構造出的子物件的屬性就有可能會受到影響，例項如下：

staff.prototype = new person([1,2,3]);
const a = new staff('d302');
const b = new staff('d232');
a.showname(); // [1,2,3]
b.showname(); // [1,2,3]
a.name.push(4);
a.showname(); // [1,2,3,4]
b.showname(); // [1,2,3,4]
a.name = [1,2]
a.showname(); // [1,2]
b.showname(); // [1,2,3,4]

大家可以看到如上兩種情況，我在往name屬性裡面push的時候a和b的屬性值都發生了變化，但是我在將a的name屬性重新賦值為[1,2]時，b的name值並沒有發生變化。這是因為進行push操作之後引用資料型別的位址值並沒有發生變化，而b的name屬性指向的位址與a的name屬性指向的位址相同，所以a和b會同時發生變化。但是我將其重新複製時，a的name屬性指向的位址發生了變化，b指向的還是原來的位址，所以a和b並沒有發生同步變化。

優點：能通過instanceof和isprototypeof的檢測

缺點：

父物件中的屬性也變成了子物件的prototype中的公用屬性

2. 不能向父型別的建構函式中傳遞引數

3. 只能繼承乙個父類

function staff(name, office) 
}const a = new staff('a', 'd302');
const b = new staff('b', 'd232');
a.showname(); // a
b.showname(); // b
console.log(a instanceof person); // false

通過這個例項我們可以看出我們可以向父類傳遞引數了，並且可以繼承多個父類函式，只要呼叫多次call函式即可.

優點：

可以向父類傳遞引數

可以實現多父類繼承

父類的屬性不會被子類共享

缺點：呼叫建構函式的話就相當於在每個新建物件內都有乙個獨立的屬性已經函式，staff與person並不能使用instanceof方法，兩者並不存在指向關係，函式復用並沒有派上用場。

function staff(name, office) 
}staff.prototype = new person();
const a = new staff('a', 'd302');
const b = new staff('b', 'd232');
a.showname(); // a
b.showname(); // b
console.log(a instanceof person); // true

這種方法就是對原型鏈繼承和建構函式繼承的結合。

優點：

繼承前兩者的優點

可以實現對建構函式的復用

缺點：呼叫了兩次父類建構函式，更耗記憶體

function container(obj)
f.prototype = obj;
return new f();
}const child = new person('child');
const staff = container(child);
staff.showname(); // child

這種繼承方式其實可以看做是直接複製了父類。

缺點：無法復用

function container(obj)
f.prototype = obj;
return new f();
}function staff(obj, office) 
return sub;
}const child = new person('child');
const a = staff(child, 'd232');
const b = staff(child, 'c433');
a.showname(); // child
a.showoffice(); // d232
b.showname(); // child
b.showoffice(); // c433

這種繼承方式就是在原型式繼承的基礎上又加了乙個函式用來新增加屬性，解決了原型式繼承需要後續增加屬性的問題。

寄生組合式繼承強化的部分就是在組合繼承的基礎上減少一次多餘的呼叫父類的建構函式：

function staff(name, office) 
}staff.prototype = object.create(person.prototype);
staff.prototype.constructor = person;
const a = new staff('a', 'd232');
const b = new staff('b', 'c433');
a.showname(); // a
a.showoffice(); // d232
b.showname(); // b
b.showoffice(); // c433

JS繼承的6種方式非ES6

js繼承的6種方式

繼承及ES6繼承

繼承 ES6的繼承語法

JS繼承的6種方式 非ES6

js繼承的6種方式

繼承及ES6繼承

繼承 ES6的繼承語法

相關推薦

JS繼承的6種方式非ES6