原文：青色表示
訳文：黒色表示
注記/訂正： 赤色表示
So far so good, we have shared prototypes, and XPConnect gives us most of this automatically (except the constructor functions on the global object). But this is not good enough, in addition to being able to share and represent each "class" with a constructor function, we also want users to be able to extend "classes" that are not real concrete classes, like Node for instance. Node is a DOM interface, but there is no Node class, there are lots of different classes that "inherit" Node (HTMLImageElement, HTMLDocument, ProcessingInstruction, ...), but an instance of Node will never exist in mozilla. But the fact that an instance of a Node will never exist in mozilla doesn't mean that the Node class is useless, the Node class is indeed very useful since it gives the user even more flexibility when working with the mozilla DOM. If you think back to the HTMLImageElement samples above, those samples let you define new properties on all image elements, by using the Node constructor function you can do similar things to *all* objects that "inherit" Node. This means you can add a property to every node in a DOM tree by doing something like this:
Node.prototype.foo = bar;
今までのところは順調です。共用のプロトタイプがあり、（グローバルオブジェクトのコンストラクタ関数を除けば）XPConnect は自動的に共用のプロトタイプのほどんどを提供します。しかし、これだけでは十分とは言えません。コンストラクタ関数で”各々の”クラスを共用し代用させることが可能であるばかりでなく、インスタンスへの Node のような本当の具象クラスでない”クラス”をユーザが拡張できるようになることが必要だと思います。Node は DOM のインターフェイスですが、Node クラスは存在しません。Node を”継承”する様々なクラスはたくさんありますが (HTMLImageElement、HTMLDocument、ProcessingInstruction、 ...)、Mozilla には Node のインスタンスはありません。しかし、Mozilla には Node がないという事実は Node クラスが役に立たないということではありません。実のところ Node クラスは、それが Mozilla DOM と一緒に機能すればユーザにより多くの柔軟性を提供するので、大変役に立つのです。上記の HTMLImageElement のサンプルに戻って考えると、これらのサンプルで、Node を”継承”する *all* オブジェクトへ似たようなことができる Node コンストラクタ関数を使うことで、すべてのイメージ要素で新しいプロパティを定義することが可能になります。つまり以下のようにすれば、DOM ツリーのすべてのノードへ新しいプロパティを追加できるのです:
Node.prototype.foo = bar;
Here's a little diagram that shows the prototype layout of a HTMLDivElement in mozilla.
Mozilla における HTMLDivElement のプロトタイプのレイアウトを示す簡単なフローです。
HTMLDivElement.prototype
|
|.__proto__
|
HTMLElement.prototype
|
|.__proto__
|
Element.prototype
|
|.__proto__
|
Node.prototype
|
|.__proto__
|
Object.prototype
|
|.__proto__
|
null
If you have an instance of a HTMLDivElement in JS, the following will be true:
div.__proto__ === HTMLDivElement.prototype
JS で HTMLDivElement のインスタンスがあれば、以下の条件は真となります:
div.__proto__ === HTMLDivElement.prototype
and the following should also be true, but it's not yet so in mozilla:
div.constructor === HTMLDivElement
以下も真となるはずですが、 Mozilla ではまだそうなっていません:
div.constructor === HTMLDivElement
which means that the following should also be true:
div.__proto__ === div.constructor.prototype
ということは、以下もまた真になるはずです:
div.__proto__ === div.constructor.prototype
