JavaScript OOP Tutorial: Inheritance through Prototyping

This is a JavaScript DOM exercise from Chapter 3 of Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.

Once again, prototyping can help us implement an OOP feature in a more elegant way than when using closures. Prototype-based inheritance makes use of the behavior of JavaScript prototypes. When accessing a member of a function, that member will be looked in the function itself. If itís not found there, the member is looked in the functionís prototype. If itís still not found, the member is looked in the prototypeís prototype, and so on until the prototype of the implicit Object object.

In closure-based inheritance, the derived class inherits the base class methods and properties by "loading" them into itself. Hereís the code again for your reference:

  // class SuperCar
  function SuperCar(name)
  {
    // implement closure inheritance
    this.inheritsFrom = Car;
    this.inheritsFrom(name);
    
    // SuperCar knows how to fly
    this.Fly = Fly;
  }

When implementing inheritance through prototyping, we can "load" the base class properties and methods by adding them to the derived class prototype. That way, an object of the derived will have access to the class methods and properties, but also to the base class methods and properties since they exist in the derived class prototype. To successfully implement prototype-based inheritance with JavaScript, you need to:

Whoa, this is a lot of theory! In practice it doesnít look that scary, although the complete theory is a little more advanced than this. A nice article describing a few additional theoretical aspects can be found at http://mckoss.com/jscript/object.htm.

The new implementation of Car and SuperCar, this time using prototypes, is the following, with the inheritance mechanism highlighted. The Drive() and Fly() methods have also been created through prototyping, although the old version using closures would work as well.

<script type="text/javascript">
  // class Car
  function Car(name)
  {
    // create the Name property
    this.Name = name;
  }
  
  // Car.Drive() method
  Car.prototype.Drive = function()
  {
    document.write("My name is " + this.Name + 
                   " and I'm driving. <br />");
  }

  // SuperCar inherits from Car
  SuperCar.prototype = new Car();
  SuperCar.prototype.constructor = SuperCar;  
  
  // class SuperCar
  function SuperCar(name)
  {
    // call base class constructor
    Car.call(this, name); 
  }
  
  // SuperCar.Fly() method
  SuperCar.prototype.Fly = function()
  {
    document.write("My name is " + this.Name + 
                   " and I'm flying! <br />");
  }
  
  // create a new Car and then Drive
  var myCar = new Car("Car");
  myCar.Drive();

  // create SuperCar object
  var mySuperCar = new SuperCar("SuperCar");

  // SuperCar knows how to drive
  mySuperCar.Drive();

  // SuperCar knows how to fly
  mySuperCar.Fly();     
</script>

Here, instead of creating a Car instance in SuperCar's constructor, we declare Car as SuperCar's prototype.

Implement the exercise step by step and find detailed explanations in our book, Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.