difference between inheriting from another constructor using prototype and using apply method inside the constructor which inherits

Question

Here i have two example which has two constructor Product and Food.In my first example Food constrcutor inherits from Products via Food.prototype=new Product();when i console.log chicken object created by Food constructor in shows it properties on the console:

Food {category: "food", name: newname, price: newprice}

here is the code:

<html>
<body>
<script>
function Product(name, price) {
  this.name = name;
  this.price =price;

}

function Food(name, price) {

  this.category = 'food';
}
Food.prototype=new Product('newname','newprice');
var chicken = new Food('chicken','40');

console.log(chicken);
</script>
</body>
</html>

Now here is the second example where i removed the Food.prototype=new Products('newname,'newprice');and instead i used Product.apply(this,arguments); inside Food constructor.in the console it shows the same result:

Food {name: "chicken", price: "40", category: "food"}

Code:

<html>
<body>
<script>
function Product(name, price) {
  this.name = name;
  this.price =price;

}

function Food(name, price) {
  Product.apply(this,arguments);
  this.category = 'food';
}

var chicken = new Food('chicken','40');

console.log(chicken);
</script>
</body>
</html>

What confusing me is in both examples, chicken object has three properties category,name and price.Though in the second example Food is not inheriting from Product.I mean Product is not on the prototype chain of Food.So whats the difference between the two??Which one to use when??i am quite new to object oriented concept .So detailed explanation would be great!!!

They are not exclusive, one is like "super", the other one is like "extends". You need both, call the parent constructor to inherit properties, and setup the prototype chain. — elclanrs, Sep 05 '14 at 19:25
`chicken` won't inherit anything from the prototype of `Product`, you need both. — elclanrs, Sep 05 '14 at 19:32
i know chicken is not inheriting in the second example.but it has all the three propeties like the first one — AL-zami, Sep 05 '14 at 19:33
Yes, properties from the constructor, nothing from the prototype. This is not inheritance at all, it is just calling a function with the `this` value, and since `new` returns an instance of an object, all you get is an object with those properties. The two objects are still unrelated. — elclanrs, Sep 05 '14 at 19:34
This is gold http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/ — Nico, Sep 05 '14 at 19:52

score 4 · Accepted Answer · answered Sep 05 '14 at 19:36

The properties of the objects in both cases are the same, but not their own properties.

aProto = { x: 1 }
a = Object.create(aProto) // a's prototype is aProto
a.y = 2

In the snippet above, a will show both x and y as properties. However, x is inherited and y isn't, which you can verify by using:

Object.hasOwnProperty(a, 'x') // false
Object.hasOwnProperty(a, 'y') // true

In other words, for each copy of a there will be an y property; but all of them will appear to have the x property, which only exists in the prototype.

The difference is one of cloning properties vs. using the same property from a parent object.

This way you save space in your objects, and ensure that when the property in the prototype changes, all children reflect that change. It's the ideal place for "class" methods and attributes, since these don't change across instances, but all instances must have them.

thanks!!But in my second example if i do console.log(chicken.hasOwnProperty( 'price' )); it is returning true ,though it is not inheriting!!how can i explain this situation. — AL-zami, Sep 05 '14 at 20:05
Exactly: it returns true because in the 2nd example there is no prototype, all the properties are set on the `a` object itself. The first example will show a property that's not `own` — slezica, Sep 05 '14 at 20:59

score 0 · Answer 2 · edited May 23 '17 at 11:57

Your prototype example is wrong:

Food.prototype=new Product('newname','newprice');

While declaring a type called Food you're forcing yourself to create an instance of Product and now all Food instances have a name of newname and newprice. You should do the following:

Food.prototype=Object.create(Product.prototype);

As the other answer already pointed out; the prototype members are shared among instances yet they are called on instances. Usually behavior is put on the prototype.

Your second example is good as it re uses Product constructor and sets instance specific Food members when an instance of Food is created.

Since both your examples have no members that can be shared there is no use for prototype in your examples.

You can read more about prototype and constructor functions here.

difference between inheriting from another constructor using prototype and using apply method inside the constructor which inherits

2 Answers2