hyperandroid / CAAT

Canvas Advanced Animation Toolkit
hyperandroid.github.com/CAAT
MIT License
727 stars 117 forks source link

Object.create() and parenting #52

Closed douglasquade closed 12 years ago

douglasquade commented 12 years ago

Hi,

I have created two objects with one property:

            var testing = {};
            Object.defineProperties(testing, {
                container: {
                    value: new CAAT.Actor(),
                    writable: true,
                    enumerable: true
                }
            });

            var obj1 = Object.create(testing);
            obj1.container.setId("obj1");

            var obj2 = Object.create(testing);
            obj2.container.setId("obj2");

Then, I try to add the "container" property to an ActorContainer using the common "addChild" method in this way:

slotElement.addChild( obj1.container ); slotElement.addChild( obj2.container );

But I got this error:

Uncaught adding to a container an element with parent.

It only works when I create Actor container outside an object (Object.defineProperties(...)).

Any idea?

Thanks a lot.

douglasquade commented 12 years ago

Seems that it does not work when using Object.create() new javascript implementation.

It works when creating objects in this way:

function myobject() { this.container = new CAAT.Actor(); };

Any ideas?

karlwestin commented 12 years ago

This has nothing to do with CAAT, but with javascripts prototypal inheritance.

I'll try an attempt to explain this: First look at this jsbin (your example-code)

Why do obj1.container and obj2.container all of a sudden have the same id?

When objects are created with Object.create, the original object is added as the prototype to the new object. Since all objects and array are passed by reference in javascript, that means that the actor in original object (testing) and the actor of the copy (for example obj1) are actually pointing to the same instance of CAAT.Actor

When you create an actor using the new keyword, a new object ("this") is created, and the properties that are added in the CAAT.Actor constructor are added. Finally the new "this" object is returned.

What does this mean in practical use?

I think i will confuse you even more now, but this works perfectly fine – Why? Because when i call setId on for example obj1, what happens behind the scenes is this.id = "obj1" //"this" refers to obj1 in your example, what happened was this.id = "obj1" //"this" refers to obj1.prototype, which is shared by all three

Anyway i hope this cleared things out a little, I also recommend the Inheritance chapter in "Pro Javascript Design Patterns" by Dustin Diaz and Ross Harmes if you'd like to know more about this!

douglasquade commented 12 years ago

Thanks for your help.

Maybe it's not a good idea to use this pattern.

I will take a look at that book

hyperandroid commented 12 years ago

Non CAAT related questions must be asked in the forums at http://groups.google.com/group/caatjs?hl=es Thanks for answering Karl. Thanks.