Basic concept of Javascript prototype inheritance

Javascript prototype is one of the basic concept about Javascript.Prototypes are simply the parents of any object present in Javascript. The reason behind this post is to give an overview of what Javascript prototypes are using simple plain language and basic example. I would appreciate if you will throw some productive comments or questions in comments.

Every object inherits properties from its prototype. Like an array gets its properties and methods from array.prototype. Every object have a prototype property which is empty by default and it enumerable therefore never iterates in for...in loop. However Chrome, Safari and Firefox have __proto__ property which let developer get the prototype property. What you do is to create a constructor function and create new instances of that function. Each instance will inherit the properties from their constructor function. Basically this chain of inheritance in known "Prototype Chain".

It was quite a bit confusion for me to understand the nature of Javascript prototype because Javascript has an object model and it works with prototype inheritance instead of class based inheritance. This is all sound confusing first time and later on it gets easier and easier. I might be using .__proto__ through out the post because it is the easier way of learning about prototypes.

Constructor Function

Cnstructor function provides a mechanism to attach new properties to prototype object to each new instance that is created. 

// constructor
function human(){
  // Adding properties to every new instance
  this.child="By birth";
  this.hasEars=true;
  this.symmetry="bisymmetry";
}
// new instance made here
var Neymar=new human();

// getting a property of human
console.log(Neymar.child) // 

Right now constructor function is the first member of prototype chain while each new instance will come after it, therefore if you will console log the constructor name it will point to the constructor function name.

console.log(Neymar.constructor.name) // human

Prototype Property

Since Javascript does prototype based inheritance therefore we can extend one constructor function with some more properties using an other constructor function. Confusing? check this out.

To extend the properties of a constructor function we have to alter the prototype property of the constructor function. To do so, we create the one instance to other's prototype. Lets make it easy with code.

// constructor
function human(){
  // Adding properties to every new instance
  this.child="By birth";
  this.hasEars=true;
  this.symmetry="bisymmetry";
}

function footballer(){
  this.stamina="excellent";
  this.hairstyle="attractive";
  this.skills="amazing";
}
// extended footballer properties
footballer.prototype=new human();
var Neymar=new footballer();
console.log(Neymar.child);   // Birth

Now whatever the human.prototype had will be inherited into footballer.prototype and this is how a footballer became an human. This demonstrate that Javascript inheritance is prototype inheritance and the chain of footballer and then human is called a prototype chain.

Inheritance of once object to an other also changes the name of constructor of every instance created. If we console out the Neymar constructor name then it would point the last constructor of prototype chain.

Object.getPrototypeOf()

This is a method to get the prototype object of the object's constructor function. The returned object would contain the properties and values of the last member of the prototype chain that is human in above example. 

console.log(Object.getPrototypeOf(Neymar)) // human{...}

I hope this post might help you understand the basic concept of prototype inheritance.