Question

我正在尝试使用ES6 Class-Syntax在JavaScript中实现装饰器模式。这是我的方法：

class Dish{
  constructor(){}
  getPrice(){}
  getDes(){}
}

class Steak extends Dish{
  constructor(){
    super();
  }
  getPrice(){
    return 13;
  }
  getDes(){
    return "Steak";
  }
}

class SideDish extends Dish{
  constructor(dish){
    super();
    this.dish = dish;
  }
  getPrice(){
    return super.getPrice();
  }
  getDes(){
    return super.getDes();
  }
}

class Pommes extends SideDish{
  constructor(dish){
    super(dish);
  }
  getPrice(){
    return super.getPrice() +5;
  }
  getDes(){
    return super.getDes() + " Pommes";
  }
}

当我打电话时

var dish = new Pommes(new Steak());
dish.getPrice();

我得到的结果是NaN，但我希望“18”。哪里是我的错？

Answer 1

您忘记了return中的SideDish.getPrice()。

return super.getPrice();

您还忘记了return中的SideDish.getDes()。

Answer 2

所以看起来问题出在你的父装饰者SideDish上。它目前看起来像：

class SideDish extends Dish{
   constructor(dish){
     super();
     this.dish = dish;
  }
  getPrice(){
     return super.getPrice();
  }
  getDes(){
     return super.getDes();
  }
}

Dish：

getPrice(){}

这意味着对于Pommes上的方法：

  getPrice(){
     return super.getPrice() +5;
  }

super.getPrice()正在返回undefined（来自其直接父级SideDish，转发至Dish），而不是Steak.getPrice()正如您所期望的那样。

当我更新SideDish以使用附加（装饰）对象时：

class SideDish extends Dish{
  constructor(dish){
     super();
     this.dish = dish;
  }
  getPrice(){
     return this.dish.getPrice();
  }
  getDes(){
     return this.dish.getDes();
  }
}

然后运行

var dish = new Pommes(new Steak());
dish.getPrice();

我按预期得到18岁。

JavaScript ES6装饰模式

2 个答案: