JavaScript中常見的繼承方式總結
JS和Java中雖然都有對象的概念，但這兩種對象卻大有不同。Java的對象是基于類創(chuàng)建的，JS的對象卻是基于一個特殊的對象——原型對象——創(chuàng)建的，之前看到一個蓋房子的比喻，在Java中蓋房子是先畫好圖紙再蓋房子，JS中蓋房子卻是先蓋一個樣板房再蓋其他房子，覺得也挺貼切。
所以JS中的繼承和Java中的繼承就大有不同了，是基于原型對象的，如果兩個對象形成繼承關系，那必然是其中一個對象的原型鏈上存在一個指針指向另一個對象。即使JS中的兩個類聲明了繼承關系，也是表現在原型對象上。比如：
class A {
say() {
console.log('say: hello!');
}
}
class B extends A {
constructor() {
super();
}
}
console.log(A.prototype); // {constructor: ?, say: ?}
console.log(B.__proto__); // class A {}
console.log(B.prototype); // A?{constructor: ?}首先，類是JS中函數的語法糖，并且在JS中函數本身也是對象，也就是說A和B是兩個對象，所以extends操作使得B自身的原型屬性__proto__指向了A，相當于const B = Object.create(A);。
其次，類的繼承關系也影響其生成的實例，眾所周知，函數本身存在一個特殊的對象屬性：prototype，函數經過構造調用產生的實例的原型屬性__proto__是指向這個對象的，而extends操作修改了B的prototype對象，所以B實例上的原型屬性__proto__也就被修改了，通過B實例的原型屬性__proto__能找到A的prototype，即在B實例的原型鏈上能找到A的prototype。
const b = new B();
console.log(b.__proto__); // A?{constructor: ?} 即B.prototype
console.log(b.__proto__.__proto__); // {constructor: ?, say: ?} 即A.prototype在JS中使用字面量定義的對象時，其默認的原型屬性__proto__指向Object的prototype對象，相當于默認繼承自Object，所以字面量對象可以調用Object的實例方法。
可以使用isPrototypeOf來判斷一個對象是否在另一個對象的原型鏈上。
由上述可知，JS中的繼承關系與原型對象密切相關，為了達到繼承的關聯關系（共享某些屬性和方法），就要從原型對象著手：
1.使用Object.create的方式創(chuàng)建對象，使兩個對象直接產生繼承關系
const o1 = {
name: 'o1',
age: 18,
walk() {
console.log('walking...')
}
};
const o2 = Object.create(o1);
console.log(o2.__proto__); // {name: 'o1', age: 18}
console.log(o2.walk()); // walking...
console.log(o1.isPrototypeOf(o2)); // true2.使用new操作創(chuàng)建對象，使產生的實例和類（或函數）的原型對象產生繼承關系
const b = new B();
console.log(B.prototype); // A?{constructor: ?}
console.log(b.__proto__); // A?{constructor: ?} 即B.prototype
console.log(B.prototype.isPrototypeOf(b)); // true3.使用extends關鍵字使類形成繼承關系，擴展類實例的原型鏈
class A {
say() {
console.log('say: hello!');
}
}
class B extends A {
constructor() {
super();
}
}
console.log(A.prototype); // {constructor: ?, say: ?}
const b = new B();
console.log(b.__proto__.__proto__); // {constructor: ?, say: ?} 即A.prototype
console.log(A.isPrototypeOf(B)); // true
console.log(A.isPrototypeOf(b)); // false
console.log(A.prototype.isPrototypeOf(b)); // true4.修改函數的prototype屬性使函數形成繼承關系，擴展函數實例的原型鏈
function C() {
this.name = 'c';
this.operation = function() { return 'printing...'};
}
function D() {}
D.prototype = new C();
const d = new D();
console.log(d.__proto__.__proto__ === C.prototype); // true
console.log(C.prototype.isPrototypeOf(d)); // true
console.log(D.prototype.isPrototypeOf(d)); // true這里存在一個問題，就是子類實例化時無法向父類的構造函數傳參
5.盜用父類構造函數
在函數內部通過call或apply調用父類函數（非構造調用），可繼承父類實例自身（非原型對象）的屬性和方法（相當于把子類實例（即this）傳遞進父類函數，對這個this做了一遍操作），雖然可在初始化時傳遞參數給父類，但無法形成原型鏈
function E() {
C.call(this);
this.do = function () { return 'do homework'; }
}
const e = new E();
console.log(E.prototype.isPrototypeOf(e)); // true
console.log(C.prototype.isPrototypeOf(e)); // false
console.log(e); // E?{name: 'c', operation: ?, do: ?}
console.log(e.do()); // do homework子類產生的實例無法對父類及其原型對象應用instanceof和isPrototypeOf方法。
此時如果父類想共享方法給子類，必須把方法直接在定義在函數內部，綁定到實例上，而無法通過父類的prototype對象共享。
6.結合4和5，使得子類實例可繼承父類原型對象的屬性和方法，且能形成原型鏈
function E() {
C.call(this);
this.do = function () { return 'do homework'; }
}
E.prototype = new C();
const e = new E();
console.log(E.prototype.isPrototypeOf(e)); // true
console.log(C.prototype.isPrototypeOf(e)); // true
console.log(e); // E?{name: 'c', operation: ?, do: ?}
console.log(e.do()); // do homework7.用Object.create()替換new父類實例來重寫子類的原型對象
function inheritatePrototype(subT, superT) {
let proto = Object.create(superT.prototype);
proto.constructor = subT;
subT.prototype = proto;
}
inheritatePrototype(E, C);可以舍去new中不需要的操作
8.通過工廠方式共享屬性和方式
類似工廠函數，但不是用裸的Object，以某種方式取得對象（如new等返回新對象的函數），對此對象加屬性或方法以增強功能，并返回對象。
function createAnother(original) {
let clone = Object.create(original);
clone.xx = xxx;
return clone;
}適合主要關注對象，而不在乎類型和構造函數的場景
存在的問題： 必須在構造函數中定義方法（屬于實例非原型對象的方法），函數不能重用
到此這篇關于JavaScript中常見的繼承方式總結的文章就介紹到這了,更多相關JavaScript繼承方式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了JavaScript canvas繪制圓形加載進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了微信小程序返回上一頁傳參并刷新過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
近在做一些內容搜索的工作，搜索出來的內容為html格式，列表部分需要顯示每項內容的一部分。2010-05-05
這篇文章主要為大家詳細介紹了JS實現百度搜索框，實時返回搜索建議項，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了JS煙花背景效果實現方法,實例分析了javascript操作dom元素實現煙花特效的技巧,需要的朋友可以參考下2015-03-03
大家在做Web項目，都會有注冊登錄模塊，如果是郵箱注冊，想要在輸入@后觸發(fā)下拉框顯示各個郵箱的功能。下面介紹一款jQuery實現輸入郵箱的時候，可自動補全郵箱地址，也可稱為是“輸入提示”的功能，比如輸入aaa時，自動變成aaa@163.com，有效提升網頁的人性化體驗2015-10-10
bootstrap框架中的網格系統就是將容器平分成12份，在使用的時候可以根據實際情況重新編譯LESS/SASS源碼來修改12這個數值。接下來通過本文給大家介紹Bootstrap網格系統，感興趣的朋友一起學習2016-04-04
Js數組的操作push,pop,shift,unshift等方法詳細介紹
js中針對數組操作的方法還是比較多的，今天突然想到來總結一下，也算是溫故而知新吧。不過不會針對每個方法進行講解，我只是選擇其中的一些來講,感興趣的朋友可以研究一下2012-12-12
這篇文章主要介紹了JS實現的論壇Ajax打分效果,以完整實例形式分析了JavaScript響應鼠標事件動態(tài)操作頁面元素樣式的相關技巧,需要的朋友可以參考下2015-10-10
深入理解Javascript中的循環(huán)優(yōu)化
這篇文章介紹了Javascript中的循環(huán)優(yōu)化，有需要的朋友可以參考一下2013-11-11