I'm creating a game using EaselJS, and I'm wondering if somebody can explain how the inheritance pattern used in the demo files works. Specifically, I'm looking at the following file: https://github.com/CreateJS/EaselJS/blob/master/examples/assets/Ship.js
On line 7, the Ship's prototype is set to an instance of a createjs.container()
...
var p = Ship.prototype = new createjs.Container();
And then on line 28, a reference to the original constructor is stored:
p.Container_initialize = p.initialize; //unique to avoid overiding base class
Finally, the Ship
object is initialized on line 30
p.initialize = function () {
this.Container_initialize();
I'm trying to wrap my head around this pattern, because it is unlike anything I've come across in the past. Can somebody explain to me why you would want to use an instance of a class as a new class' prototype? Maybe just point me to a link with an explanation of this pattern? Any help here is greatly appreciated... I realize this question is a little bit vague.
I'm trying to wrap my head around this pattern, because it is unlike anything I've come across in the past.
Me neither. It doesn't do much magic, but he structure is definitely uncommon. See Correct javascript inheritance for the right pattern.
Can somebody explain to me why you would want to use an instance of a class as a new class' prototype?
You don't. You want to use an object that inherits from the parent class's prototype object. Unfortunately many people use new ParConstructor
for that - which works well if the constructor function is empty. If the constructor does create instance properties or has other side effects, it can cause trouble. Most people don't seem to notice or care about that, though.
explanation of this pattern?
function Ship() { this.initialize(); }
This just calls the initialize
method on the new instance (this
in a constructor). I don't see any benefits over placing the initialisation code directly in the constructor, but be that as it may.
var p = Ship.prototype = new createjs.Container();
As explained above, this is setting up the prototype chain to inherit methods from the Container
"class". It probably does unnecessary instance initialisation, so it should be replaced with an Object.create
call. And it creates a shortcut variable to the prototype.
// constructor: p.Container_initialize = p.initialize; //unique to avoid overiding base class
Here, an explicit reference to the parent's constructor is created. The initialize
property on p
is inherited from the Container
prototype, and now it is made an own property of the p
object with a descriptive name. That is needed because …
p.initialize = function () { this.Container_initialize(); … // property init stuff
… here an own initialize
method is declared on the prototype object, shadowing the inherited one. Still, the "super" initialisation code can now be invoked on the current instance using that dedicated property. Doing that is quite common, but not in this way with the method. Instead, call
is normally used to apply the parent constructor on the child instance.
Better (at least, more familiar):
function Ship() {
this.initialize();
}
var super_p = createjs.Container.prototype,
p = Ship.prototype = Object.create(super_p);
p.initialize = function() {
super_p.initialize.call(this);
… // property init stuff
Or, alternatively without initialize
:
function Ship() {
createjs.Container.call(this);
… // property init stuff
}
Ship.prototype = Object.create(createjs.Container.prototype);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With