Firefox and chrome behavior difference between constructor.prototype?

Question

After experimenting so much time, i figured out that __proto__ or Object.getPrototypeOf() method is the correct way to traverse prototype chain in DOM objects.

Using a series of constructor.prototype actually doesn't traverse the prototype chain in both browsers.(while this is the way defined in ECMA standard, prototype property of constructor is your prototype object).

Any suggestion or comment is welcomed...

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

Answer 1

I totally agree with Boris... You should search here for more details (https://www.google.com/search?q=javascript+prototype+chain) but basically if you want to browse elements in the DOM object, you just need to do this like hereunder :

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

The prototype and proto are something totally different...

If you have a constructor function like this :

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

You can then add methods to this Constructor via prototype (I assume that you have an empty div with an id "myInstance" and another with the id "test" in the document):

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

Add some methods for test purposes :

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

Then, you may instantiate SomeObject with the new operator and do some tests like this :

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

I don't know if this talks to you a little, but I hope this will help you in your search. Best regards. Nicolas