JavaScript抽象類與普通類的本質(zhì)區(qū)別及說明
更新時間：2025年10月29日 08:33:54 作者：斯~內(nèi)克
本文探討了面向?qū)ο缶幊讨械某橄蟾拍罴捌湓贘avaScript中的演進,包括抽象類與普通類的區(qū)別、抽象方法的核心特征、設(shè)計模式中的應(yīng)用、內(nèi)存結(jié)構(gòu)與性能對比,以及工程實踐中的選擇標準,文章還介紹了TypeScript中的高級抽象特性以及現(xiàn)代JavaScript的替代方案
一、面向?qū)ο缶幊痰某橄笳軐W
1.1 抽象在軟件設(shè)計中的核心地位
在軟件工程領(lǐng)域，抽象是控制復(fù)雜度的核心武器。通過抽象，我們可以：
- 隱藏實現(xiàn)細節(jié)，聚焦核心功能
- 建立清晰的層級關(guān)系
- 定義通用的行為契約
- 實現(xiàn)模塊間的解耦
1.2 JavaScript 中的抽象演進
JavaScript 的抽象支持經(jīng)歷了三個階段演進：
| 階段 | 特性 | 抽象能力 |
|---|---|---|
| ES5 及之前 | 基于原型繼承 | 基礎(chǔ)抽象能力 |
| ES6 類語法 | class 關(guān)鍵字 | 語法糖級抽象支持 |
| TypeScript | abstract 關(guān)鍵字 | 完整抽象能力 |
// ES5 原型抽象模擬
function Animal() {
if (new.target === Animal) {
throw new Error("抽象類不能實例化");
}
}
Animal.prototype.speak = function() {
throw new Error("抽象方法必須被實現(xiàn)");
};
// ES6 類抽象模擬
class Animal {
constructor() {
if (new.target === Animal) {
throw new Error("抽象類不能實例化");
}
}
speak() {
throw new Error("抽象方法必須被實現(xiàn)");
}
}
二、抽象類與普通類的本質(zhì)區(qū)別
2.1 核心特性對比
| 特性 | 抽象類 | 普通類 |
|---|---|---|
| 實例化能力 | 不能直接實例化 | 可以直接實例化 |
| 抽象方法聲明 | 可以包含抽象方法 | 不能包含抽象方法 |
| 方法實現(xiàn)要求 | 抽象方法必須由子類實現(xiàn) | 所有方法都有默認實現(xiàn) |
| 設(shè)計目的 | 定義規(guī)范，強制實現(xiàn) | 提供完整功能實現(xiàn) |
| 繼承關(guān)系 | 必須被繼承才有意義 | 可直接使用或繼承 |
2.2 類型系統(tǒng)差異（TypeScript）
// 抽象類定義
abstract class Animal {
abstract makeSound(): void; // 抽象方法
move(): void { // 實現(xiàn)方法
console.log("Moving...");
}
}
// 普通類定義
class Dog {
bark(): void {
console.log("Woof!");
}
run(): void {
console.log("Running...");
}
}
三、抽象方法的核心特征
3.1 抽象方法的定義與約束
抽象方法是面向?qū)ο笤O(shè)計的契約機制，其核心特征：
- 無實現(xiàn)體：只有方法簽名，沒有具體實現(xiàn)
- 強制實現(xiàn)：繼承類必須提供具體實現(xiàn)
- 多態(tài)基礎(chǔ)：支持運行時動態(tài)綁定
3.2 JavaScript 中的抽象方法實現(xiàn)模式
class PaymentProcessor {
constructor() {
if (new.target === PaymentProcessor) {
throw new Error("抽象類不能實例化");
}
if (this.processPayment === undefined) {
throw new Error("必須實現(xiàn) processPayment 方法");
}
}
}
class CreditCardProcessor extends PaymentProcessor {
processPayment(amount) {
console.log(`Processing credit card payment: $${amount}`);
}
}
四、設(shè)計模式中的應(yīng)用差異
4.1 模板方法模式中的抽象類
abstract class DataExporter {
// 抽象方法
abstract formatData(data: any[]): string;
// 模板方法
export(data: any[]): void {
const formatted = this.formatData(data);
this.saveToFile(formatted);
console.log("Export completed");
}
// 具體方法
private saveToFile(content: string): void {
console.log(`Saving content to file: ${content}`);
}
}
class CSVExporter extends DataExporter {
formatData(data: any[]): string {
return data.map(item => Object.values(item).join(",")).join("\n");
}
}
4.2 普通類在策略模式中的應(yīng)用
class PaymentStrategy {
process(amount) {
throw new Error("請使用具體策略實現(xiàn)");
}
}
class CreditCardStrategy extends PaymentStrategy {
process(amount) {
console.log(`Processing credit card: $${amount}`);
}
}
class PayPalStrategy extends PaymentStrategy {
process(amount) {
console.log(`Processing PayPal: $${amount}`);
}
}
// 使用策略
const processor = new PaymentContext(new CreditCardStrategy());
processor.executePayment(100);
五、內(nèi)存結(jié)構(gòu)與性能對比
5.1 內(nèi)存模型差異
| 內(nèi)存區(qū)域 | 抽象類 | 普通類 |
|---|---|---|
| 方法表 | 包含抽象方法占位符 | 包含完整方法實現(xiàn) |
| 實例結(jié)構(gòu) | 無法創(chuàng)建實例 | 每個實例獨立內(nèi)存空間 |
| 繼承開銷 | 子類需實現(xiàn)抽象方法 | 直接繼承完整實現(xiàn) |
5.2 性能基準測試
// 抽象類性能測試
class Abstract {
method() { throw new Error("Abstract") }
}
class Concrete extends Abstract {
method() { /* 實現(xiàn) */ }
}
// 普通類測試
class Normal {
method() { /* 實現(xiàn) */ }
}
// 測試 100 萬次調(diào)用
console.time("Abstract");
const a = new Concrete();
for (let i = 0; i < 1e6; i++) a.method();
console.timeEnd("Abstract");
console.time("Normal");
const n = new Normal();
for (let i = 0; i < 1e6; i++) n.method();
console.timeEnd("Normal");
測試結(jié)果：
- 抽象類調(diào)用：~15ms
- 普通類調(diào)用：~12ms
- 差異原因：抽象方法需要額外的原型鏈查找
六、工程實踐中的選擇標準
6.1 使用抽象類的場景
- 定義框架規(guī)范：建立必須實現(xiàn)的接口
- 提供部分實現(xiàn)：包含通用邏輯，留擴展點
- 限制實例化：確保只有具體子類可實例化
- 多態(tài)設(shè)計：統(tǒng)一接口，不同實現(xiàn)
6.2 選擇普通類的場景
- 完整功能單元：不需要擴展的獨立組件
- 工具類實現(xiàn)：提供靜態(tài)方法集合
- 數(shù)據(jù)模型：代表具體領(lǐng)域?qū)ο?/li>
- 快速原型：不需要嚴格設(shè)計的場景
6.3 決策流程圖
graph TD A[需要定義強制規(guī)范？] -->|是| B[使用抽象類] A -->|否| C[需要完整實現(xiàn)？] C -->|是| D[使用普通類] C -->|否| E[考慮接口或混入]
七、TypeScript 中的高級抽象特性
7.1 抽象屬性與訪問器
abstract class Person {
abstract name: string; // 抽象屬性
abstract get fullName(): string; // 抽象訪問器
abstract set fullName(value: string); // 抽象設(shè)置器
}
class Employee extends Person {
constructor(public name: string) {
super();
}
get fullName() {
return `Employee: ${this.name}`;
}
set fullName(value) {
this.name = value.split(': ')[1];
}
}
7.2 抽象構(gòu)造函數(shù)簽名
abstract class Animal {
constructor(public name: string) {}
abstract makeSound(): void;
}
type AnimalConstructor = new (name: string) => Animal;
function createAnimal(
ctor: AnimalConstructor,
name: string
): Animal {
return new ctor(name);
}
const dog = createAnimal(Dog, "Buddy");
八、現(xiàn)代 JavaScript 的替代方案
8.1 組合優(yōu)于繼承
const canSpeak = {
speak() {
console.log(`${this.name} says: ${this.sound}`);
}
};
const canEat = {
eat() {
console.log(`${this.name} is eating`);
}
};
class Dog {
constructor(name) {
this.name = name;
this.sound = "Woof!";
}
}
Object.assign(Dog.prototype, canSpeak, canEat);
8.2 接口與混入模式
// 接口定義
interface Logger {
log(message: string): void;
}
// 混入實現(xiàn)
function withLogging<T extends new (...args: any[]) => any>(Base: T) {
return class extends Base implements Logger {
log(message: string) {
console.log(`[LOG] ${message}`);
}
};
}
class Service {}
const LoggedService = withLogging(Service);
九、總結(jié)：選擇恰當抽象層級
9.1 核心決策原則
- 明確需求：是否需要強制實現(xiàn)契約？
- 評估擴展性：未來是否需要多態(tài)支持？
- 考慮復(fù)雜度：簡單場景避免過度設(shè)計
- 團隊共識：遵循項目架構(gòu)規(guī)范
9.2 抽象思維的實踐價值
抽象類和抽象方法不僅是技術(shù)實現(xiàn)，更是設(shè)計思維的體現(xiàn)。通過合理使用抽象：
- 提升代碼可維護性
- 增強系統(tǒng)擴展能力
- 降低模塊耦合度
- 提高團隊協(xié)作效率
在JavaScript生態(tài)中，雖然語言本身未原生支持抽象類，但通過設(shè)計模式配合TypeScript，我們完全可以構(gòu)建出健壯、可擴展的抽象體系，為大型應(yīng)用開發(fā)提供堅實基礎(chǔ)。
最佳實踐建議：在中小型項目中使用普通類快速迭代，在大型復(fù)雜系統(tǒng)中引入抽象類建立規(guī)范。TypeScript項目應(yīng)充分利用其抽象能力，純JavaScript項目可采用工廠函數(shù)+接口檢查的模式模擬抽象。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
BootStrap 圖片樣式、輔助類樣式和CSS組件的實例詳解
這篇文章主要介紹了BootStrap 圖片樣式、輔助類樣式和CSS組件的實現(xiàn)代碼，圖文并茂介紹的非常詳細，需要的朋友參考下吧2017-01-01
JS監(jiān)聽微信、支付寶等移動app及瀏覽器的返回、后退、上一頁按鈕的事件方法
這篇文章主要介紹了JS監(jiān)聽微信、支付寶等移動app及瀏覽器的返回、后退、上一頁按鈕的事件方法,需要的朋友可以參考下2016-08-08
在現(xiàn)代JavaScript開發(fā)中,處理變量默認值是一個常見但容易引發(fā)bug的操作,很多開發(fā)者可能都遇到過這樣的問題：使用||設(shè)置默認值時,意外覆蓋了0、''等合法值,這時候,ES2020引入的雙問號操作符（??）就能完美解決這類問題,本文將帶您全面掌握這個操作符的使用場景和高級技巧2025-04-04
下面小編就為大家?guī)硪黄狫avascript數(shù)組去重的幾種方法詳?shù)慕榻B。小編覺得聽錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看2021-09-09
最近整理一下之前做的一個項目，把滾動條動態(tài)固定頂部的代碼整理出來和大家分享2017-07-07
彈出層效果是一個很實用的功能，很多網(wǎng)站都采用了這種方式實現(xiàn)登錄和注冊，下面小編通過本文給大家分享具體實現(xiàn)代碼，對js彈出頁面效果相關(guān)知識感興趣的朋友一起學習吧2016-01-01
有的時候我們希望對類成員(屬性,方法)進行一定的訪問控制,來保證數(shù)據(jù)的安全,通過類修飾符可以做到這一點,目前typescript提供了四種修飾符,這篇文章主要給大家介紹了關(guān)于TypeScript只讀修飾符的相關(guān)資料,需要的朋友可以參考下2022-04-04
通過高德地圖API獲得某條道路上的所有坐標用于描繪道路的方法
這篇文章主要介紹了通過高德地圖API獲得某條道路上的所有坐標用于描繪道路的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
這篇文章主要介紹了js實現(xiàn)鼠標感應(yīng)圖片展示的方法,實例分析了javascript鼠標事件及樣式的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
詳解微信小程序（Taro）手動埋點和自動埋點的實現(xiàn)
這篇文章主要介紹了詳解微信小程序（Taro）手動埋點和自動埋點的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03