Object Inheritance in JavaScript

Question

My question is regarding a child object maintaining the prototype chain of its parent object.

In John Resig\'s Advanced Javascript slides (http://ejohn.org/apps/lear

Answer 1

If you don't like the way prototyping works in JavaScript in order to achieve what you need, I'd suggest taking a look at this: https://github.com/haroldiedema/joii

It basically allows you to do the following (and more):

var Employee = new Class(function() {
    this.name = 'Unknown Employee';
    this.role = 'Employee';
});

var Manager = new Class({ extends: Employee }, function()
{
    // Overwrite the value of 'role'.
    this.role = 'Manager';

    // Class constructor to apply the given 'name' value.
    this.__construct = function(name) {
        this.name = name;
    }
});

var myManager = new Manager("John Smith");
console.log( myManager.name ); // John Smith
console.log( myManager.role ); // Manager

Answer 2

In the code John Resig provided he first sets Ninja.prototype to Person.prototype. Then he immediately resets it to { dance: Person.prototype.dance }:

// Achieve similar, but non-inheritable, results
Ninja.prototype = Person.prototype;
Ninja.prototype = { dance: Person.prototype.dance };

The result is that any object created by the Ninja constructor will directly inherit from { dance: Person.prototype.dance } which is not an instance of Person.prototype. Hence (new Ninja) instanceof Person will return false. In this case the prototype chain is:

        null
         ^
         |
         | [[prototype]]
         |
+------------------+
| Object.prototype |
+------------------+
         ^
         |
         | [[prototype]]
         |
+------------------+
|  Ninja.prototype |
+------------------+
         ^
         |
         | [[prototype]]
         |
+------------------+
|     new Ninja    |
+------------------+

In the modified version you remove the second assignment to Ninja.prototype, effectively setting Ninja.prototype to Person.prototype. Hence the prototype chain is:

         null
          ^
          |
          | [[prototype]]
          |
+-------------------+
|  Object.prototype |
+-------------------+
          ^
          |
          | [[prototype]]
          |
+-------------------+
| Ninja.prototype / |
| Person.prototype  |
+-------------------+
          ^
          |
          | [[prototype]]
          |
+-------------------+
|     new Ninja     |
+-------------------+

Notice that since Ninja.prototype is the same as Person.prototype both (new Ninja) intanceof Ninja and (new Ninja) instanceof Person will return true. This is because the instanceof operator depends on the prototype of a constructor.

However the right way to do achieve inheritance in JavaScript would be to set Ninja.prototype to Object.create(Person.prototype) (or in the old school way to new Person), in which case the prototype chain would be:

        null
         ^
         |
         | [[prototype]]
         |
+------------------+
| Object.prototype |
+------------------+
         ^
         |
         | [[prototype]]
         |
+------------------+
| Person.prototype |
+------------------+
         ^
         |
         | [[prototype]]
         |
+------------------+
|  Ninja.prototype |
+------------------+
         ^
         |
         | [[prototype]]
         |
+------------------+
|     new Ninja    |
+------------------+

Note: Always remember that in JavaScript objects inherit from other objects. They never inherit from constructor functions. If you wish to learn about true prototypal inheritance in JavaScript then read my blog post on why prototypal inhritance matters.