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