In this column we embark on a short series about Object-Oriented Programming (00P) with JavaScript. In Part I of this series, we will cover the fundamentals. We will show you how JavaScript fulfills one of the most important requirements from an object-oriented language: inheritance. The examples in this part will also demonstrate the other requirement: encapsulation. We‘ll leave the third requirement, polymorphism, to other parts of this series.

Although JavaScript is a scripting language, its support of object-oriented programming is quite impressive. Even though there are no classes and instances, there are objects, prototypes, and implicit inheritance. We will explain in detail how to emulate inheritance and how the superclass-subclass relationship is formed. Prototyping is the key to understanding the inheritance concept. We‘ll teach you how to establish prototyping, how to detect whether one object is a prototype of another object, and how JavaScript‘s model is different from Java‘s object-oriented programming. We‘ll also show you how to check several attributes of the object‘s properties.

The examples in this column are for JavaScript 1.1 and above, for both Internet Explorer and Netscape, unless noted otherwise.

In this column, you will learn:

Characterizing Object-Oriented Languages

Object-oriented design is based on three major principles: encapsulation, inheritance, and polymorphism. A programming language is said to support OO (Object-Oriented) design if it supports these three concepts in its syntax. Such a language should provide you with tools to easily define and use these paradigms. Encapsulation refers to the concept of making an object a "black box." When you use an object, you should not know its internal workings. You don‘t need to understand how an object works. An object should expose only the absolute necessary information needed to interface with it. It should give you a friendly interface to those limited set of methods and properties that the designer thought might be useful for other users. Encapsulation also means that an object includes everything it needs: both the data and the operations on it (methods). The encapsulation concept is very powerful because it allows an efficient division of labor in large software projects. Each team member can work on his or her object without interfacing too much with other members of the group. Overhead in development projects grows up exponentially with the number of interfaces between the group members. Encapsulation is a major contributor to OO design being a solution to the famous "Software Crisis."

Software reuse is another characteristic of OO design. One of the major ways to achieve software reuse is by inheritance. A class is a function that defines an object. A superclass is a class from which new classes, subclasses, are created. A subclass inherits all its methods and properties from its superclass. Practically, all subclasses are generated automatically, and hence the enormous savings. You don‘t have to define these subclasses one by one. Of course, you can override inherited methods and properties. In fact, there is no point to create a subclass which is a 100% duplication of its superclass, unless you override at least one property or one method.

Polymorphism is probably the most complicated component of the three must-haves. The essence of this concept is that every class should handle different data types. You shouldn‘t create different classes to handle different data types. The classic example is the drawing class. You should not write different classes to draw circles, rectangles, and ovals. It should be one class that is smart enough to call the proper method to operate on the appropriate shape.

Inheritance through Functions

Although JavaScript does not support an explicit inheritance operator, you can implement inheritance in other ways. There are two different ways to establish a hierarchy of classes in JavaScript. The first method to create an object as a subclass of another object, is to call the superclass constructor function inside the subclass object definition. Let‘s look at the following example:

function superClass() {

  this.bye = superBye;
  this.hello = superHello;
}

function subClass() {
  this.inheritFrom = superClass;
  this.inheritFrom();
  this.bye = subBye;
}

function superHello() {
  return "Hello from superClass";
}
  
function superBye() {
  return "Bye from superClass";
}

function subBye() {
  return "Bye from subClass";
}

Click here to invoke the following assignment and function that activate these objects:

function printSub() {
  var newClass = new subClass();
  alert(newClass.bye());
  alert(newClass.hello());
}

Convince yourself that it is working correctly. The methods bye() and hello() are first defined in superClass(). The method bye() is being overridden in subClass(). The first two lines of subClass() does the original inheritance between the two classes. You first define the inheritFrom method, and then you call it:

this.inheritFrom = superClass;
this.inheritFrom();

Let‘s take another example. Here is the definition of superclass() and subclass() (different from the above superClass() and subClass()):

function superclass() {
  this.info = alert("Defining the Superclass");
}

function subclass() {
  this.inheritFrom = superclass;
  this.inheritFrom();
  this.info = alert("Overriding the Superclass");
}

To activate the generation of subclass(), click here. This button calls the following function:

function createSubclass() {
  var newClass = new subclass();
}

Notice the alert boxes. They show that the info method is first defined in superclass() and then is being overridden in subclass().

Ineritance through Prototyping

The second and more robust method to establish a class hierarchy is by creating an object of the superclass and then assign it as a prototype of the subclass object. Suppose our superclass is superClass and our subclass is subClass. The prototype assignment would look like this:

subClass.prototype = new superClass;

Let‘s take the example from Page 3 and use the prototype assignment instead of these assignments inside the subClass() defintion:

 this.inheritFrom = superClass;
  this.inheritFrom();

Here is the new code:

function superClass() {

  this.bye = superBye;
  this.hello = superHello;
}

function subClass() {
  this.bye = subBye;
}
subClass.prototype = new superClass;

function superHello() {
  return "Hello from superClass";
}
  
function superBye() {
  return "Bye from superClass";
}

function subBye() {
  return "Bye from subClass";
}

Click here to invoke the following script that creates an instance of subClass():

function printSub() {
  var newClass = new subClass();
  alert(newClass.bye());
  alert(newClass.hello());
}

Convince yourself that you get the same results as in Page 3: bye() from subClass() and hello() from superClass().