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

【问题标题】：Straightforward way to wrap class function and use super in ES6在 ES6 中包装类函数和使用 super 的简单方法
【发布时间】：2016-08-25 17:53:28
【问题描述】：

我正在用 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 。这是可以理解的。有没有办法在不创建一次性对象的情况下获取形状的超类并将其传递给正确的上下文？

【问题讨论】：

标签： javascript ecmascript-6 babeljs

【解决方案1】：

我知道这已经过时了，但您可以实现多种方法，因此归结为样式和代码行数。

1) 在超类中创建一个函数来添加双轮廓，假设这将被多个子类使用。

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

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

根据您的用例，第一个是更简洁的 OOP，第二个是更多的组合功能倾向。

【讨论】：