Object Oriented Programming With JavaScript

Author: Justin Bezanson

Overview

If you have ever looked at JavaScript as more than just a language for validation and “neat” effects then you know that, despite it’s seemingly simple design, it is a very powerful and complex language. All the frameworks and effects libraries that are being written, like jQuery and ExtJS, are a testament to this fact. Some of the frameworks give you tools for an object oriented (OO) approach to JavaScript. Being a C# programmer I pretty much only code in a OO manner and that just naturally translates into the JavaScript I write.

In this article we are going to take an introductory look at how OO JavaScript works. I am going to assume you are familiar with Object Oriented Programming (OOP) concepts such as encapsulation, inheritance, and polymorphism. If you aren’t familiar with these concepts or would like to refresh your memory you can take a look here. If this sounds like it might be complicated, don’t worry, it really isn’t and I’ll give you lots of example code to show you. Here we go.

Creating a class

The first thing we are going to look at is how to define a class. This will be our foundation as we advance through this lesson.

function Jedi() { }
var jedi = new Jedi();

This piece of code defines a class Jedi and creates a new instance of the class. The class definition looks exactly like a function definition right now but as we get further along, you will see that the code inside the class will look different than a normal function. As we continue through this article we’ll approach our code examples as though we are designing characters for a game to keep things fun.

Creating and calling class methods

Now that we have had our first look at creating a class lets add some methods and more useful things to our class.

function Jedi() {
    this.weapon = new LightSaber();
    this.attack = function() {
        this.weapon.swing();
    };
}

function LightSaber() { 
    this.swing = function() { alert('bzzznntt'); };
}

var jedi = new Jedi();
jedi.attack();

So what just happened? We defined 2 classes, Jedi and LightSaber. We created a method called swing in the LightSaber class and we create a property called weapon and a method called attack in the Jedi class. The attack method calls the swing method of our weapon (LightSaber). So far so good.

Inheritance

A very important part of OOP is inheritance. Inheritance lets you define a class then define a second class that inherits from the first. This means that the inherting class automatically gets the methods and properties of the base class.

function Jedi() { 
    this.weapon = new LightSaber();
    this.attack = function() {
        this.weapon.swing();
    };
}

JediMaster.prototype = new Jedi;
JediMaster.prototype.constructor = JediMaster;
function JediMaster(name) {
    this.name = name;
}

var jedi = new JediMaster('Yoda');

In the code above things are starting to get complicated. We have our original Jedi class but we have created a sub class called JediMaster that inherits from Jedi which means JediMaster has the weapon and attack members without having to define them in the JediMaster class. This makes it easy to reuse code and write less code in the long run.

The 2 lines just before we define the JediMaster class may seem confusing. If you are not familiar with JavaScripts prototype chain you should read up on it. Basically the first of the 2 lines is passing the Jedi prototype chain to the JediMaster prototype chain, essentially passing along its members to the sub class. The second of the lines is defining the JediMaster master constructor (because the previous line set the constructor to the Jedi constructor) that will be automatically executed when we initialize a JediMaster instance.

Overriding and calling the base class

I am going to wrap 3 topics into the example to demonstrate overriding a method in a sub class, calling the base constructor, and calling a base method. I am going to modify the Jedi class we have been working with a bit to suit this example and make it easier to understand the points being mentioned.

function Jedi(name) {
    this.strength = 100;
    this.name = name;
    this.attack = function() {
        alert('bbzzzznt');
    };
}

function JediMaster(name) {
    Jedi.call(this, arguments); //calling the base constructor

    //override the base method
    this.attack = function() {
        Jedi.prototype.attack.call(this);    //calling base class method
        this.strength--;                    
    };
}

In the above example we call the base constructor by using Jedi.call. The call method will invoke the Jedi constructor. Notice that what we are passing to the call method. We always need to pass the context (in this case ‘this’) and if the constructor accepts arguments then we pass the arguments array.

When we called the Jedi constructor we pass along the arguments that JediMaster had received. This sets the name property defined in the Jedi constructor.

As you can see we have defined a method attack in both the base and sub classes. The definition in the sub class overrides the base class definition.

Inside the overridden attack method we have also called the base class’ attack method. We only pass the context (this) because attack does not require an arguments so there is no need to pass them.

Pulling it all together

We have covered a lot of ground in this article and hope that you find it useful. I wanted to talk a bit about the reasons why OOP is beneficial but it is beyond the scope of this article but I encourage you to read a bit about the topic yourself. OOP can help you write better code and make your code easier to reuse and debug.

If you have any questions or anything you would like to add please do so in the comments. Cheers.

About me

My name is Justin Bezanson. I have been developing websites and applications since 2000. By day I am a senior .Net Developer and by night I post my thoughts, opinions, and experiences on my blog, Geek Daily.

I would like to thank Dev102 for allowing me write this article. I hope that you have enjoyed this article and that it helps you in your day to day coding.