javascript - 更改自定义元素的原型(prototype)

Question

如果我按如下方式创建自定义元素

document.register('bar-foo', { prototype: { .... } }); // or document.registerElement

现在，在此之后我想添加一些该元素的原型(prototype)。

例如，我可以用 'div' 元素做到这一点:

HTMLDivElement.prototype.bar = function() {};
document.createElement('div').bar();

我将如何使用我的自定义元素“bar-foo”来做到这一点？

Answer 1

我在 Chrome 中实现了自定义元素，所以对此很熟悉。 (FWIW document.register 已重命名为 document.registerElement。)

稍后要向自定义元素的原型(prototype)添加内容，您首先需要引用原型(prototype)对象。

在您的问题中，您通过 DIV 的构造函数 HTMLDivElement.prototype 访问原型(prototype)。您可以在自定义元素中使用类似的模式。自定义元素的构造函数从 registerElement 返回。通过保存对它的引用，您以后可以使用它来访问原型(prototype):

BarFoo = document.registerElement('bar-foo', ...);

// later
BarFoo.prototype.foo = ...

(您还可以使用返回的对象，规范调用生成的构造函数来使用 new BarFoo() 创建元素。)

将引用保存在全局对象(窗口)上是有意义的，因为这是内置元素(如 HTMLDivElement)的工作方式，尽管您不必这样做。

在制定规范时，我们考虑过在窗口上自动设置对此构造函数的引用，但最终决定减少魔法和名称污染会更好。我们还考虑添加一个对象，您可以通过该对象传递标签名称并返回正确的构造函数。我们想让它适用于内置元素和自定义元素。不幸的是，该提案并没有在标准讨论列表中存在太久。

还有其他方法可以做你想做的事。例如，您可以直接保存对原型(prototype)的引用，而不是保存对生成的构造函数的引用。或者，如果您有自定义元素的实例，则可以使用 Object.getPrototypeOf(elem) 或 elem.__proto__ 获取原型(prototype)对象。

喂!