extends-js

Javascript Inheritance -- the right way. Better than what you've seen elsewhere.

To use in the browser, just add extends.js to your project:

    <script src="extends.js"></script>

To use in your node projects, install via npm:

    npm install extends-js

And simply require it anywhere in your program before using the extends syntax:

    var extend = require('extends-js');

Examples

    function Polygon (w, h) {
        this.width = w;
        this.height = h;
    }
    Polygon.prototype.area = function () { 
        return this.width * this.height; 
    }
    
    // give Squares access to Polygon shared (prototypal) properties & this.super()
    Square.extends(Polygon);

    // this.super() applies Polygon's constructor to new Squares, setting height and width as own properties
    function Square (width) {
        this.super(width, width);
    }

A new Square(5) looks like this:

    {
        width: 5,
        height: 5
    }

With access to the entire chain of extended shared properties:

    new Square(5).area(); // 25

instanceof works normally as these Objects are prototypally related in the proper way:

    (new Square(5)) instanceof Square // true
    (new Square(5)) instanceof Polygon // true
    (new Square(5)) instanceof Object // true

Since extend-js is inheritance "the proper Javascript way," you can extend native classes normally:

    List.extends(Array);
    
    function List () {
            this.super.apply(this, arguments); // pass all arguments through to super constructor
    }
    
    var myList = new List('why has JS inheritance not always been implemented this way?');
    myList.push('It has now. That is all that matters.');
    myList.forEach(function (e, i) { console.log(i, e); });

Prototypally inherited properties can be overridden as own properties or via the extended prototype.

    Triangle.extends(Polygon);
    
    function Triangle(w, h) {
        this.super(w, h);
        
        this.area = function () { return 0; }; // override via own property
    }
    
    // override via Triangle's prototype, will be called only if not overridden via own property
    Triangle.prototype.area = function () {
        return this.width * this.height / 2; 
    }

What's different about extends-js?

Other Javascript Inheritance libraries online do several things wrong:

Mistake #1: Abandoning normal Javascript constructor syntax - I don't want my code cluttered with this:

    // BAD!! 
    var Person = ArbitraryInheritanceLibrary.extend({
            /* arbitrary object definition conforming to the library syntax */
    })

There is no reason to throw out normal Javascript object syntax just to achieve inheritance:

    // GOOD! extends-js doesn't get in the way of normal Object syntax!
    Person.extends(Animal);

    // plain old constructor!
    function Person (name) {
            this.name = name; 
    }

extends-js leverages normal Object constructors in Javascript and doesn't require you to define your constructors in a special way.

Mistake #2: Abandoning prototype chains - I don't want my object instances cluttered with own properties that are endlessly copied down through the inheritance chain! I want instanceof to be useful! extends-js respects both Own Properties and Prototypal Properties and does not confuse them. extend-js relates the constructors prototypally in the proper way, such that they really are instances of the super class!

Mistake #3: Poor or missing super constructor implementation - I don't want to re-write my constructors over and over! I want to be able to super() to the constructor of the class being extended, WITHOUT having to define my constructors in a special way! extends-js utilizes the actual constructors of your normal Javascript objects and gives extended Objects access to those constructors via this.super()!

Compatibility

To support IE8 or compatibility with other plugins, the 'extends' and 'super' functions can be prefixed with an arbitrary value (defaults to '$') by calling extend.noConflict(), allowing them to be called via '$extends' and '$super'

    // $extends() and $super(), the default noConflict settings
    extend.noConflict();
    extend.noConflict('$');

    // __extends() and __super()
    extend.noConflict('__');