javascript - 如何装饰 Web Component 类

Question

我正在创建一个 @Component 装饰器，它在类的构造函数中进行调解以在构造后执行一些工作。从下面的代码可以看出，工作是在一个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: Illegal 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 不支持通过 new 运算符直接构建 - 请参阅第一个列表中的 (1) - 但我需要一个过程来装饰任何类的构造函数，即使它们是自定义元素。

一些想法？

工作设置:Chrome 68 · Babel 7.0.0-beta.51 with babel-plugin-transform-decorators-legacy

Answer 1

可以返回一个类，避免直接new。

function Component(cls) {
  class c extends cls {
    constructor() {
      super()
      console.log(this)//init
    }
  }
  return c
}