Question regarding Inheritance in JavaScript

Question

Can you please explain the difference between two codes mentioned below ?

function Person(){} 
Person.prototype.dance = function(){}; 

function Ninja(){} 

Ninja.prototype = Person.prototype; 

and

function Person(){} 
Person.prototype.dance = function(){}; 

function Ninja(){} 


Ninja.prototype = new Person();

I am little confused at these lines:

Ninja.prototype = Person.prototype; 

and

Ninja.prototype = new Person();

I came to know the second one supports Inheritance and the first one not, Can you explain me what is the magic in the second one?

Answer 1

1. Setting Ninja.prototype = Person.prototype; is saying that all Ninjas are Persons, and all Persons are Ninjas, since it simply makes the two prototypes point to the same thing. So changing Ninja.prototype will change Person.prototype and vice versa.

2. Setting Ninja.prototype = new Person(); is saying that all Ninjas start off being a regular person, but Ninja.prototype can be modified without changing the definition of Person. The key here is the new keyword, which creates a unique instance of Person, and is therefore free to be modified without affecting anything else.

---

Example of Ninja.prototype = Person.prototype

Define Ninja's prototype to be the same as Person's:

function Person() {}
Person.prototype.dance = function () {}; // A Person can dance

function Ninja() 
Ninja.prototype = Person.prototype; // Now a Ninja can dance too!

An instance of Ninja has the abilities of Person:

var ninja = new Ninja();
ninja.dance();

But, modifications to the definition of Ninja also affect instances of Person:

Ninja.prototype.kill = function () {}; // Oh no! Now a Person can kill too!
var bob = new Person();
bob.kill(); // Not what we wanted...

---

Example of Ninja.prototype = new Person()

Define Person in the same way as before:

function Person(){};
Person.prototype.dance = function () {}; // A Person can dance

Now I'll break Ninja.prototype = new Person() into two steps. First, create a new Person, called defaultNinja:

var defaultNinja = new Person(); // Despite the name, it's just a regular Person

Then define all Ninjas to be like the default:

function Ninja(){};
Ninja.prototype = defaultNinja; // Really the same as Ninja.prototype = new Person();

This time if we change what Ninjas can do:

Ninja.prototype.kill = function () {};
// OR,
defaultNinja.kill = function () {};

Instances of Person aren't affected:

ninja.kill(); // Now the ninja can kill
var bob = new Person();
bob.kill(); // ERROR, because Person.prototype doesn't have kill(),
            // only defaultNinja does