Microsoft AJAX Library - Inheritance using Prototypes

// 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 class 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: Add a base class instance to the derived class prototype property, as in SuperCar.prototype = new Car(). This creates Car as SuperCar's prototype. The prototype property has a constructor property that needs to point back to the function itself. Since now the SuperCar's prototype is a Car, its constructor property points back to the constructor of Car. To fix this, we need to set the constructor property of the prototype property of the derived class to the class itself, as in SuperCar.prototype.constructor =SuperCar.

Create the derived class constructor, and call the base class constructor from there, eventually passing any necessary parameters. In other words, when a new SuperCar is instantiated, its base class constructor should also execute, to ensure correct base class functionality.

Add any additional derived class members or functions to its prototype. This is so very complicated! In practice you'll find that the code doesn't look that scary, although the complete theory is a little more complex 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. The code can be checked online at http://www.cristiandarie.ro/seo-asp/JavaScriptPrototypeInheritance.html.

< 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.

Inheritance using Prototypes

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:

Tags