Comments on: MooTools Class Creation Tips

By: Tim Wickstrom

Tim Wickstrom — Fri, 09 Sep 2011 16:55:02 +0000

Have written dozens of classes over the last few years and today I was spinning my wheels while creating a new element and trying to access ‘this’ as a reference to the element as well as bind(this) to access class methods and options….

Thanks David for posting this have not used the self method in awhile and it was exactly what I was looking for!!!
var self = this; // .bind(this) on event functions obviously will not work!
new Element(‘li’, {
html: this.markQuerySelection(r.title),
rel: this.liFocus+i,
styles: Object.merge({
‘background-color’: (i%2?this.options.listEvenColor:this.options.listOddColor)
}, this.options.listItemStyles),
events: {
mouseover:function(e){
this.tween(‘background-color’, ‘#fffcb0′)
},
mouseout: function(e) {
this.tween(‘background-color’, (i%2?self.options.listEvenColor:self.options.listOddColor))
}
}
})

By: chris

chris — Sat, 12 Feb 2011 06:50:23 +0000

thanks been punching myself dealing with the pitfalls of bind and found this how to, thanks, self rocks@!

By: MarkD

MarkD — Sat, 05 Sep 2009 21:18:06 +0000

Isn’t this closure solution (‘.self’ ) considered bad practice because of possible memory leaks escpecially in our good old friend ie6? Closures can be very powerful but they are quit tricky to handle.
For example you have to clean up the references yourself onBeforeUnload to prevent leaks?
Moo takes care of that when you use their method.

By: Cohen

Cohen — Sat, 25 Jul 2009 17:28:20 +0000

So what’s the best choice of doing things?
– using bind (or the Binds mutator)
or …
– self (with the additional bonus you have access to “this” too)?

The fundamental difference I think is that the self technique uses closures and the bind uses method encapsulation… so in theory the self is more performent…

@kow: I am not sure I understand what you mean? Maybe you can give an example to clarify? If I understand correctly binding to this wouldn’t be usefull outside of the “first level” either?

By: kow

kow — Fri, 10 Apr 2009 16:18:38 +0000

While this is very useful, keep in mind, that you only should use this where you need it, so on the first level, ‘outside’ an inner function using self in unnecessary.

By: Chris

Chris — Mon, 16 Mar 2009 07:57:27 +0000

var that = this;

By: Jeremy Parrish

Jeremy Parrish — Tue, 10 Mar 2009 15:12:31 +0000

Good tips. I like the “self” idea, but it seems like “self” could be a bad choice of names since it could be confused with the self/window object. I’ve seen other people use a variable called “that” instead. As long as it’s declared with the var keyword, it shouldn’t be a problem, but it’s still potentially confusing.

By: Ryan

Ryan — Tue, 10 Mar 2009 13:58:00 +0000

David,

those are some great tips! I just found myself in a situation when writing a class where I used bind(this) but also needed to reference the element returned in the .each loop. Using self would have really made that easier.

By: Adriaan

Adriaan — Tue, 10 Mar 2009 13:45:50 +0000

Thanks, this is quite useful. I find that davidwalsh.name has almost become the defacto mootools site ;)