javascript - 如何继承DOM元素类

Question

我想编写一些扩展 DOM 节点的 Javascript 类(这样我就可以将我的类的实例直接插入到 DOM 中)，但是很难找到我应该从哪个类/原型(prototype)继承。

例如:

function myExtendedElement() {
       this.superclass = ClassA;
       this.superclass();
       delete this.superclass;
} 

但是 ClassA 应该是什么？

Answer 1

这样做不是一个好主意。

首先，要从 DOM 元素继承，您需要有权访问该元素的原型(prototype)。问题是并非所有浏览器都提供对 DOM 元素原型(prototype)的访问。例如，较新的基于 Gecko 和 WebKit 的客户端将其中一些原型(prototype)公开为全局对象 - HTMLDivElement、HTMLElement、Element、Node 等。

例如，普通 DIV 元素通常有一个原型(prototype)链类似于:

HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype 
  -> Node.prototype -> Object.prototype -> null

您可以访问它们中的任何一个，并根据需要扩展或继承。但同样，即使可以，我强烈建议您不要这样做。

当浏览器不公开这些原型(prototype)时，您就运气不好了。您可以尝试通过遵循 DOM 元素本身的 constructor 属性来检索它们 -

document.createElement('div').constructor;

- 但不能保证元素具有 constructor 属性(例如 IE6 没有)，即使有，该属性引用“正确”的对象。毕竟，如果构造函数确实引用了正确的对象，则仍然根本无法保证允许扩充此对象。事实上，宿主对象可以实现完全奇怪的行为，甚至不必遵循原生 JS 对象遵循的规则(在现实生活中你可以找到几十个这样的例子)。

您希望避免从 DOM 元素原型(prototype)继承的第二个原因是这种继承机制并未在任何地方真正指定；它可能是古怪的、不可预测的，并且总体上是脆弱和不可靠的。

是的，您可以创建一个构造函数来初始化具有适当原型(prototype)链的对象(即其中包含 DOM 原型(prototype)):

function MyDivElement(){}
MyDivElement.prototype = HTMLDivElement.prototype;

var myDiv = new MyDivElement();
typeof myDiv.appendChild; // "function"

- 但这就是事实，整个方法的实用性受到原型(prototype)中某些方法的限制而没有其他 -

typeof myDivElement.nodeName; // "undefined"
myDivElement.innerHTML = '<span>foo<\/span>';
myDivElement.childNodes; // Error

直到某些标准指定了从 DOM 原型(prototype)继承的确切机制(并且浏览器实际上实现了该机制)，最好不要管它们，也许尝试替代方法 - 例如包装器或装饰器模式而不是原型(prototype)模式 :)