patternjavascriptMinor
Javascript inheritance
Viewed 0 times
javascriptinheritancestackoverflow
Problem
I have a simple class inheritance in JS:
Which allow me to do so:
I need:
There's a cleaner/better/faster way to do that?
var Class = function(){};
Class.extend = function(){
var Extended = function(constructor){
function extend_obj(destination, source) {
for(var property in source){
if(typeof source[property] === "object" && source[property] !== null && destination[property]){
extend_obj(destination[property], source[property]);
}else{
destination[property] = source[property];
}
}
};
extend_obj(Extended.prototype, constructor);
this.constructor.init();
};
Extended.init = function(){};
for(var key in this.prototype){
Extended.prototype[key] = this.prototype[key];
}
Extended.prototype.constructor = Extended;
for (var key in this) {
Extended[key] = this[key];
};
return Extended;
};Which allow me to do so:
var SubClass = Class.extend();
SubClass.static_property = "a static property";
SubClass.static_method = function(){
return "a static method";
};
SubClass.prototype.a_new_property = "something new"; //instance method
var instance = new SubClass({
name: "custom name"
});
SubClass.init = function(){
//custom constructor
};
this.constructor.static_method_or_property //call instance methodI need:
- multiple inheritance
- the possibility to use module pattern
There's a cleaner/better/faster way to do that?
Solution
First of all, it seems like you're reinventing the wheel here. You didn't provide any context for what this is for so I'll try to cover all bases.
If you are using this as part of a bigger project, I'd recommend abandoning this approach and picking up something like Prototype.js or maybe Ember.js if you're ambitious. Alternatively, take a look at how CoffeeScript does it. CoffeeScript's underlying JS is pretty messy but it's significantly simpler than yours AND supports inheritance.
If this is just an educational exercise, I can point out a few problems with your code that I see.
In general, when trying to emulate Classes in JS, the prototype is where instance methods go or, possibly, default values for properties. However, an instance (created with
If you are using this as part of a bigger project, I'd recommend abandoning this approach and picking up something like Prototype.js or maybe Ember.js if you're ambitious. Alternatively, take a look at how CoffeeScript does it. CoffeeScript's underlying JS is pretty messy but it's significantly simpler than yours AND supports inheritance.
If this is just an educational exercise, I can point out a few problems with your code that I see.
extend_obj(Extended.prototype, constructor);
- This seems to be copying the instance's properties onto the class prototype. This doesn't make much sense as the instance's properties should be separate.
var instance = new SubClass({ name: "custom name" })
- This actually instantiates an
Extended(akaSubClass) object with no instance properties and modifies theExtendedprototype to have anameproperty of "custom name". This is very strange behavior.
In general, when trying to emulate Classes in JS, the prototype is where instance methods go or, possibly, default values for properties. However, an instance (created with
new) should have no effect on it.Context
StackExchange Code Review Q#14956, answer score: 4
Revisions (0)
No revisions yet.