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不支持通过新运算符直接构造-参见第一清单中的（1）-但是我需要一个过程来装饰任何类的构造函数，即使它们是自定义元素

一些想法？

工作设置：Chrome 68·具有babel-plugin-transform-decorators-legacy的Babel 7.0.0-beta。

Answer 1

您可以返回一个类以避免直接使用new。

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

如何装饰Web组件类

1 个答案: