I couldn't find a very clear resource on finding super methods in javascript. This may help for those looking to create object oriented model objects in vanilla javascript (ECMAScript 5).

Are you doing it right?

Before starting however, it may be worth introspectively thinking about doing what you need to do in a more functional / prototypical way. After all, it may very well be the case that by trying to force an object oriented model to your program structure, you may actually be obfuscating your code and creating headaches in the long run for yourself and your team.

Let's assume though that you have weighed the pros and cons of different designs have decided that the object oriented structure is indeed the way you want to proceed...

Creating 'Classes' in ES5

This information may soon become dated and irrelevant as ES6 and other javascript variants make their way into the native browser implementation over the next few years but for now here's a down and dirty way that you make Object in ES5

Parent Class

  1. Everything is a function
  2. Give data members using this
  3. add methods assigning attributes in Class.prototype

e.g.,

  function Parent() {
  this.msg = "I am the Parent";
}
Parent.prototype.say = function() {
  console.log(this.msg);
};

var parentInstance = new Parent();

N.B., It's a good habit to assign a value to this at the start of the function to be clear what this refers to. Especially, in more complicated methods with anonymous functions, the ambiguity of this may cause hard to find bugs. What I often do is put the following at the start of a method...

  var self = this

Child Class

Child class must do what the parent class does but must also do a few more things to inherit the parent's data members and methods.

  1. In the constructor function use Parent.call(this)
  2. Copy the parent's prototype to the child's prototype
  3. Assign the constructor by assigning Class.prototype.constructor (because the parent's prototype was copied)

e.g.,

  function Child() {
  Parent.call(this);
  this.msg = "I am the Child.";
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

var childInstance = new Child();

As you can see, the child's constructor calls the parent's constructor function on itself to assign its data memebers before overriding with the code beneath it. (In java this would be the equivalent of calling super() in the constructor before assigning data member values).

Then the prototype is copied over to the child using Object.create. Because the parent's prototype has a constructor value of the parent, this value must be fixed to be Child.

Extending the Parent's method (Super Method)

You have a Child class that inherits the data members of the parents and even the parent's methods. However, what if you want to extend the parent's method. The answer is very similar to the Parent.call(this) function that we used to inherit the data members. However, instead of running the parent's constructor function, we are running the parent's method. Thus, we change it to:

  Parent.prototype.say.call(this)

where Parent.prototype.say is the instance method say() within the parent.

e.g.,

  Child.prototype.say = function() {
    console.log('Wahhhhh!!! ');
  Parent.prototype.say.call(this);
}

N.B., if the method has parameters, you can use call and put in the parameters as arguments after this. However, if you want to pass in the parameters as an array you can use the .apply() function instead of .call() and pass in the array as the parameter after this.

Here is a working demo of the code:


6,857 4 22