如何从DOM元素类继承 [英] How to inherit from the DOM element class

问题描述

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

I want to write some Javascript classes which extend DOM nodes (so that I can then insert instances of my class directly into the DOM), but am having difficulty finding out which class/prototype I should inherit from.

例如:

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

但是 ClassA 应该是什么?

But what should ClassA be?

推荐答案

这样做不是一个好主意.

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

First of all, to inherit from DOM element, you need to have access to that element's prototype. The problem is that not all browsers provide access to prototypes of DOM elements. Newer Gecko and WebKit -based clients, for example, expose some of these prototypes as global objects - HTMLDivElement, HTMLElement, Element, Node, etc.

例如，普通的 DIV 元素通常具有类似于以下内容的原型链:

For example, plain DIV element usually has a prototype chain similar to:

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

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

You can access any of them and extend or inherit from as desired. But again, even though you can, I strongly advise not to.

当浏览器不公开这些原型时，您几乎运气不佳.您可以尝试通过遵循 DOM 元素本身的 constructor 属性来检索它们 -

When browser doesn't expose these prototypes, you're pretty much out of luck. You can try retrieving them by following constructor property of DOM element itself -

document.createElement('div').constructor;

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

- but then there's no guarantee that element has constructor property (e.g. IE6 doesn't) and even if it does, that this property references "correct" object. If, after all, constructor does reference correct object, there's still no guarantee that this objects is allowed to be augmented at all. The truth is that host objects are allowed to implement completely bizarre behavior and do not even have to follow rules that native JS objects follow (you can find dozens of such examples in real life).

你想避免从 DOM 元素原型继承的第二个原因是这种继承的机制没有在任何地方真正指定；它可能是古怪的、不可预测的，而且总体上是脆弱和不可靠的.

Second reason you want to avoid inheriting from DOM element prototypes is that mechanism of such inheritance is not really specified anywhere; it could be quirky, unpredictable and overall fragile and unreliable.

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

Yes, you can create a constructor that would initialize objects with proper prototype chain (i.e. having DOM prototype in it):

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

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

-但这就是它的全部，并且整个方法的实用性受到原型中某些方法的限制，而没有其他-

- but this is as much as it goes, and usefulness of this whole approach becomes limited by having certain methods in prototype and nothing else -

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

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

Until some standard specifies exact mechanism for inheriting from DOM prototypes (and browsers actually implement that mechanism), it's best to leave them alone, and perhaps try alternative approach - e.g. wrapper or decorator patterns rather than prototype one :)

这篇关于如何从DOM元素类继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！