-1
var Person = function () { this.bar = 'bar' };
Person.prototype.foo = 'foo'; //proto as property


var Chef = function () { this.goo = 'goo' };
Chef.prototype = new Person();



var cody = function () { this.goo = 'goo' };
cody.prototype = new Chef();

var a = new cody();

Very confused with JavaScript prototype 

a.__proto__   why is it Chef{goo:"goo"} and not cody{}
a.constructor.prototype why is it Person {foo: "foo"} and not Chef{goo:"goo"}
a.constructor  why is it function Person() and not function cody()

Can someone please explain these questions and also suggest a link to study multi level inheritance in JavaScript?

Novice
  • 458
  • 1
  • 6
  • 21
  • 1
    The `constructor` property is inherited from the `prototype` of the constructor. If you replace the `prototype`, you erase that `constructor`. Then don't get surprised if `constructor` doesn't work as expected. – Oriol Aug 23 '15 at 14:36
  • It looks like you learned JavaScript from an old tutorial that had weird inheritance. Personally, I learned this kind of inheritance from Codecademy, but it's not how JavaScript inheritance should work. – Noble Mushtak Aug 23 '15 at 14:37
  • @NobleMushtak by the way i have learnt this style of inheritance from JavaScript Succinctly which is an awesome resource to learn JavaScript but thanks for the advice I will try to understand it better from your link. – Novice Aug 23 '15 at 14:56
  • You should have a look at http://stackoverflow.com/q/17392857/218196 and http://stackoverflow.com/q/8453887/218196 – Felix Kling Aug 23 '15 at 15:00
  • 1
    I'd highly recommend [this](https://skimmable-videos.herokuapp.com/show/558f4dc9c240320300d8ef34). – Adam Zerner Aug 23 '15 at 15:22

1 Answers1

0

Let's take a good look at your code again:

//OK, so this is just a regular constructor that sets bar in the constructor and foo on the prototype.
var Person = function () { this.bar = 'bar' };
Person.prototype.foo = 'foo';

//This is a constructor Chef that inherits from Person. It also sets goo in the constructor.
var Chef = function () { this.goo = 'goo' };
//However, it inherits from Person in an odd way: It calls an instantiation of Person and set the prototype to that.
//This sets Chef.prototype.constructor to Person because it's an instance of Person, so all instances of Chef will have the .constructor property of Person.
//It also sets all instances of Chef's __proto__ to Person.prototype since the Chef.prototype directly comes from Person.
Chef.prototype = new Person();

//Now, this is a constructor that inherits from Chef and sets goo in the constructor.
var cody = function () { this.goo = 'goo' };
//However, it does inheritance in the same weird way: By making an instatiation of Chef and setting the prototype to that.
//This makes cody.prototype.constructor the same as Chef.prototype.constructor, which is Person. Thus, cody.prototype.constructor is Person.
//However, code.prototype directly inherits from Chef because it's an instance from Chef. This means that all instances of cody will have the __proto__ from Chef, not from Person and not from cody.
cody.prototype = new Chef();

//Thus, following our analysis, we have the following info on a:
//a.__proto__ is Chef.prototype because cody.prototype is an instance of Chef. This means a.__proto__ is Chef{goo:"goo"},
//a.constructor is Person because cody.prototype.constructor is Chef.prototype.constructor which is Person.prototype.constructor which is just Person.
//Since a.constructor is Person, a.constructor.prototype is Person.prototype and thus Person {foo:"foo"}.
var a = new cody();

Hopefully, this analysis of your code helps you understand JavaScript's prototype system better! For a better way of doing JavaScript inheritance, I recommend Khan Academy.

Noble Mushtak
  • 1,784
  • 10
  • 22
  • Any specific reason to cal this type of inheritance as weird ?? – Novice Aug 23 '15 at 15:07
  • It's an old way of doing inheritance that has weird results, as shown in the weird values of `a.__proto__` and `a.constructor`. I'm pretty sure that since EMCAScript 5 came out, most people have been using `Object.create()` like in the Khan Academy tutorial. – Noble Mushtak Aug 23 '15 at 15:19