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

问题描述

我想编写一些扩展DOM节点的Javascript类（所以我可以直接将类的实例插入到DOM中），但我很难找出应该继承的类/原型。

例如：

  function myExtendedElement（）{
 this.superclass = ClassA的; 
 this.superclass（）; 
删除this.superclass; 
} 
  

但是ClassA应该是什么？

解决方案

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

例如，元素通常具有类似于以下的原型链：

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

您可以访问其中任何一个，并根据需要进行扩展或继承。但是，再一次，即使你可以，我强烈建议不要。

当浏览器不公开这些原型时，你几乎运气不好。您可以尝试通过遵循DOM元素的构造函数属性来检索它们 -

 使用document.createElement（ 'DIV'）构造。 
  

- 然后不保证元素具有构造函数属性（例如IE6不），即使它是，该属性引用正确对象。毕竟，构造函数确实引用了正确的对象，仍然不保证这个对象被允许被扩充。事实是，主机对象被允许实现完全奇怪的行为，甚至不必遵循原生JS对象遵循的规则（您可以在现实生活中找到数十个这样的示例）。

您希望避免继承DOM元素原型的第二个原因是，这种继承的机制在任何地方都没有真正指定是的，您可以创建一个构造函数，可以使用正确的原型链（即在其中具有DOM原型）来初始化对象，因为它可以是古怪的，不可预测的，整体的脆弱和不可靠的

< ：

 函数MyDivElement（）{} 
 MyDivElement.prototype = HTMLDivElement.prototype; 
 
 var myDiv = new MyDivElement（）; 
 typeof myDiv.appendChild; //function
  

- 但这是尽可能多的，这种整体方法的有用性通过原型中的某些方法和其他任何东西来限制 -

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

直到某些标准指定了从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.

E.g.:

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

But what should ClassA be?

解决方案

It's not a good idea to do this.

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.

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.

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;

- 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).

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.

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

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屋！