Comprehensive Guide to JavaScript Inheritance Types and Their Usage

Background

Inheritance is a fundamental concept in JavaScript that enables code reuse and elegant object‑oriented design. The article systematically summarizes the various inheritance patterns available in JavaScript, their strengths, weaknesses, and appropriate scenarios.

Prototype Inheritance

The prototype chain is the core technique for prototype inheritance, allowing one reference type to inherit properties and methods from another.

function SuperType() {
    this.property = true;
}
SuperType.prototype.getSuperValue = function() {
    return this.property;
};
function SubType() {
    this.subproperty = false;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
    return this.property;
};
var instance = new SubType();
console.log(instance.getSuperValue()); // true

The instance’s prototype points to the SuperType prototype, granting access to inherited members while allowing SubType to add its own.

Issues with Prototype Inheritance

Key pitfalls include shared reference‑type properties, inability to pass parameters to the super constructor, and accidental overwriting of prototype methods when defining new ones on SubType before inheritance.

Constructor Stealing (Borrowed Constructor)

To avoid shared reference problems, developers invoke the super constructor within the sub constructor using call or apply , copying instance properties directly.

function SuperType() {
    this.colors = ["red", "blue", "green"];
}
function SubType() {
    SuperType.call(this); // inherit properties
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); // red,blue,green,black
var instance2 = new SubType();
alert(instance2.colors); // red,blue,green

This pattern allows passing arguments to the super constructor, preventing unwanted sharing of reference values.

Combination Inheritance

Combines prototype chain (for methods) and constructor stealing (for instance properties) to leverage the advantages of both.

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
    alert(this.name);
};
function SubType(name, age) {
    SuperType.call(this, name); // inherit properties
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
    alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
instance1.sayName(); // Nicholas
instance1.sayAge(); // 29

While widely used, it calls the super constructor twice, which can be inefficient.

Parasitic Inheritance and Parasitic Combination Inheritance

Parasitic inheritance creates a new object based on an existing one and augments it. Parasitic combination inheritance refines this by using Object.create (or a compatible shim) to avoid the double constructor call.

function inheritPrototype(SubType, SuperType) {
    var prototype = Object.create(SuperType.prototype);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

This approach is considered the most optimal for reference‑type inheritance in JavaScript.

Class Inheritance (ES6)

ES6 introduces class syntax with extends and super to simplify inheritance.

class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y);
        this.color = color;
    }
    toString() {
        return this.color + ' ' + super.toString();
    }
}

Under the hood, classes still rely on prototype chains, but the syntax makes the inheritance relationship clearer and less error‑prone.