Javascript Prototypal Inheritance - Truly Understanding The Concept

I was looking at this video explanation(https://www.youtube.com/watch?v=qMO-LTOrJaE) of JS prototypal inheritance. There's something I don't understand. Let me explain But as soo

Solution 1:

There's something I don't understand. Let me explain

varBear = function(type) { //PARENTthis.type;
  this.hasFur = true;
}

Bear.prototype.kingdom = 'Animalia'; //ASSIGNING TO PARENT'S PROTOTYPEvarGrizzly = function(type) { //CHILDthis.species = 'Brown Bear';
}

Grizzly.prototype = Object.create(Bear.prototype); //INHERITING FROM PARENTvar grizzly1 = newGrizzly('grizzly');

console.log(grizzly1.hasFur); //prints undefined //members in parent's constructor not accessibleconsole.log(grizzly1.kingdom); //prints Animalia //however, members in parent's prototype is accessible

In the code snippet shared above, grizzly1.hasFur is undefined as the constructor function for Bear is not yet executed. The line Grizzly.prototype = Object.create(Bear.prototype); just inherits the parent prototypal methods and properties.

But as soon as you add the following line to the Grizzly constructor,

varBear = function(type) { //PARENTthis.type;
  this.hasFur = true;
}

Bear.prototype.kingdom = 'Animalia'; //ASSIGNING TO PARENT'S PROTOTYPEvarGrizzly = function(type) { //CHILDBear.call(this, type); //ADDEDthis.species = 'Brown Bear';
}

Grizzly.prototype = Object.create(Bear.prototype); //INHERITING FROM PARENTvar grizzly1 = newGrizzly('grizzly');

console.log(grizzly1.hasFur); //prints undefined //members in parent's constructor not accessibleconsole.log(grizzly1.kingdom);

grizzly1.hasFur is now true because now within the constructor function of grizzly, the constructor class for Bear is invoked changing its context using a call. The this. hasFur gets its true value assigned in this operation as here due to the changed context, this now refers to the instance of grizzly.

However, inheriting in the below fashion, gives the child access to everything in the parent even without the line //Bear.call(this) in the Child constructor. Grizzly.prototype = new Bear();

What happens here is, a new instance of the Bear class is created. Now any instance of the class Bear can have access to the prototypal methods and internal properties defined while instantiating the constructor class i.e. function Bear. Now after the instance being created, this gets assigned to the prototypal chain of Grizzly. So any new instance of Grizzly not only access the internal properties of Grizzly, but also behaves as a new instance of the Bear class.

Also what are the different ways of inheriting in JavaScript

I would definitely suggest you to study design patterns. You can google out different books for it. I loved reading JavaScript: The Good Parts and Learning JavaScript Design Patterns. You might love some other books for clearing up your fundamentals. There are few countable things in Javascript like these, closures, etc., which needs crystal clear conceptions.

Which one is the best to use considering best practices and why.

The best practice in prototypal inheritance ,I prefer,is: In the constructor class say A

function A () {
   this.privateProp = something;
}
A.prototype.public = something;

So see declare only those properties and methods inside the constructor class, which you wanna keep private. Rest keep it exposed in prototype chain.

Hope this helps.

Solution 2:

Check this out:

varBear = function(type){ //PARENTthis.type;
  this.hasFur = true;
}

alert(newBear().hasFur);

See how this does gives you true in the alert box. Think, why is this working, and not for your example?

Thought about it?

It's because in this code:

varBear = function(type){ //PARENTthis.type;
  this.hasFur = true;
}

You're assigning the function to Bear, so it's accessible by new Bear() not Bear.prototype. This will work:

Bear.prototype.kingdom = 'Animalia'; //ASSIGNING TO PARENT'S PROTOTYPEvarGrizzly = function(type){ //CHILDthis.species = 'Brown Bear';
}

Grizzly.prototype = Object.create(newBear()); // Modified linevar grizzly1 = newGrizzly();

alert(grizzly1.hasFur);  // Prints true now.alert(grizzly1.kingdom);