ES3 & ES5 — Prototypal Inheritance

prototypal-inheritance.js

/**
 * Parent
 */
function Shape(x, y) {
    this.x = x;
    this.y = y;
}
Shape.prototype.constructor = Shape;
Shape.prototype.pos = function() {
    return [this.x, this.y];
};

/**
 * Child
 */
function Rect(x, y, w, h) {
    Shape.call(this, x, y);
    this.w = w;
    this.h = h;
}

////////////////////////////////////////////////////////////////////////////////
// Inheritance: solution 1
Rect.prototype = Object.create(Shape.prototype);
Rect.prototype.constructor = Rect;

// Inheritance: solution 2
var f = function() {};
f.prototype = Shape.prototype;
Rect.prototype = new f();
Rect.prototype.constructor = Rect;

// Inheritance: solution 3
var p = {};
p.__proto__ = Shape.prototype;
Rect.prototype = p;
Rect.prototype.constructor = Rect;
////////////////////////////////////////////////////////////////////////////////

// Add a method to the rect object.
Rect.prototype.area = function() {
    return this.w * this.h;
};

/**
 * Example usage
 */
var s  = new Shape(10, 20);
var r1 = new Rect(30, 30, 5, 10);
var r2 = new Rect(10, 20, 15, 15);

s.constructor;  //=> Shape
s.pos();        //=> [10, 20]

r1.constructor; //=> Rect
r1.pos();       //=> [30, 30]
r1.area();      //=> 50

r2.constructor; //=> Rect
r2.pos();       //=> [10, 20]
r2.area();      //=> 225