javascript - 无法覆盖装饰器模式方法

Question

我正在学习装饰器模式，但我无法全神贯注于方法覆盖。

我有一个 Phone.ts 类，它有 phoneDescription 和 cost getter。成本 getter 应该被扩展到它的手机品牌类的成本覆盖。

Phone.ts

export default class Phone {
  private description: string;

  constructor(description = 'Default description') {
    this.description = description;
  }

  get phoneDescription() {
    return this.description;
  }

  get price(): number | void {
    throw new Error('This method must be overwritten!');
  }
}

我有一个特定于模型的类。在此示例中，Pixel。

像素.ts

import Phone from './Phone';

export default class Pixel extends Phone {
  get cost(): number {
    return 800;
  }
}

到目前为止一切顺利。我能够实例化 Pixel 类。而且我能够从对象中获取成本。

PhoneDecorator.ts

import Phone from './Phone';

export default class PhoneDecorator extends Phone {}

但是手机屏幕非常脆弱。我们需要屏幕保护膜。所以，

ScreenProtector.ts

import PhoneDecorator from './PhoneDecorator';

export default class ScreenProtector extends PhoneDecorator {
  phone: any;

  constructor(phone: any) {
    super();
    this.phone = phone
  }

  get cost(): number {
    return 50 + this.phone.price;
  }
}

此屏幕保护膜应在构造函数中提供的手机的当前价格基础上增加 50。

但是我得到了错误This method must be overwritten!

index.ts

import ScreenProtector from './ScreenProtector';
import Pixel from './Pixel';

let pixel = new Pixel();

pixel = new ScreenProtector(pixel);

console.log(pixel.cost)

Answer 1

cost 是装饰器的一种方法，而不是电话。所以你需要实现 Pixel 的 price getter(不是 cost):

export default class Pixel extends Phone {
  get price(): number {
    return 800;
  }
}