在ES6中包装类函数并使用super的简单方法

Question

我正在ES6中编写应用程序，并使用babel进行转译。 我有一系列形状各异的对象（正方形，矩形，梯形等）

我希望能够使其中一些对象成为“特殊”对象，例如，使其具有双边框或圆角。 但我不想将每个对象都子类化（即DoubleBorderRectangle，DoubleBorderSquare）

这似乎是介绍装饰器的好地方。

但是，当我想装饰使用super的方法时，我遇到了问题。

例如，我有一个像这样的类：

class Trapezoid extends Sprite {
    constructor(x, y, width, height) {
        super(x, y, width, height);
        this.type = "Trapezoid";
        //other trapezoid specific functions here.
    }
    draw(ctx) {
        super.draw(ctx);
        //specific code for drawing trapezoid here.
    }
}

现在，我希望能够使用装饰器实例化具有双边框的特殊梯形：

function doubleBorder(shape) {

    shape.draw = function(ctx) {

       //draw the trapezoid. 
       super.draw(ctx);

       //double border drawing stuff here.
    }

    return shape;
}

并实例化：

 let trapezoid = new Trapezoid(0,0,100,100);
 let doubleBorderTrapezoid = doubleBorder(trapezoid);

一个问题是babel不喜欢在课外使用super。 这是可以理解的。 有没有办法掌握形状的超类，并在不创建一次性对象的情况下将其传递给正确的上下文？

Answer 1

我知道这很老了，但是您可以采用多种方式实现，因此可以归结为样式和代码行。

1）在超类中创建一个函数以添加双精度轮廓，并假定多个子类将使用该函数。

2）创建一个装饰器函数数组（超类或特定子类），然后在draw中检查它们（超或子类）并应用。

const myDecorator = (ctx) => { ... }
...
draw(ctx) {
  this.decorators.forEach(draw => draw(ctx));
}

根据您的用例，第一个是更干净的OOP，第二个是更复杂的功能性学习。