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

Question

这其实更多的是关于ES6中面向对象模型的问题。但是，我将以创建新的自定义元素为例。

因此，创建新自定义元素的新方法（截至今天）是通过 customElements.define()，它接受标签 name、constructor 和 options（可选）根据 MDN, Google, and of course the spec。列出的所有文档都使用 constructor.

的新 class 关键字的变体

假设我不喜欢新的 class 语法，并且考虑到 class 大部分是语法糖（根据 this tutorial）。规范甚至明确指出

A parameter-less call to super() must be the first statement in the constructor body, to establish the correct prototype chain and this value before any further code is run.

通过阅读教程，我想出了这个来尝试是否可能（也修改并重新学习 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'));

我收到这个错误

Error: The custom element being constructed was not registered with customElements.

所以我的问题是，是否可以不使用 class 关键字（如果可能也不使用 new）？如果答案是否定的，我以后写新的Javascript代码时是否应该坚持使用class关键字而不是使用Object.create？

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 类不仅仅是语法糖。

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

Creating custom element without using class keyword

javascript

web-component

custom-element

es6-class