Proper JavaScript OOP with inheritance for Java developers

Update: This post may still be correct but since ES6 the keyword “class” has been introduced to JavaScript, so make sure to check this out first: ES6 classes

---

The following is a personal best practice advice for OO with ES5 (and older)

Coming from a Java background, I really miss keywords like class or extends when I write JavaScript. Yes, I know. You can write OO-code in JavaScript but it’s really a mess using the prototype property. So I’ve been looking for a best practice for this for quite a while now. Reading through various tutorials I stumbled over some “hacks” (looked hackish to me at least) which never seemed to be really professional. Even the two JavaScript books I have here suggest two different ways of creating “class-like” constructs. However, after years of writing JavaScript now I think that I’ve found the best way to create class-like constructs including the idea of inheritance and overriding super methods which I would like to share with you.

I’ll demonstrate it with a simple…

Example

Let’s say we’d wanted to create a class “Vehicle” and a subclasses “Car”. The class “Vehicle” should provide a method “bringMeTo(Location location)” which “Car” should inherit and override..

In Java it’d probably look something like this (not tested):

public class Vehicle{

  int topSpeed;

  public Vehicle(int topSpeed){
    this.topSpeed = topSpeed;
  }

  public void bringMeTo(Location location){
    // ... do what ever you want to do here
  }
}

public class Car extends Vehicle{

  public String manufacturer;
  public String color;

  public Car(int topSpeed, String manufacturer, String color){
    super(topSpeed);
    this.manufacturer = manufacturer;
    this.color = color;
  }

  @Override
  public void bringMeTo(Location location){
    // Use an engine and 4 wheels to get to location  
  }
}

Now in JavaScript

Let’s see how we can transform into JavaScript, shall we? :-)

1. Preparation

First you’ll need a little helper function from CoffeeScript. It’s very handy since there is no extends keyboard in JavaScript, so add this to the very top of your JS code. Dont’ worry if you don’t understand the code, it’ll simply do all the funky JS OOP magic for you. All you need to know is that this basically does what Java’s extends keyword would do in a similar way.

var __hasProp = {}.hasOwnProperty;
var __extends = function(child, parent){
  for(var key in parent){
    if (__hasProp.call(parent, key)) child[key] = parent[key];
  }
  function ctor(){
    this.constructor = child;
  }
  ctor.prototype = parent.prototype;
  child.prototype = new ctor();
  child.__super__ = parent.prototype;
  return child;
};

2. Class definition, inheritance and method overriding

After adding our __extends script, we’ll write our two classes. You’ll be surprised how simple, clean and a little Java-like this’ll look:

// Class Vehicle
var Vehicle = (function() {

  // Constructor
  function Vehicle(topSpeed) {
    this.topSpeed = topSpeed;
  }

  Vehicle.prototype.bringMeTo = function(location) {
    // doSomething(location);
  };

  return Vehicle;

})();

// Class Car
var Car = (function(_super) {
  __extends(Car, _super); // Cool, eh? :-)

  // Constructor
  function Car(topSpeed, manufacturer, color) {

    // Setup public properties
    this.manufacturer = manufacturer;
    this.color = color;

    // Call super constructor
    return Car.__super__.constructor.apply(this, arguments);
  }

  // Override super method
  Car.prototype.bringMeTo = function(location) {

    // Call super method if you want
    Car.__super__.bringMeTo.call(this, location);
		
    // doSomethingElse();
  };

  return Car;

})(Vehicle);

There you go. Really simple.

Create instances by calling:

var v = new Vehicle(30);
var c = new Car(200, "Jaguar", "white");

Final notes

• In Car, you can access the super class anytime by just using Car.__super__.
• Override methods by adding a new function to Car.prototype
• Don’t forget to set all public properties you need within the constructor (as shown above).

That’s it. Happy coding.