Extend custom object in class-extend.js style

Question

I'm using class-extend.js to implement simple inheritance in my JS code:

var Man = Class.extend({
    init: function(name) {
        this.name = name;
    }
});

var Mr = Man.extend({
    init: function(name) {
        this._super("Mr. " + name);
    }
});

var mrBean = new Mr("Bean");

JSFiddle

How should I modify script to make inheritance from object that implemented without class-extend.js?

function AnotherMan(name) {
    this.name = name;
}

...
?

What is `class-extend.js`? Please add a link to the library docs. — Bergi, Oct 06 '13 at 20:01
Did you write the library yourself? If not, a source attribution would be nice. It looks much like http://ejohn.org/blog/simple-javascript-inheritance/ — Bergi, Oct 07 '13 at 14:07
Not sure where I took it from. Post "Simple JavaScript Inheritance" is source of all scripts like this, seems. I found the same script here: http://code.google.com/p/litepublisher/source/browse/trunk/js/plugins/class-extend.js — Marboni, Oct 07 '13 at 14:56
It's a rip off John Resig's Simple JavaScript Inheritance library: http://ejohn.org/blog/simple-javascript-inheritance/ — Aadit M Shah, Oct 07 '13 at 14:59

score 2 · Accepted Answer · edited May 23 '17 at 11:43

You can use .call() on the extend function. This expects a init prototype method to point to the constructor:

function AnotherMan(name) {
    this.name = name;
}
AnotherMan.prototype.init = AnotherMan; // = AnotherMan.prototype.constructor;

var Mr = Class.extend.call(AnotherMan, {
    init: function(name) {
        this._super("Mr. " + name);
    }
});
var mrBean = new Mr("Bean");

(updated demo)

Of course, it might be easier to use the native Correct javascript inheritance instead of that Class library…

function AnotherMan(name) {
    this.name = name;
}

function Mr(name) {
    AnotherMan.call(this, "Mr. " + name);
}
Mr.prototype = Object.create(AnotherMan.prototype, {
    constructor: {value: AnotherMan}
});

var mrBean = new Mr("Bean");

Thanks, Bergi, it's what I need. Will award bounty in 8 hours. — Marboni, Oct 07 '13 at 11:02

Yotam Omer · Answer 2 · 2013-10-06T20:39:30.780

The following will achieve what you're looking for: (working jsFiddle). It uses the prototype chain in order to achieve classical inheritance.

function AnotherMan(name) {
    this.name = name;
}

function Mr(name) {
    AnotherMan.call(this, name); // Call the superclass's constructor in the scope of this.
    this.name = "Mr. " + name; // Add an attribute to Author.
}

Mr.prototype = new AnotherMan(); // Set up the prototype chain.
Mr.prototype.constructor = Mr; // Set the constructor attribute to Mr.

var mrBean = new Mr("Bean");

You can generalize this into a function: (Another Working jsFiddle)

function extend(subClass, superClass) {
    var F = function() {};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;

    subClass.superclass = superClass.prototype;
    if(superClass.prototype.constructor == Object.prototype.constructor) {
        superClass.prototype.constructor = superClass;
    }
}

and use it like this:

function AnotherMan(name) {
    this.name = name;
}

function Mr(name) {
    Mr.superclass.constructor.call(this, name);
    this.name = "Mr. " + name;
}
extend(Mr, AnotherMan);

var mrBean = new Mr("Bean");

[Do *not* use `new` when setting up the prototype inheritance chain!](http://stackoverflow.com/questions/12592913/what-is-the-reason-to-use-the-new-keyword-here) — Bergi, Oct 06 '13 at 20:20
Thank you, Yotam, it's classic method, but it doesn't allow me to use regular syntax of class-extend.js (all my project already uses it). — Marboni, Oct 07 '13 at 11:04

Extend custom object in class-extend.js style

2 Answers2