Javascript 无法覆盖装饰器模式方法

我正在学习Decorator模式，但我无法将头脑集中在覆盖方法上

我有一个

Phone.ts

类，它有

phoneDescription

和

cost

getter。 cost getter应该被扩展到它的phone brand类的cost覆盖

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!');
  }
}

import Phone from './Phone';

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

import Phone from './Phone';

export default class PhoneDecorator extends Phone {}

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;
  }
}

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

let pixel = new Pixel();

pixel = new ScreenProtector(pixel);

console.log(pixel.cost)

我有一个特定于模型的类。在本例中，使用像素

Pixel.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!');
  }
}

import Phone from './Phone';

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

import Phone from './Phone';

export default class PhoneDecorator extends Phone {}

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;
  }
}

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

let pixel = new Pixel();

pixel = new ScreenProtector(pixel);

console.log(pixel.cost)

到目前为止还不错。我能够实例化

Pixel

类。 我能从这个物体上得到成本

PhoneDecorator.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!');
  }
}

import Phone from './Phone';

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

import Phone from './Phone';

export default class PhoneDecorator extends Phone {}

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;
  }
}

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

let pixel = new Pixel();

pixel = new ScreenProtector(pixel);

console.log(pixel.cost)

但手机屏幕相当脆弱。我们需要一个屏幕保护器。 所以

ScreenProtector.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!');
  }
}

import Phone from './Phone';

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

import Phone from './Phone';

export default class PhoneDecorator extends Phone {}

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;
  }
}

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

let pixel = new Pixel();

pixel = new ScreenProtector(pixel);

console.log(pixel.cost)

此屏幕保护器应将50添加到构造器中提供的手机的当前价格中

但是我得到一个错误

这个方法必须被覆盖

index.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!');
  }
}

import Phone from './Phone';

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

import Phone from './Phone';

export default class PhoneDecorator extends Phone {}

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;
  }
}

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

let pixel = new Pixel();

pixel = new ScreenProtector(pixel);

console.log(pixel.cost)

成本
是装饰师的一种方法，而不是电话。因此，您需要实现
price
getter of
Pixel
（而不是
cost
）：

没问题，很高兴有帮助。