javascript - EaselJS: Can somebody explain the inheritance pattern used in demos? - Stack Overflow

admin管理员组

文章数量:1026989

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: .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 e 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 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./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 e 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.

• javascript
• easeljs

Share Improve this question Follow edited Aug 2, 2013 at 3:48 Imad Alazani 6,72877 gold badges3838 silver badges5858 bronze badges asked Aug 2, 2013 at 3:43 Dan QuinnDan Quinn 11122 silver badges66 bronze badges 3

• It's a mon pattern, check tutorial here developer.mozilla/en-US/docs/Web/JavaScript/… – elclanrs Commented Aug 2, 2013 at 3:46
• Thanks, that pretty much answers my question. Specifically: "The specialized class is monly called the child, and the other class is monly called the parent. In JavaScript you do this by assigning an instance of the parent class to the child class, and then specializing it. In modern browsers you can also use Object.create to implement inheritance." – Dan Quinn Commented Aug 2, 2013 at 3:50
• Your best bet to understanding all of this is to take a look @ the Typescript definition file for EaselJS. – Nafiul Islam Commented Aug 22, 2013 at 16:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

I'm trying to wrap my head around this pattern, because it is unlike anything I've e across in the past.

Me neither. It doesn't do much magic, but he structure is definitely unmon. 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 mon, 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);

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: .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 e 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 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./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 e 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.

• javascript
• easeljs

Share Improve this question Follow edited Aug 2, 2013 at 3:48 Imad Alazani 6,72877 gold badges3838 silver badges5858 bronze badges asked Aug 2, 2013 at 3:43 Dan QuinnDan Quinn 11122 silver badges66 bronze badges 3

• It's a mon pattern, check tutorial here developer.mozilla/en-US/docs/Web/JavaScript/… – elclanrs Commented Aug 2, 2013 at 3:46
• Thanks, that pretty much answers my question. Specifically: "The specialized class is monly called the child, and the other class is monly called the parent. In JavaScript you do this by assigning an instance of the parent class to the child class, and then specializing it. In modern browsers you can also use Object.create to implement inheritance." – Dan Quinn Commented Aug 2, 2013 at 3:50
• Your best bet to understanding all of this is to take a look @ the Typescript definition file for EaselJS. – Nafiul Islam Commented Aug 22, 2013 at 16:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

I'm trying to wrap my head around this pattern, because it is unlike anything I've e across in the past.

Me neither. It doesn't do much magic, but he structure is definitely unmon. 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 mon, 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);

本文标签： javascriptEaselJS Can somebody explain the inheritance pattern used in demosStack Overflow