快捷導(dǎo)航

JS?的繼承方式與使用場景對比分析

更新時間：2025年02月07日 08:48:29 作者：啊哈哈哈哈哈h

本文介紹了JavaScript中六種主要的繼承實現(xiàn)方式及其適用場景,并推薦在現(xiàn)代項目中優(yōu)先使用ES6的class繼承,每種繼承方式都有其特點和適用范圍,選擇合適的繼承方式對于編寫清晰、高效的JavaScript代碼至關(guān)重要,感興趣的朋友一起看看吧

一、原型鏈繼承

實現(xiàn)方式：

function Parent() { this.name = 'Parent'; }
Parent.prototype.say = function() { return this.name; };
function Child() {}
Child.prototype = new Parent(); // 原型繼承關(guān)鍵
const child = new Child();
child.say(); // 輸出 "Parent"

特點：

子類實例通過原型鏈訪問父類屬性和方法
問題：父類的引用類型屬性會被所有子類實例共享

場景：

簡單繼承結(jié)構(gòu)，無引用類型共享問題需求的場景
老項目快速實現(xiàn)繼承（現(xiàn)代開發(fā)不推薦優(yōu)先使用）

二、構(gòu)造函數(shù)繼承

實現(xiàn)方式：

function Parent(name) { this.name = name; }
function Child(name) {
  Parent.call(this, name); // 構(gòu)造函數(shù)繼承關(guān)鍵
}
const child = new Child('Child');
child.name; // 輸出 "Child"

特點：

將父類屬性復(fù)制到子類實例
優(yōu)點：解決引用屬性共享問題
缺陷：無法繼承父類原型上的方法

場景：

需要 實例屬性獨立性的場景（如每個對象需要獨立狀態(tài)）
不支持子類復(fù)用父類原型方法（若無需復(fù)用則合適）

三、組合繼承（經(jīng)典繼承）

實現(xiàn)方式：

function Parent(name) {
  this.name = name;
}
Parent.prototype.say = function() { return this.name };
function Child(name) {
  Parent.call(this, name); // 第1次調(diào)用父類構(gòu)造函數(shù)
}
Child.prototype = new Parent(); // 第2次調(diào)用父類構(gòu)造函數(shù)（問題根源）
Child.prototype.constructor = Child;
const child = new Child('Child');
child.say(); // 輸出 "Child"

特點：

結(jié)合原型鏈繼承（方法繼承）和構(gòu)造函數(shù)繼承（屬性繼承）
缺陷：父類構(gòu)造函數(shù)被調(diào)用兩次，子類原型中存在冗余屬性

場景：

傳統(tǒng)項目的常規(guī)繼承需求（ES6 出現(xiàn)前的常見方案）
需要同時滿足方法復(fù)用和實例屬性獨立的場景

四、原型式繼承

實現(xiàn)方式：

const parent = { name: 'Parent', friends: ['Alice'] };
const child = Object.create(parent); // 核心API
child.name = 'Child';
child.friends.push('Bob'); // friends被所有基于parent創(chuàng)建的對象共享

特點：

類似于對象淺拷貝
問題：引用類型屬性共享（與原型鏈相同）

場景：

簡單對象繼承需求（無構(gòu)造函數(shù)存在的場景）
原型鏈的極簡替代方案（如舊環(huán)境無 Object.create 時的 polyfill）

五、寄生式繼承

實現(xiàn)方式：

function createChild(parent) {
  const obj = Object.create(parent);
  obj.sayHi = () => 'Hi'; // 添加額外方法
  return obj;
}
const child = createChild({ name: 'Parent' });

特點：

工廠模式增強對象
缺陷：方法無法復(fù)用，類似構(gòu)造函數(shù)問題

場景：

需要給對象快速擴展額外方法的場景
不適合大型繼承結(jié)構(gòu)（復(fù)用性差）

六、寄生組合式繼承（最優(yōu)解）

實現(xiàn)方式：

function inheritPrototype(Child, Parent) {
  const prototype = Object.create(Parent.prototype); // 創(chuàng)建父類原型的副本
  prototype.constructor = Child; // 修復(fù)構(gòu)造函數(shù)指向
  Child.prototype = prototype; // 賦值給子類原型
}
function Parent(name) { this.name = name; }
Parent.prototype.say = function() { return this.name; };
function Child(name) {
  Parent.call(this, name); // 屬性繼承
}
inheritPrototype(Child, Parent); // 方法繼承

特點：

只調(diào)用一次父類構(gòu)造函數(shù)，避免組合繼承的冗余問題
保留完整的原型鏈結(jié)構(gòu)

場景：

現(xiàn)代項目推薦的標(biāo)準(zhǔn)繼承方式
適用于所有復(fù)雜繼承需求（效率最高）

七、ES6 class 繼承

實現(xiàn)方式：

class Parent {
  constructor(name) { this.name = name }
  say() { return this.name }
}
class Child extends Parent { // extends 關(guān)鍵字
  constructor(name) {
    super(name); // super調(diào)用父類構(gòu)造函數(shù)
  }
}
const child = new Child('Child');
child.say(); // 輸出 "Child"

特點：

語法糖，本質(zhì)基于原型和寄生組合式繼承
支持 static、super 等特性

場景：

現(xiàn)代項目首選方式
需要清晰類結(jié)構(gòu)、繼承關(guān)系明確的場景

總結(jié)與場景對比

繼承方式	適用場景	現(xiàn)代選擇優(yōu)先級
原型鏈繼承	快速實現(xiàn)簡單原型鏈（已過時）	??
構(gòu)造函數(shù)繼承	需要獨立實例屬性的場景	????
組合繼承	傳統(tǒng)項目兼容性解決方案	????
寄生組合式繼承	需要高效且標(biāo)準(zhǔn)的繼承方案	????????
ES6 class 繼承	現(xiàn)代項目開發(fā)（Babel轉(zhuǎn)譯后兼容性好）	??????????