Home/

...

/

Prototypal Inheritance in ES5

Prototypal Inheritance in ES5

introduction to prototypal inheritance using an example (rectangle "is a" shape)

Let’s start with an example, where we implement a classical inheritance scenario in JavaScript.

Node.js
function Shape( color ) {
    this.color = color;
}
Shape.prototype.getColor = function() {
    return this.color;
}
function Rectangle( color, width, height ) {
    Shape.call( this, color );
    this.width = width;
    this.height = height;
};
Rectangle.prototype = Object.create( Shape.prototype );
Rectangle.prototype.constructor = Rectangle;
Rectangle.prototype.getArea = function() {
    return this.width * this.height;
};
let rectangle = new Rectangle( 'red', 5, 8 );
console.log( rectangle.getArea() );
console.log( rectangle.getColor() );
console.log( rectangle.toString() );

Rectangle is a constructor function. Even though there were no classes in ES5, many people called constructor functions and their prototype ...