JavaScript - prototype inheritance

Question

I'm kinda new to OOJS so please bear with me on this. I'm trying to get a setup like the following:

Item
 name = "no name"
 description = "no description"
 someVar = "no var"
Section
 name = "Section A"
 //Rest are inherited
 deleted = false

So far I have:

function Item() {}
function Section() {}
$.extend(Item.prototype, {
 name: "no name",
 description: "no description"
}
Section.prototype = Item.prototype;
$.extend(this.Section.prototype, {
 description: "A section",
 swung: true,
 swing: function() {
 this.swung = false;
 return this;
 }
});
$.extend(this.Item.prototype, {
 "date": "x"
});
$.extend(this.Section.prototype, {
 "someVar": "someValue"
});

If I create a new Section, I get:

Section {
 name: "no name", 
 description: "A section", 
 swung: true,
 swing: function,
 date: "x",
 someVar: "someValue"
}

If I create a new Item, I get:

Item {
 name: "no name", 
 description: "A section", 
 swung: true, 
 swing: function, 
 date: "x",
 someVar: "someValue"
}

Obviously they're both the same, and the reason is that the prototype is the same instance. What I am trying to achieve is that all functions which inherit from Item pick up properties whenver they're added, and any changes to the value of a property on the Item prototype do not affect the property on Section if it has been overridden beforehand. Any changes to the Section prototype should not affect the Item prototype (as has obviously happened above) as there will be properties specific to Section. Does anyone know of any way to achieve this?

If I'm not being clear, please say so rather than downvoting me :). Thanks in advance.

• dandavis: use Section.prototype = new Item() instead of merging them. that way, section's prototype is own object which can be modified without affecting Item.prototype.
• sbking: Also, for performance reasons, you really do not have to use jQuery's extend method. For example, you can just do Item.prototype.date = "x";
• ClarkeyBoy: @dandavis: omg that did it! Such a small change! Thanks. @Cuberto: I know it's not necessarily a good idea to use jQuery for things like this - it's just to avoid having to keep writing Item.prototype. .... I'm just experimenting now - when it comes to applying it at work, I'll write it the long way.

Answer 1

When inheriting in JS, you don't assign one prototype to another. Instead, you assign an instance of the parent to the child's prototype:

Section.prototype = new Item();

You can check out a simplified version of your code (without the need for jQuery, which just unnecessarily complicates everything): http://jsfiddle.net/p3h5C/

• ClarkeyBoy: Thanks Justin, especially for the explanation before the code - really simple to understand like that :).