Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthormikesgt2
    • CommentTimeSep 12th 2006
     permalink

    I'm learning about objects and am trying to figure out how basic inheritance works. I've got into the habit of explicitly setting the prototype object with an object literal as it seems to make the creation of a class easier to read/understand.

    Anyway it seems to break the inheritance chain in the following code and I don't know why.

    window.onload = function() {
        var p = new Parent();
        alert(p.property); // works
    
        var c = new Child();
        alert(c.property); // doesn't work
    }
    
    
    function Child() {}
    Child.prototype = new Parent();
    
    function Parent() {}
    Parent.prototype = {property: "Hello from Parent's prototype."};
    

    If you replace the last line with

    Parent.prototype.property = "Hello from Parent's prototype.";
    

    then the whole thing works. Does anyone know why this is happening?

    •  
      CommentAuthorJohnRiv
    • CommentTimeSep 20th 2006 edited
     permalink
    I spent some time trying to figure this out, and here's what I've determined:

    First off, I suggest you break out of your habit of explicitly setting the prototype object with an object literal. By doing so in your example, you're creating a new object with a "property" property and having the "Parent" object inherit it and its property, when all you really want to do is extend the current "Parent" object (and all current + future instances of it) to include the "property" property (which incidently, is exactly what 'Parent.prototype.property = "Hello from Parent's prototype.";' does). To illustrate what I mean...

    This part of your code:

    function Parent() {}
    Parent.prototype = {property: "Hello from Parent's prototype."};


    is basically shorthand for this code:

    var objectLiteral = new Object();
    objectLiteral.property = "Hello from Parent's prototype.";

    function Parent() {}
    Parent.prototype = objectLiteral;


    when what you really want is:

    function Parent() {}
    Parent.prototype.property = "Hello from Parent's prototype.";


    Additionally, object literals require more memory than the prototype object (see this thread at Webmaster World for more info), so the efficiency of your script suffers.

    Now, as for why your code does not work the way you expected it to, my guess is this:

    Since the "Parent" object constructor (function Parent() {}) did not exist yet when you tried have the "Child" object inherit its properties via 'Child.prototype = new Parent();', the "Child" object had no properties at that time. Then when you initially defined the "Parent" contructor, you did not define any properties for it, so the "Child" object (which is set to inherit the properties and methods of the "Parent" object) still did not have any properties. If you had defined any properties or methods directly in the "Parent" object constructor, the "Child" object would have inherited those properies and methods. As I stated initially, in the next line (Parent.prototype = {property: "Hello from Parent's prototype."};) you create a new object with a property that is inherited by "Parent", but as you've noticed, the "Child" object does not receive the "property" property, so I'm guessing having an object inherit another object's methods and properties must not add those methods and properties to other objects that previously have inherited the original object. Adding the "property" property directly to the "Parent" object's prototype object (via 'Parent.prototype.property = "Hello from Parent's prototype.";') does add that property to all instances of the "Parent" object and instances of any objects (such as "Child") that inherit the "Parent" object.

    The keyword in the above bold text is "previously". So if you want to keep your object literal syntax and have the code work, just be sure to add the

    Child.prototype = new Parent();

    line after this line:

    Parent.prototype = {property: "Hello from Parent's prototype."};

    and it'll work fine (since then the "Parent" class will have already inherited the "property" property at the time you tell the "Child" class to inherit the "Parent" class).

    If anyone can prove my idea is right or wrong, I'm curious to know.
Add your comments
    Username Password
  • Format comments as (Help)