Search code examples
javascriptoopprototypal-inheritance

Critique my prototypal inheritance pattern


I've decided to use Object.create, as it seems much more intuitive than using 'new' and having to write Car.prototype.func1 = function(){} for each function, for example; seems a bit too DRY.

I had an epiphany of using $.extend to augment properties and functions, making it easier to grab code from any object I wanted to use. Once the object's extended, I then use Object.create() to set the prototype, so the functions are common to all instances and pass in the properties as the second parameter.

Is the following pattern okay? jsfiddle

// props use Object.defineProperties() format; can configure each prop as writable, enumerable, etc

var Vehicle = {
    props : { 'colour' : {value:'black'}, 'wheels' : {value:4} },
    proto : { 'drive' : function(){console.log('drive ' + this.colour + ' ' +     this.wheels);} }
};

var Ferrari = {
    props : { 'colour' : {value:'red'}, 'seats' : {value:2} },
    proto : { 'fast' : function(){console.log('ferrari power ' + this.colour + ' ' + this.wheels + ' ' + this.seats);} }
}; 

function init(){

    // copy Vehicle object, so it remains untouched
    var vehicle = $.extend(true,{}, Vehicle); 

    // augment vehicle super-class with sub-class
    $.extend(vehicle.props, Ferrari.props);
    $.extend(vehicle.proto, Ferrari.proto);

    // prototypal inheritance
    var ferrari = Object.create(vehicle.proto, vehicle.props);
    ferrari.drive();
    ferrari.fast();
}

init();

Edit : I've abandoned this idea, too messy; I'm using a prototypal pattern, shown at the end of this article.


Solution

  • You should not use $.extend for inheritance, and you should declare the inheritance right away at the definition of your class, not somewhen later in an init function.
    Also your "augment vehicle super-class with sub-class" seems really backwards. This is emphasized by the need to "copy Vehicle object, so it remains untouched" and that you are creating your ferrari instance from vehicle, not from Ferrari.

    I'd recommend to use two helper functions:

    function inherit(superClass, props, proto) {
        return {
            props: $.extend(Object.create(superClass.props), props),
            proto: $.extend(Object.create(superClass.proto), proto)
        };
    }
    function create(template) {
        return Object.create(template.proto, template.props);
    }
    

    Which you could use like

    var Vehicle = {
        props : { 'colour' : {value:'black'}, 'wheels' : {value:4} },
        proto : { 'drive' : function(){console.log('drive ' + this.colour + ' ' +     this.wheels);} }
    };
    
    var Ferrari = inherit(Vehicle, {
        'colour' : {value:'red'},
        'seats' : {value:2}
    }, {
        'fast' : function(){console.log('ferrari power ' + this.colour + ' ' + this.wheels + ' ' + this.seats);}
    });
    
    var ferrari = create(Ferrari);
    ferrari.drive();
    ferrari.fast();
    

    Apart from these problems, your pattern is quite fine. Using pure prototype inheritance is an established pattern. You may amend it by adding an initialisation function to your template objects (classes), named e.g. .constructor, and you're back at the power of the typical class pattern.