Proper Javascript Inheritance

Question

I am wondering if constructor can be inherited in javascript. In the following example, I would like Moveable to assign the x and y arguments to the values ​​of this.x and this.y , as I defined in Sprite . Besides, what would be the best way (but still short and readable) to define a prototype without creating an instation of ancestor? It would be better to appoint him in the class itself, and not in the external field, as I am now:

 function Sprite(x, y) { this.x = x ? x : 0; this.y = y ? y : 0; this.getPos = function() { return { x: this.x, y: this.y }; }; } function Moveable(x, y) { } Moveable.prototype = new Sprite(); 

Answer 1

The standard way to call the constructor of a superclass is to use Function.call :

 function Moveable(x, y) { Sprite.call(this, x, y); } 

As for the prototype, you can do something like this to bind the prototype without creating an instance of the superclass:

 function makePrototype(superclass) { function f() { } f.prototype = superclass.prototype; return new f(); } Moveable.prototype = makePrototype(Sprite); 

To create an object that has the same prototype as Sprite , a dummy type constructor is used, and since this applies to all JavaScript, Moveable instanceof Sprite are considered instanceof Sprite .

This is not “short and clear,” as you requested, but the only choice is to completely skip the prototypes and assign the elements directly inside the constructor.

Edit: As @Raynos points out, you also want to set the constructor property (which runs by default JavaScript but gets lost as soon as you reset Moveable.prototype )

 Moveable.prototype.constructor = Moveable; 

Answer 2

You invoke the parent constructor as follows:

 function Moveable(x, y) { Sprite.call(this, x, y); } 

I am afraid that there is no short way to adjust inheritance if you want to use pseudo-classical inheritance and cannot do this inside the scope of the constructor function.

You can get around creating a base class if you create a temporary empty object. It looks complicated, but it is usually used as a helper function (for example, in the Google Closure Library goog.inherits method , from where I more or less copied this):

 var inherits = function(childConstructor, parentConstructor) { function tempConstructor() {}; tempConstructor.prototype = parentConstructor.prototype; childConstructor.prototype = new tempConstructor(); childConstructor.prototype.constructor = childConstructor; }; inherits(Moveable, Sprite); // instantiating Moveable will call the parent constructor var m = new Moveable(1,1); 

Answer 3

Think of a function as two parts: a constructor function and a prototype object. Take two of these function classes and mix them together. Mixing objects is simple enough, the trick is mixing designers.

 var Sprite = function(x, y, w, h){ console.log("Sprite constr:", x, y, w, h); } var Moveable = function(x, y, w, h){ console.log("Moveable constr:", x, y, w, h); } var extend = function(class1, class2){ // here we make a new function that calls the two constructors. // This is the "function mix" var f = function(){ class1.prototype.constructor.apply(this, arguments); class2.prototype.constructor.apply(this, arguments); } // now mix the prototypes f.prototype = library.objectmix(class1.prototype, class2.prototype); return f; } var MoveableSprite = extend(Sprite, Moveable);