Object Oriented Programming in JavaScript (Extending / Inherit classes)

As you probably know JavaScript is not exactly OOP based language. Of course there are some ways to handle with this and you can still create classes and inherit them. It is much much better to use classes. Your application will be well structured and split to modules.

The first thing that we have to do is to create a class. We will start with the constructor:

var BaseClass = function () {
    this.name = "I'm BaseClass";
  };

Nothing special, just declaring of a function. The body of the class is constructed by using .prototype property of our variable.

var BaseClass = function () {
    this.name = "I'm BaseClass";
  };
  BaseClass.prototype = {
    getName: function () {
      return this.name;
    },
    setName: function (str) {
      this.name = str;
    }
  };

So far we have:a) a class that is called BaseClassb) a public property called "name"c) two public methods called "getName" and "setName" that will get/set the "name" propertyAnd the usage of the class:

var base = new BaseClass();
alert(base.getName());

The interesting part is to make possible the inheritance of the class. We will create a small function that will do that for us every time when we need to extend the methods and the properties of some class.

function extend(ChildClass, ParentClass) {
    ChildClass.prototype = new ParentClass();
    ChildClass.prototype.constructor = ChildClass;
  }

It's just two lines, but it does its job. The first one copies all the properties and methods including the constructor. Which means that if we create an object by "ChildClass" we will use the constructor of "ParentClass". In the second line we are restoring the constructor. Let's see some examples of inheritance:

/* extending */
    function extend(ChildClass, ParentClass) {
      ChildClass.prototype = new ParentClass();
      ChildClass.prototype.constructor = ChildClass;
    } /* base class */
    var BaseClass = function () {
      this.name = "I'm BaseClass";
    };
    BaseClass.prototype = {
      getName: function () {
        return this.name;
      },
      setName: function (str) {
        this.name = str;
      }
    }; /* sub class 1 */
    var SubClass1 = function () {
      this.setName("I'm SubClass1");
    } /* sub class 2 */
    var SubClass2 = function () {
      this.setName("I'm SubClass2");
    }
    extend(SubClass1, BaseClass);
    extend(SubClass2, BaseClass);
    var base = new BaseClass();
    var sub1 = new SubClass1();
    var sub2 = new SubClass2();
    alert(base.getName());
    alert(sub1.getName());
    alert(sub2.getName());

The result of this script is "I'm base class", "I'm SubClass1" and at the end "I'm SubClass2". As you can see we are creating objects of "SubClass1" and "SubClass2" that extend the BaseClass. That's why they have public methods "setName" and "getName".