Decorator pattern được sử dụng để mở rộng chức năng của một object mà không làm thay đổi class hiện tại hay hàm tạo.

Đối với JavaScript, ta triển khai pattern này bằng cách thêm vào một object có sẵn những thuộc tính và phương thức ở trong run time.

Ví dụ:

class Car {
  constructor() {
    // Default Cost
    this.cost = function () {
      return 20000
    }
  }
}
 
// Decorator function
function carWithAC(car) {
  // Decorate with a new property
  car.hasAC = true
  // Decorate with a new method
  car.cost = () => car.cost() + 500
}
 
function carWithAutoTransmission(car) {
  car.hasAutoTransmission = true
  car.cost = () => car.cost() + 2000
}
 
function carWithPowerLocks(car) {
  car.hasPowerLocks = true
  car.cost = () => car.cost() + 300
}

Có thể thấy, ở trong mỗi decorator function ta đều override lại phương thức cost của object.

Sử dụng decorator pattern như sau:

const car = new Car()
 
console.log(car.cost()) // 2000
 
// Decorating
carWithAC(car)
carWithAutoTransmission(car)
carWithPowerLocks(car)
 
console.log(car.cost()) // 2300

Resources