I teach Ajax on a somewhat regular basis, so it’s rather embarrassing to admit I never really understood JavaScript closures. Of course, I thought I did. Now that I’m reading Dave Crane’s Ajax in Practice book, though, I see now what I was missing before.
He has wonderful examples in that book. I love it when he gives me examples that I can just type into a Firebug console in my browser and show everybody.
For example, I think one of the early samples is like:
function getName() { return this.name; }
var o = new Object();
o.name = "Object";
o.getMyName = getName;
window.name = "Window";
getName(); // returns "Window"
o.getMyName(); // returns "Object"
In other words, the this variable points to the current window if you don’t say anything different, or to the current object if the method is a property of the object.
Then there’s the beauty of the call() function, which allows you to invoke a function in a particular context.
getName.call(o); // returns "Object"
Sweet. Also, I get it now that there are no real classes in JavaScript. Instead, you have functions that act as constructors only because they have properties in them that get assigned. When you use the word new with one of these functions, you’re essentially creating a new Object and adding properties to it.
function MyClass() {
this.name = name;
}
MyClass.prototype.getName = function() { return this.name; }
var m = new MyClass("Fred");
m.getName(); // returns "Fred"
m.getName.call(window); // returns "Window"
And the really weird part is that MyClass is just a function, so I could just call it directly without the word new. Also, the MyClass function has a function inside it, which returns another property of whatever the context object is.
Bizarre. As a developer who was raised on Java, it’s a whole different world.
I solemnly promise, however, that now that I’m really becoming a Groovy developer, I will not become one of literalists who claims that Groovy closures aren’t REAL closures. 🙂