How to use the self with object-oriented javascript and closures
When I began with object-oriented javascript, I always saw a self here and there without fully understanding what it meant.
Self?
When you see self in some object-oriented javascript, it’s just mean that the developer is using a closure that will reference the current object via a variable named self. Because self is a variable, it could be named anything else. The use of “self” as a name is a unwritten convention but it could be whatever you want.
-
// Create a cat
-
function Cat() {
-
this.theCatName = "Mistigri";
-
}
-
-
// The cat will meow later
-
Cat.prototype.meowLater = function() {
-
// I create the variable self that refers to the this (the current object)
-
var self = this;
-
-
// I create a timeout that calls the self.meow function within an anonymous function
-
/*** NOTE : You don’t always have to create an anonymous function it’s just that in
-
this case, it is required ***/
-
window.setTimeout(
-
function() {
-
self.meow();
-
}
-
, 1000);
-
}
-
// The cat meows
-
Cat.prototype.meow = function() {
-
// I can use the this expression!!!
-
alert(this.theCatName + " : meow!");
-
}
-
-
// I crate an object and call the meowLater() function
-
var theCat = new Cat();
-
theCat.meowLater();
Why not use the this?
Because when using closures within an object, the this in the called function (in the above example, in the meow() function) is the window object.
if using multiple closures (particularly nested) it can become difficult to see what refers to what and debugging quickly becomes a nightmare. I find it quite useful to name the self variable according to what it’s referring to. In this case, _cat or thisCat.
I ran into this problem once so now I know I have to store the current object into a custom variable in these situations.
I think I had use the word “realThis”… I will use “self” from now on.
Note that another way of doing this is using the “apply” method, for instance through Prototype’s Funtion.bind method:
http://prototypejs.org/api/function/bind
[...] How to use the self with object-oriented javascript and closures | Javascript Kata (tags: blog javascript howto tutorial programming) [...]
Ha! I’ve been doing something similar all along (except using ‘obj’ instead of ’self’). Today I was wondering what the “real way” of doing this was. Now I know…
And as a python programmer, I like the use of ’self’
[...] How to use the self with object-oriented javascript and closures The use of “self†as a name is a unwritten convention but it could be whatever you want. (tags: Javascript) [...]
Thanks to all for your comments. Like I said, the word “self” is the most used but is not a “real” convention at all.
I don’t use the prototype library for now and I’m always surprised to see that it contains a lot of helper to simplify things for javascript… thanks to them…
I’ll agree with Alex, if you can use JavaScript’s “apply” (or similar functionality offered through a framework, I use dojo’s “hitch”), it’s cleaner than using a closure with “self”. Perhaps this could be an additional kata…
I wouldn’t recommend using “self” because it could be confused with the the “self” property of the “window” object. But anyways, other naming conventions I’ve seen for “this” are “_this, that, thiz and tmp”.
I personally use “that” just because it seems logical what you want access to from within the closure. You want “that” :). If you reference “self” within the closure… it’s really the self outside of yourself… so it’s not really yourself.
You don’t need to pollute your script with prototype; Mochikit (And probably all other js libraries, worth their salt) has an implementation, which doesn’t mess up the built-ins of javascript:
http://www.mochikit.com/doc/html/MochiKit/Base.html#fn-bind
And if you come from a class based, object oriented mindset, bindMethods may be helpful too:
http://www.mochikit.com/doc/html/MochiKit/Base.html#fn-bindmethods
Thanks. It is very usefully for me…
THANKS THANKS
For me 2 - Thanks!