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 b

Solution 1:

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:

functioninherit(superClass, props, proto) {
    return {
        props: $.extend(Object.create(superClass.props), props),
        proto: $.extend(Object.create(superClass.proto), proto)
    };
}
functioncreate(template) {
    returnObject.create(template.proto, template.props);
}

Which you could use like

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

varFerrari = 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.

Solution 2:

It's creative code, but it feels obfuscated and introduces too much incidental complexity, such as the need for jQuery (which isn't necessarily a bad thing if your project already depends on jQuery). JavaScript specifically is designed based on prototypal inheritance... why not take advantage of it?

Also, regarding your feeling about adding prototype properties seeming too repetitive:

varCat = function() { ... };

// then when defining the prototype...Cat.prototype.purr = function() { ... };
Cat.prototype.meow = function() { ... };

You'll find that people usually recommend the above approach of defining prototype properties for several reasons (versus the approach I'm about to show below) because, for one, regarding garbage collection and elimination of circular references. However, if you're worried about "repeating yourself" too much, just set the prototype as a plain object:

Cat.prototype = {
  purr: purr,
  meow: meow
};

functionpurr() {
  // whatever
}

functionmeow() {
  // whatever
}

The second way of doing it, as shown above, takes advantage of JavaScript's function hoisting and introduces a concept similar to the revealing module pattern.