2 level inheritance in javascript

Question

I am trying to achieve 2 levels of inheritance in javascript without any framework.

**Class --> Model --> ListModel**

ideally code should look like this

var Class = function(){}
var Model = new Class;
var ListModel = new Model;

after implementation I could come with following solution which smells badly.

var Class = function(){

    klass = function(){};

    klass.extend = function(){ console.log("extend")}
    klass.prototype.include = function(){ console.log("include") };

    return klass
}


var Model = function(parent){

    var model = function(){

    }   

    if(parent){

        for(var i in parent){
            model[i] = parent[i];
        }   
        for(var i in parent.prototype){
            model.prototype[i] = parent.prototype[i];
        }       
    }

    model.record = [1,2];
    model.prototype.generateId = function(){ console.log("genrate ID")};

    return model 
}

var ListModel = function(parent){

    if(parent){

        for(var i in parent){
            ListModel[i] = parent[i];
        }   
        for(var i in parent.prototype){
            ListModel.prototype[i] = parent.prototype[i];
        }       
    }


}

var class = new Class()
var model = new Model(class)
var l = new ListModel(model)

can someone help me to do it in a better way.

you can use setPrototypeOf (and polyfills) instead of loops, or simply set Model.prototype=class, but you're mixing metaphors by using "new instance" instead of "new Constructor"... — dandavis
– dandavis, Commented Jun 20, 2014 at 5:51

Aadit M Shah · Accepted Answer · 2014-06-20 06:05:54Z

I usually use a function called defclass to define "classes" (actually constructors) which don't inherit from anything else:

function defclass(prototype) {
    var constructor = prototype.constructor;
    constructor.prototype = prototype;
    return constructor;
}

Using defclass you can create classes as follows:

var Model = defclass({
    constructor: function (...) {
        // init code
    },
    someMethod: function (...) {
        // do something
    }
});

When it comes to inheritance however you need something more. So I wrote my own extend function:

function extend(constructor, keys) {
    var supertype = keys.super = constructor.prototype;
    var prototype = Object.create(supertype);
    for (var key in keys) prototype[key] = keys[key];
    return defclass(prototype);
}

Using extend you can now inherit from other classes as follows:

var ListModel = extend(Model, {
    constructor: function (...) {
        // init code
    },
    someMethod: function (...) {
        // override default implementation
        // use `this.super` to gain access to overridden methods
    },
    someOtherMethod: function (..) {
        // do something else
    }
});

Simple isn't it?

Collectives™ on Stack Overflow

2 level inheritance in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related