Prototypes and usage Javascript

Question

I have a chunk of code below:

function Foo(name){
    this.name = name;
}

Foo.prototype.myName = function() {
    return this.name;
}

function Bar(name, label){
  Foo.call(this, name);
  this.label = label;

}
Bar.prototype = Object.create(Foo.prototype);

Bar.prototype.myLabel = function(){
   return this.label;
}

var a = new Bar("a" , "obj a");

a.myName();
a.myLabel();

Okay, now as per my understanding

It creates a function Foo which sets the name
It creates a function myName on the linked prototype Object of Foo.
It creates a function Bar which just sets the label and uses the function Foo's functionality to set the name instead of doing it itself.
Then the prototype linkage is established between Foo and Bar. So I assume that there are two separate prototype objects linked to one another for Foo and Bar respectively.
Now Bar's prototype object is having a function myLabel inside it.
The call to new Bar creates a new object a and links it's prototype object to Bar's prototype.

So takeways are :

Foo's prototype contains one get function - myName
Foo itself just sets a property- name
Bar's prototype is having one get function - myLabel
Bar itself is just setting a property - mylabel
The object a's prototype is linked to Bar's prototype which in itself is linked to Foo's prototype. So in total there are three prototype objects.

Is this flow of thinking correct ? Please rectify or add something to enlighten the discussion. I am fairly new to the language and it's nuances and hardly the use cases/practical examples of prototype.

*"So in total there are three prototype objects."* - Not quite right. The object `a`'s prototype is the same object referenced by the `Bar.prototype` property. The `Bar.prototype` property is *not* the `Bar` object's prototype, it is the object that will become the prototype of any objects created via `new Bar()`. (`Bar`, being a function, is also an object that has its own prototype not at all related to what `Bar.prototype` refers to.) — nnnnnn, May 15 '16 at 05:54
Ok. So Bar.prototype (or any object's protype after new call) and Foo.prototype are again referencing to the same prototype object...is that correct ? — HalfWebDev, May 15 '16 at 06:09
No, `Bar.prototype` and `Foo.prototype` reference different objects. (Sorry, but explaining this in depth is beyond what I can do in a comment, and I don't have time to write up a thorough answer.) — nnnnnn, May 15 '16 at 06:12
Understood that there are in total 2 prototype objects. One of Foo and other of any object created via new call and these are linked to each other. — HalfWebDev, May 15 '16 at 06:14
Kind of. There are a couple of other prototypes associated with the functions as objects, but they're not relevant here. I'd suggest reading the following question and some of its linked duplicates: http://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript - there are pictures that help show the linkages. — nnnnnn, May 15 '16 at 06:16
Goes a great deal in giving a nice view of prototypes and chains. Pleasure! — HalfWebDev, May 15 '16 at 06:37

score 0 · Accepted Answer · answered May 15 '16 at 06:31

Firstly to enumerate Foo.prototype:

Foo.prototype = { constructor: Foo, myName: function() { return this.name}};

Then Bar calls Foo to apply 'name' to the the instance of Bar being constructed, rather than doing it itself, before setting its second parameter as a new Bar object property.

But Bar.prototype is set to {} protypically inheriting from Foo.prototype. So for example, Bar.prototype.constructor == Foo; // true

Bar.prototype is assigned a local own property method myLabel, inheritable by Bar objects but not by Foo objects.

So points 1,2,3 are correct.

Point 4 is incorrect. There is a prototypical inheritance established such that Bar.prototype inherits from Foo.prototype. It is not mutual and is a one way inheritance: JavaScript does not support any kind of bi-directional prototypical inheritance.

Points 5 and 6 are correct.

Prototypes and usage Javascript

1 Answers1