Javascript 如何装饰Web组件类

我正在创建一个@Component decorator，它在类的构造函数构造之后进行一些工作。从下面的代码中可以看出，这项工作是通过

init

方法实现的

export function Component (Cls) {
  function Class (...args) {
    let self = new Cls (...args); // (1)
    init (self, ...args);
    return self;
  }
  Class.prototype = Cls.prototype;
  return Class;
}

当我在一个普通类上测试这段代码时，一切正常。这是一个工作示例：

class Base { ... }

@Component
class Core extends Base {
  constructor () {
    super (); // init is invoked
  }
  fx () { console.log ('Core.fx') }
  fy () { console.log ('Core.fy') }
}

然而，当我试图装饰一个web组件时，会得到一条

TypeError:invalign constructor

消息

@Component
class Core extends HTMLElement {
  constructor () {
    super ();
  }
  fx () { console.log ('Core.fx') }
  fy () { console.log ('Core.fy') }
}
customElements.define ('x-core', Core);

let coreX = document.createElement ('x-core');
document.body.appendChild (coreX);

我意识到问题在于

HTMLElement

不支持通过新操作符直接构造-请参见第一个清单中的（1）-但我需要一个过程来修饰任何类的构造函数，即使它们是自定义元素

有什么想法吗

---

工作设置：Chrome 68·Babel 7.0.0-beta.51，带有Babel插件转换装饰器传统版

您可以返回一个类以避免直接

新建

功能组件（cls）{
c类扩展了cls{
构造函数（）{
超级（）
console.log（this）//init
}
}
返回c
}

如果您根本无法

新建

它，如何使用

核心

？这里的

组件

对我来说并不重要。非常感谢@appleapple，我已经完成了后一段代码。在我的第一次修订中，我没有包括最后3行，因此存在相同的问题，但没有触发错误。良好的解决方案@appleapple。问题是，这种方法非常具有侵入性。您正在扩展继承链，因此我的许多测试都被破坏了。通过装饰，体系结构找到一个子类，它应该是父类（原始级别）class@JavierV我不明白你说的话。装饰类正在取代原始类。您不应该注意到任何差异。例如，在我的体系结构的其他方面，我需要通过

Object.getOwnPropertyNames

恢复类成员。目前，这种方法在体系结构上运行良好。如果通过

@Component

decorator生成一个新的子类，

Object.getOwnPropertyNames

返回[]，因此整个体系结构将失败。我无法对整个体系结构进行评估，因为并非所有目标类都将由

@Component