6

多くの時間を実験した後、__proto__orObject.getPrototypeOf()メソッドが DOM オブジェクトのプロトタイプ チェーンをトラバースする正しい方法であることがわかりました。

一連の constructor.prototype を使用しても、実際には両方のブラウザーでプロトタイプ チェーンをトラバースしません (これは ECMA 標準で定義されている方法ですが、コンストラクターのプロトタイプ プロパティはプロトタイプ オブジェクトです)。

提案やコメントは大歓迎です...

p1 = document.getElementById("test");  // div element

//Prototype Object of p1
p2 = element.constructor.prototype;

//Prototype object of p2
p3 = element.constructor.prototype.constructor.prototype;

console.log(p2 === p3);  // true in chrome(howcome they same ?), false in firefox

q2 = element.__proto__;
q3 = element.__proto__.__proto__;

console.log(q2 === q3);  // false in both browser
4

2 に答える 2

1

ボリスに完全に同意します...詳細については、ここで検索する必要があります（https://www.google.com/search?q=javascript+prototype+chain）が、基本的にDOMオブジェクト内の要素を参照したい場合は、以下のようにこれを行う必要があります：

function exploreElement(element){
        contentToString = "";
        for (var i in element){
            contentToString += i + " : " + element[i] + "<br />";   
        }
        document.write(contentToString);
    }
    exploreElement(document);

原型とプロトは全然違う…

次のようなコンストラクタ関数がある場合:

function SomeObject(){
        this.__proto__.id = "instance_default_name";
        SomeObject.id = "SomeObject";
        // __proto__ HERE to access the prototype!!!
    }

次に、プロトタイプを介してこのコンストラクターにメソッドを追加できます (ドキュメントに ID "myInstance" を持つ空の div と ID "test" を持つ別の div があると仮定します)。

SomeObject.prototype.log = function(something){
        document.getElementById("myInstance").innerHTML += something + "<br />";
    }

テスト目的でいくつかのメソッドを追加します。

SomeObject.prototype.setId = function(id){
    this.id = id;
}
SomeObject.prototype.getId = function(){
    return this.id;
}
SomeObject.prototype.getClassName = function(){
    return SomeObject.id;   
}

次に、 new 演算子を使用して SomeObject をインスタンス化し、次のようなテストを実行できます。

myInstance = new SomeObject();
myInstance.setId("instance_1");
aDivElement = document.getElementById("test");  
aDivElement.style.backgroundColor = "rgb(180,150,120)";
myInstance.log("p1 = " + aDivElement);
// [object HTMLDivElement]
myInstance.log("p1 backgroundColor = " + (aDivElement.style.backgroundColor));
myInstance.log("myInstance = " + myInstance);
// [object Object] an instance of SomeObject
myInstance.log("myInstance.constructor = " + myInstance.constructor);
// function SomeObject() { this.__proto__.id = "instance_default_name"; SomeObject.id = "SomeObject"; }
myInstance.log("myInstance.constructor.prototype = " + myInstance.constructor.prototype);
// .prototype WHEN CALLED by the instance NOT __proto__
// The constructor of myInstance is SomeObject and the prototype of SomeObject is the prototype of all instances of SomeObject
myInstance.log("myInstance.id = " + myInstance.getId());
// id for the instance of SomeObject that you have instanciated 
myInstance.log("SomeObject.prototype.id = " + SomeObject.prototype.getId());
// id by default of the prototype
myInstance.log("myInstance.constructor.prototype.id = " + myInstance.constructor.prototype.getId());
// id by default of the prototype
myInstance.log("myInstance.getClassName() = " + myInstance.getClassName());
// myInstance.getClassName() = SomeObject

参考になるかわかりませんが、検索の参考になれば幸いです。よろしくお願いします。ニコラス

于 2012-04-05T16:01:31.540 に答える
0

コンストラクター/プロトタイプの仕組みを誤解していると思います。

コンストラクター関数が与えられると、その .prototype はそれで構築されたもののプロトタイプになります。プロトタイプの .constructor は、コンストラクター関数を指しています。

したがって、特にElement.prototype.constructor === Element保持する必要があります。バグのため、ブラウザでは必ずしもそうではありません。これが、Chrome で p2 == p3 と表示される理由です。

于 2012-04-05T04:14:57.073 に答える