Javascript "OOP" and prototypes with multiple-level inheritance

Question

I'm new to Javascript programming and I'm approaching my first application (a game, indeed) from an object oriented programming perspective (I know js is not really object oriented, but for this particular problem it was easier for me to start like this).

I have a hierarchy of "classes" where the top-most ("Thing" class) defines a list of related things (attached items in the game). It's inherited by a ThingA class which is inherited by ThingA1 and ThingA2 classes.

The minimal example would be:

function Thing() 
{
  this.relatedThings   = [];
}
Thing.prototype.relateThing = function(what)
{
  this.relatedThings.push(what);
}

ThingA.prototype = new Thing();
ThingA.prototype.constructor = ThingA;
function ThingA()
{
}

ThingA1.prototype = new ThingA();
ThingA1.prototype.constructor = ThingA1;
function ThingA1()
{

}

ThingA2.prototype = new ThingA();
ThingA2.prototype.constructor = ThingA2;
function ThingA2()
{    
}

var thingList = [];

thingList.push(new ThingA());
thingList.push(new ThingA1());
thingList.push(new ThingA2());
thingList.push(new ThingA2());
thingList.push(new Thing());

thingList[1].relateThing('hello');

At the end of the code, when the relateThing is executed, every ThingA, ThingA1 and ThingA2 is going to execute it (not the last "Thing" object in the array). I've found if I define the relateThing function in the ThingA prototype, it will work right. Because of how the game is designed I'll prefer not to have to do that.

Maybe I'm not understanding something about how the prototypes work in javascript. I know the function is shared among all the objects, but i guess the execution would be individual. Could somebody explain why is this happening and how to solve it? I don't know if I'm doing the inheritance wrong, or the prototypes definitions, or what.

Thanks in advance.

JavaScript is pretty much based on objects, so why should it not be object oriented? — Felix Kling
– Felix Kling, Commented Feb 23, 2013 at 13:32
As far as I've learned about javascript, prototypal languages are not exactly the same as object oriented languages (there are no classes, etc), although the concept could be similar. But I'm not an expert. — neverbot
– neverbot, Commented Feb 23, 2013 at 13:39
The fact that JavaScript is strongly object oriented doesn't meen it works the same way as other OO languages. In fact, inheritance is ill supported. Many libraries implement advanced ways which really are workarounds the improve how inheritance works. One of the bests currently I found is that of John Resig's which is based on the Prototype and base2 libraries but further improved. ejohn.org/blog/simple-javascript-inheritance — marekful
– marekful, Commented Feb 23, 2013 at 13:41
Is your code not working as expected ? Didn't understand what the result you wanted and what u got instead — Joel Blum
– Joel Blum, Commented Feb 23, 2013 at 13:49
@Joel_Blum After the execution all the objects have a "hello" inside their respective relatedThings array. I would have expected only thingList[1] would have it. — neverbot
– neverbot, Commented Feb 23, 2013 at 13:55

Matt Coughlin · Accepted Answer · 2013-03-18 01:35:51Z

Welcome to the prototype chain!

Let's see what it looks like in your example.

The Problem

When you call new Thing(), you are creating a new object with a property relatedThings which refers to an array. So we can say we have this:

+--------------+
|Thing instance|
|              |
| relatedThings|----> Array
+--------------+

You are then assigning this instance to ThingA.prototype:

+--------------+
|    ThingA    |      +--------------+
|              |      |Thing instance|
|   prototype  |----> |              |
+--------------+      | relatedThings|----> Array
                      +--------------+

So each instance of ThingA will inherit from the Thing instance. Now you are going to create ThingA1 and ThingA2 and assign a new ThingA instance to each of their prototypes, and later create instances of ThingA1 and ThingA2 (and ThingA and Thing, but not shown here).

The relationship is now this (__proto__ is an internal property, connecting an object with its prototype):

                               +-------------+
                               |   ThingA    |
                               |             |    
+-------------+                |  prototype  |----+
|   ThingA1   |                +-------------+    |
|             |                                   |
|  prototype  |---> +--------------+              |
+-------------+     |    ThingA    |              |
                    | instance (1) |              |
                    |              |              |
+-------------+     |  __proto__   |--------------+ 
|   ThingA1   |     +--------------+              |
|   instance  |           ^                       |
|             |           |                       v
|  __proto__  |-----------+                 +--------------+
+-------------+                             |Thing instance|
                                            |              |
                                            | relatedThings|---> Array
+-------------+     +--------------+        +--------------+ 
|   ThingA2   |     |   ThingA     |              ^
|             |     | instance (2) |              |
|  prototype  |---> |              |              |
+-------------+     |  __proto__   |--------------+
                    +--------------+
+-------------+           ^
|   ThingA2   |           |  
|   instance  |           |
|             |           |
|  __proto__  |-----------+
+-------------+

And because of that, every instance of ThingA, ThingA1 or ThingA2 refers to one and the same array instance.

This is not what you want!

The Solution

To solve this problem, each instance of any "subclass" should have its own relatedThings property. You can achieve this by calling the parent constructor in each child constructor, similar to calling super() in other languages:

function ThingA() {
    Thing.call(this);
}

function ThingA1() {
    ThingA.call(this);
}

// ...

This calls Thing and ThingA and sets this inside those function to the first argument you pass to .call. Learn more about .call ^[MDN] and this ^[MDN].

This alone will change the above picture to:

                               +-------------+
                               |   ThingA    |
                               |             |    
+-------------+                |  prototype  |----+
|   ThingA1   |                +-------------+    |
|             |                                   |
|  prototype  |---> +--------------+              |
+-------------+     |    ThingA    |              |
                    | instance (1) |              |
                    |              |              |
                    | relatedThings|---> Array    |
+-------------+     |  __proto__   |--------------+ 
|   ThingA1   |     +--------------+              |
|   instance  |           ^                       |
|             |           |                       |
|relatedThings|---> Array |                       v
|  __proto__  |-----------+                 +--------------+
+-------------+                             |Thing instance|
                                            |              |
                                            | relatedThings|---> Array
+-------------+     +--------------+        +--------------+ 
|   ThingA2   |     |   ThingA     |              ^
|             |     | instance (2) |              |
|  prototype  |---> |              |              |
+-------------+     | relatedThings|---> Array    |
                    |  __proto__   |--------------+
                    +--------------+
+-------------+           ^
|   ThingA2   |           |  
|   instance  |           |
|             |           |
|relatedThings|---> Array | 
|  __proto__  |-----------+
+-------------+

As you can see, each instance has its own relatedThings property, which refers to a different array instance. There are still relatedThings properties in the prototype chain, but they are all shadowed by the instance property.

Better Inheritance

Also, don't set the prototype with:

ThingA.prototype = new Thing();

You actually don't want to create a new Thing instance here. What would happen if Thing expected arguments? Which one would you pass? What if calling the Thing constructor has side effects?

What you actually want is to hook up Thing.prototype into the prototype chain. You can do this with Object.create ^[MDN]:

ThingA.prototype = Object.create(Thing.prototype);

Anything that happens when the constructor (Thing) is executed will happen later, when we actually create a new ThingA instance (by calling Thing.call(this) as shown above).

Well. I'll just stop writing what I was going to write. Solid response. +1
@Felix : Impressive response, i'm testing now. Just another question: I change the way I set the prototype, but should be the constructor specified the same way I'm doing? i.e: ThingA.prototype.constructor = ThingA;
@neverbot: Well, I hope it helps, maybe it's too confusing :D Setting constructor is not required because no internal method makes use of it, but it is good practice.
Nice diagrams. For the last section, there are some excellent answers going into the details at What is the reason (not) to use the 'new' keyword here?

Harold · Accepted Answer · 2014-01-22 16:19:11Z

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

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

// First (bottom level)
var Person = new Class(function() {
    this.name = "Unknown Person";
});

// Employee, extend on Person & apply the Role property.
var Employee = new Class({ extends: Person }, function() {
    this.name = 'Unknown Employee';
    this.role = 'Employee';
});

// 3rd level, extend on Employee. Modify existing properties.
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;
    }
});

// And to use the final result:
var myManager = new Manager("John Smith");
console.log( myManager.name ); // John Smith
console.log( myManager.role ); // Manager

Plap · Accepted Answer · 2013-02-23 14:22:42Z

0

In OOP, when you're are defining a constructor of a sub class you are also (implicitly or explicitly) choosing a constructor from the super type. When a sub object is constructed both constructor are executed, first that from the super class, the all the other down the hierarchy.

In javascript this must be explicitly called and don't come automatically!

function Thing() {
  this.relatedThings = [];
}
Thing.prototype.relateThing = function(what){
  this.relatedThings.push(what);
}

function ThingA(){
  Thing.call(this);
}
ThingA.prototype = new Thing();

function ThingA1(){
  ThingA.call(this);
}
ThingA1.prototype = new ThingA();

function ThingA2(){
  ThingA.call(this);

}
ThingA2.prototype = new ThingA();

If you don't this way, all the instance of ThingA, ThingA1 and ThingA2 shere the same relatedThings array constructed in the Thing constructor and called once for all instance at line:

ThingA.prototype = new Thing();

Globally, infact, in your code, you have only 2 calls to the Thing constructor and this result in only 2 instances of the relatedThings array.

edited Feb 23, 2013 at 14:22

answered Feb 23, 2013 at 14:05

Plap

1,0661 gold badge8 silver badges14 bronze badges

1 Comment

Plap Over a year ago

@Felix Kling: Thank for advice, I corrected. I read yours too, congrats :)

Collectives™ on Stack Overflow

Javascript "OOP" and prototypes with multiple-level inheritance

3 Answers 3

The Problem

The Solution

Better Inheritance

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

The Problem

The Solution

Better Inheritance

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related