什么是裝飾器模式

裝飾器模式（Decorator Pattern）是一種結(jié)構(gòu)型設(shè)計(jì)模式，它允許動(dòng)態(tài)地向一個(gè)對(duì)象添加新的行為。在不改變對(duì)象本身的情況下，通過(guò)將對(duì)象包裝在一個(gè)裝飾器中，來(lái)增強(qiáng)對(duì)象的功能。這個(gè)模式的核心是使用一個(gè)裝飾器類，來(lái)包裝一個(gè)被裝飾的類，使得裝飾器類可以動(dòng)態(tài)地添加新的功能或者修改已有的功能。

裝飾器模式的主要用途是為一個(gè)原始對(duì)象添加新的功能或者修改已有的功能，同時(shí)保持原始對(duì)象的接口不變，并且可以在運(yùn)行時(shí)動(dòng)態(tài)地添加或刪除功能。

為什么要有裝飾器模式

在開(kāi)發(fā)過(guò)程中，我們經(jīng)常需要擴(kuò)展一個(gè)類或?qū)ο蟮墓δ?，但是直接修改類或?qū)ο罂赡軙?huì)導(dǎo)致代碼復(fù)雜性和可維護(hù)性下降。裝飾器模式提供了一種優(yōu)雅的方式來(lái)擴(kuò)展類或?qū)ο蟮墓δ埽覠o(wú)需修改基本的對(duì)象或類。它使代碼更加模塊化、易于維護(hù)和擴(kuò)展。

裝飾器模式應(yīng)用場(chǎng)景

JS裝飾器模式通常用于以下場(chǎng)景：

• 將對(duì)象的功能添加到已存在的對(duì)象中，而不影響原始對(duì)象的接口。
• 實(shí)現(xiàn)AOP（面向切面編程）并在多個(gè)組件之間共享代碼。
• 通過(guò)運(yùn)行時(shí)組合來(lái)實(shí)現(xiàn)功能，而不是繼承。

舉個(gè)栗子

下面我們來(lái)舉 2 個(gè)例子，更加具象的理解什么是裝飾器模式：

給汽車加個(gè)真皮座椅

class Car {
  constructor() {
    this.price = 10000;
    this.speed = '100 km/h';
  }

  getPrice() {
    return this.price;
  }

  getSpeed() {
    return this.speed;
  }
}

// 汽車裝飾器
class CarDecorator {
  constructor(car) {
    this.car = car;
  }

  getPrice() {
    return this.car.getPrice();
  }

  getSpeed() {
    return this.car.getSpeed();
  }
}

// 真皮座椅裝飾器
class LeatherSeatsDecorator extends CarDecorator {
  constructor(car) {
    super(car);
    this.price = 1000;
    this.description = 'Leather seats';
  }

  getPrice() {
    return this.car.getPrice() + this.price;
  }

  getDescription() {
    return this.car.getDescription() + ', ' + this.description;
  }
}

let car = new Car();
console.log(car.getPrice()); // 10000

// 帶有真皮座椅的汽車
let carWithLeatherSeats = new LeatherSeatsDecorator(car);
console.log(carWithLeatherSeats.getPrice()); // 11000
console.log(carWithLeatherSeats.getDescription()); // undefined, Leather seats

在上面的代碼中，我們定義了一個(gè) Car 類作為原始對(duì)象，并且定義了一個(gè) CarDecorator 類作為裝飾器類。然后我們定義了一個(gè) LeatherSeatsDecorator 類，它繼承自 CarDecorator 類，用來(lái)添加真皮座椅的功能。

一個(gè)簡(jiǎn)單的數(shù)據(jù)緩存

class DataService {
  fetchData() {
    console.log("Fetching data from server...");
    return [1, 2, 3];
  }
}

class DataCacheDecorator {
  constructor(dataService) {
    this.dataService = dataService;
    this.cache = null;
  }

  fetchData() {
    if (this.cache === null) {
      console.log("Cache not exist...");
      this.cache = this.dataService.fetchData();
    } else {
      console.log("Data retrieved from cache");
    }
    return this.cache;
  }
}

let dataService = new DataService();
dataService = new DataCacheDecorator(dataService);

console.log(dataService.fetchData());
console.log(dataService.fetchData());

上述代碼將有如下輸出：

Cache not exist...
Fetching data from server...
[1, 2, 3]
Data retrieved from cache
[1, 2, 3]

總結(jié)

JS裝飾器模式提供了一種優(yōu)雅的方式來(lái)擴(kuò)展類或?qū)ο蟮墓δ埽鵁o(wú)需修改基本的對(duì)象或類。它使代碼更加模塊化、易于維護(hù)和擴(kuò)展。在適當(dāng)?shù)那闆r下，使用裝飾器模式可以提高代碼的可讀性和可維護(hù)性。

為了更好的理解裝飾器模式，本文選取了 2 個(gè)簡(jiǎn)單易理解的例子。真實(shí)場(chǎng)景下 JS 裝飾器模式的應(yīng)用要復(fù)雜的多，目前 ES6、TypeScript、React、Express、Koa、Mobx、Redux 等場(chǎng)景都已經(jīng)廣泛使用了 JS 裝飾器，以后文章會(huì)針對(duì)上述場(chǎng)景進(jìn)行具體詳細(xì)介紹。

到此這篇關(guān)于JavaScript 裝飾器模式詳解的文章就介紹到這了,更多相關(guān)JavaScript 裝飾器模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！