不使用class关键字创建自定义元素

Question

这实际上是关于ES6中面向对象模型的问题.但是,我将使用创建新的自定义元素作为示例.

因此,创建一个新的自定义元素的新的和有光泽的(截至今天)方法是根据MDN,Google,当然还有规范customElements.define()来获取标签name,a constructor和options(这是可选的).列出的所有文档都使用新关键字的变体.classconstructor

假设我不喜欢新的class语法,并且考虑到大多数情况下class是一个合成糖(根据本教程).该规范甚至具体说明了这一点

无参数调用super()必须是构造函数体中的第一个语句,以便在运行任何其他代码之前建立正确的原型链和此值.

通过阅读教程,我出来了,试试是否有可能(也修改和重新学习Javascript的对象模型).

var _extends = function(_parent) {
    var _result = function() {
        _parent.call(this);
    };
    _result.prototype = Object.create(_parent.prototype);
    Object.defineProperty(_result.constructor, 'constructor', {
        enumerable: false,
        writeable: true,
        value: _result
    });

    return _result;
};

customElements.define('foo-bar', _extends(HTMLElement));
console.log(document.createElement('foo-bar'));

我收到了这个错误

错误:正在构造的自定义元素未注册 customElements.

所以我的问题是,是否可以不使用class关键字(也new可能没有)？如果答案是否定的,我是否应该坚持class使用关键字而不是Object.create在将来编写新的Javascript代码时使用？

Answer 1

在一些简单的情况下,可以定义没有class关键字的自定义元素.

诀窍是用来Reflect.construct()替换super()呼叫.

var CEo = function ()
{
    console.log( "created" )
    return Reflect.construct( HTMLElement, [], CEo )
}

CEo.prototype = Object.create( HTMLElement.prototype )

CEo.prototype.connectedCallback = function ()
{
    console.log( "connected" )
    this.innerHTML = "Hello v1"
} 

customElements.define( "object-v1", CEo )

请注意,它不是受支持的语法,因为正如您所说,ES6类不仅仅是语法糖.