Firefox and chrome behavior difference between constructor.prototype?

Go To StackoverFlow.com

6

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
2012-04-04 19:46
by P K


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

2012-04-05 16:01
by tatactic


0

I think you misunderstood how constructor/prototype works.

Given a constructor function, its .prototype will be the prototype of the things constructed with it. The prototype's .constructor points back to the constructor function.

So in particular, Element.prototype.constructor === Element should hold. It doesn't necessarily in browsers due to bugs. This is why you see p2 == p3 in Chrome, though.

2012-04-05 04:14
by Boris Zbarsky
Ads