inheritance via javascript

Question

i've been experimenting with javascript's prototypal inheritance and have come across something that perhaps can be explained.

function dinner(food,drink){
 this.food=food;
 this.drink=drink;
}
dinner.prototype.desert=function(){
var x = this.food;
return x.split(' ')[0]+' Ice Cream Float';
}
function superSupper(steak){
 this.steak=steak;
}
superSupper.prototype= new dinner();
superSupper.prototype.constructor=superSupper;
var x = new superSupper('corn','beet juice')
x.grub='beef';
x.clams = 'nope';

in the above code i'm making a new construtor "superSupper" and making it inherit from dinner. when this is viewed in a console.log i see this:

superSupper
clams: "nope"
grub: "beef"
steak: "corn"
__proto__: dinner
constructor: function superSupper(steak){
drink: undefined
food: undefined
__proto__: dinner

how do i access the drink and food properties that i have now inherited from dinner?

p.s. trying this: "x.food='some string'" only creates a new property in the superSupper instance called food, but does not assign a value to the inherited food property.

• pimvdb: I'm not entirely sure what you want, but changing the inherited property means that all superSupper instances will have that property set, since the inherited dinner instance is shared.
• zero: what im trying to do is access/assign the inherited properties in otherwords give them a value for this instance. i've tried alot to do this but they still remain undefined
• Kristian: @pimvdb from how i'm reading it, I think he wants to be able to access superSupper.food because superSupper "extends" dinner
• pimvdb: @code wombat: Still I think that's not what you want. The dinner instance you created is set as the prototype of superSupper, so if you set a property on that dinner instance, all superSupper instances will have that property set. If you want to set it on a per-superSupper-instance basis then I don't think you want to alter the inherited property.
• kirilloid: Yes, that's the same as for classes. Once property is defined in parent class, it could not be removed from child one. hasOwnProperty allows to distinguish, is property defined in certain instance, or one of its prototypes.

Answer 1

You have to modify your superSupper a bit:

function superSupper(steak){
 // calling superclass constructor
 dinner.apply(this, arguments);
 this.steak=steak;
}

• pimvdb: Although it doesn't matter here, you would usually want to call the "superclass" before setting own properties (in case you're overwriting properties).
• zero: so is apply moving the inherited properties into the scope of the instantiated object?
• Alex Pakka: @codewombat you may want to read this: joost.zeekat.nl/constructors-considered-mildly-confusing.html
• Nemoy: apply and call can be used to execute a function in the scope of another object. So here dinner will be executed in the scope of superSupper, hence this inside dinner at this point refers to superSupper and food and dinner becomes property of superSupper
• zero: @Alex Pakka thanks for the link. i got a feeling that i should study classical inheritance as well