Question

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

因此，创建新自定义元素的新的闪亮（截至今天）方法是customElements.define()，其中包含标记name，constructor和{{1} } {（可选）根据MDN，Google，当然还有spec。列出的所有文档都使用options的新class关键字的变体。

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

对class的无参数调用必须是该语句中的第一个语句构造函数体，建立正确的原型链和这个在运行任何其他代码之前的值。

通过阅读本教程，我提出了这个尝试，如果可能的话（也是修改和重新学习Javascript的对象模型）。

super()

我收到此错误

错误：正在构建的自定义元素未注册 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）？如果答案是否定的，那么在我将来编写新的Javascript代码时，是否应该使用new关键字而不是使用class？

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关键字创建自定义元素

1 个答案: