Prototype Chaining/ Inheritance in Js

Prototype chaining is the default way to implement inheritance, and is described in the ECMAScript standard. In order to implement our hierarchy, let's define three constructor functions.

function Shape(){
this.name = 'shape';
this.toString = function() {return this.name;};
}

function TwoDShape(){
this.name = '2D shape';
}

function Triangle(side, height) {
this.name = 'Triangle';
this.side = side;
this.height = height;
this.getArea = function(){return this.side * this.height / 2;};
}


Efficient way:

function Shape(){}
// augment prototype
Shape.prototype.name = 'shape';
Shape.prototype.toString = function() {return this.name;};

function TwoDShape(){}
// take care of inheritance
TwoDShape.prototype = Shape.prototype;
TwoDShape.prototype.constructor = TwoDShape;
// augment prototype
TwoDShape.prototype.name = '2D shape';

function Triangle(side, height) {
this.side = side;
this.height = height;
}

// take care of inheritance
Triangle.prototype = TwoDShape.prototype;
Triangle.prototype.constructor = Triangle;
// augment prototype
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){return this.side * this.height / 2;}


The test code will give the same result:
>>> var my = new Triangle(5, 10);
>>> my.getArea()
25



Isolating the Inheritance Part into a Function:

Let's move the code that takes care of all of the inheritance details into a reusable extend() function:

function extend(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}

Using this function (or our own custom version of it) will help you keep our code clean with regard to the repetitive inheritance-related tasks. This way you can inherit by simply using:

extend(TwoDShape, Shape);
and
extend(Triangle, TwoDShape);

This approach is the way the YUI (Yahoo! User Interface) library implements inheritance through its extend() method. For example, if you use YUI and you want your Triangle to inherit from Shape, you use:
YAHOO.lang.extend(Triangle, Shape)