Hi,

No worries, glad that helped.

Essentially, JavaScript doesn't have classes, but it is (very) object-
oriented and has inheritance and constructors.  Class.create creates
constructors.  All of the properties on the object you pass into
Class.create are applied to the prototype associated with the
constructor that it returns.  Every instance created with that
constructor has a reference to the prototype; it's a common object
they all share.  If you access a property on the instance, if it
doesn't have its *own* copy of the property, it goes and uses the
prototype's copy instead -- which is why each instance doesn't get its
own copy of all of the functions (which would be wasteful), and in
this case was why they were all sharing the same 'options' Hash.

In contrast, if you explicitly set a property on the instance (such as
"this.el = ..."), then that instance has its *own* copy of the
property.

You may be able to guess that prototype objects can, themselves, have
prototypes, which can have prototypes, etc., in a chain all the way
back to the root Object prototype.

All of this is called "prototypical inheritance" and it's a bit
different to the class-based inheritance you may be used to.  But
powerful nonetheless. :-)

Happy coding,

-- T.J.

On Mar 10, 2:12 pm, mathieu.we...@gmail.com wrote:
> Thanx a lot,
>
> now it seems clear to me.
> I must confess that javascript and prototype are sometimes "magical" for me
> and it's not obvious to understand the underlying process of Class.Create
> ...
>
> Well thanx again.
>
> On Tue, Mar 10, 2009 at 2:33 PM, T.J. Crowder <t...@crowdersoftware.com>wrote:
>
>
>
>
>
> > Hi,
>
> > Your options object is common to all instances of Foo, because you
> > declared it that way:
>
> > > [snip]
> > >         Foo = Class.create({
>
> > >                 options: $H({'onSelect' : false}),
>
> > >                 initialize: function(element, options) {
> > > [snip]
>
> > 'options', just like 'initialize', is shared by all of your
> > instances.  (You defined them exactly the same way, after all.)  If
> > you want instance-specific properties, set them up in your contructor
> > as you do with the 'el' property.
>
> > HTH,
> > --
> > T.J. Crowder
> > tj / crowder software / com
> > Independent Software Engineer, consulting services available
>
> > On Mar 10, 11:34 am, Mathieu <mathieu.we...@gmail.com> wrote:
> > > Hello,
>
> > > I just had a bug the morning, I still dont understand why it did not
> > > work
>
> > > I have two classes,
> > > I call Foo.select on element click.
> > > Foo.select call Bar.action
>
> > > When creating multiple Bar, the Bar.action call is always the last
> > > instanciated function...
>
> > > Ok that's not very clear, but imagin your creating three Bar instance:
>
> > >         Foo = Class.create({
>
> > >                 options: $H({'onSelect' : false}),
>
> > >                 initialize: function(element, options) {
> > >                         this.el = $(element);
> > >                         this.el.observe('click', this.select.bind(this));
> > >                         this.options.update(options);
> > >                 },
>
> > >                 select: function() {
> > >                         if(this.options.get('onSelect')) {
> > this.options.get('onSelect')();}
> > >                 }
> > >         });
>
> > >         Bar = Class.create({
>
> > >                 initialize: function(element) {
> > >                         this.el = $(element);
> > >                         new Foo(this.el, {'onSelect':
> > this.action.bind(this)});
> > >                 },
>
> > >                 action: function() {
> > >                         alert(this.el.inspect());
> > >                 }
> > >         });
>
> > > => It does not work, the action function will always alert the last
> > > Bar instance element :(
>
> > > Oddly, this works:
>
> > >         Foo = Class.create({
>
> > >                 initialize: function(element) {
> > >                         this.el = $(element);
> > >                         this.el.observe('click', this.select.bind(this));
> > >                         this.options.update(options);
> > >                 },
>
> > >                 select: function() {
> > >                         if(this.onSelect) { this.onSelect();}
> > >                 }
> > >         });
>
> > >         Bar = Class.create({
>
> > >                 initialize: function(element) {
> > >                         this.el = $(element);
> > >                         var foo = new Foo(this.el);
> > >                         foo.onSelect = this.action.bind(this);
> > >                 },
>
> > >                 action: function() {
> > >                         alert(this.el.inspect());
> > >                 }
> > >         });
>
> > > That's not a big deal because now I found a way to make my code work.
> > > But I'd like to understand why the first bit of code did not work.
> > > Is it related to the use of the Hash ?
>
> > > It is as if there where a misunderstanding between Bar Instance and
> > > Bar Class
>
> > > Thanx for your help
>
> --
> Mathieu WEBER
> mathieu.we...@gmail.com
> 06 29 65 46 39
> 65 rue faubourg Saint Denis - 75 010 Paris
>
> http://www.manolosanctis.com        // 
> sitehttp://manolosanctis.canalblog.com   // 
> bloghttp://www.linkedin.com/in/mathieuweber   // cv
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to