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.

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. — pimvdb
– pimvdb, Commented Mar 14, 2012 at 16:31
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 — zero
– zero, Commented Mar 14, 2012 at 16:35
@pimvdb from how i'm reading it, I think he wants to be able to access superSupper.food because superSupper "extends" dinner — Kristian
– Kristian, Commented Mar 14, 2012 at 16:35
@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. — pimvdb
– pimvdb, Commented Mar 14, 2012 at 16:36
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. — kirilloid
– kirilloid, Commented Mar 14, 2012 at 16:37

Nemoy · Accepted Answer · 2012-03-14 16:45:06Z

5

You have to modify your superSupper a bit:

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

edited Mar 14, 2012 at 16:45

answered Mar 14, 2012 at 16:36

Nemoy

3,4471 gold badge17 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

pimvdb Over a year ago

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 Over a year ago

so is apply moving the inherited properties into the scope of the instantiated object?

Alex Pakka Over a year ago

@codewombat you may want to read this: joost.zeekat.nl/constructors-considered-mildly-confusing.html

Nemoy Over a year ago

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 Over a year ago

@Alex Pakka thanks for the link. i got a feeling that i should study classical inheritance as well

|

Collectives™ on Stack Overflow

inheritance via javascript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related