OO JavaScript, such as it is

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. 🙂

About Ken Kousen
I teach software development training courses. I specialize in all areas of Java and XML, from EJB3 to web services to open source projects like Spring, Hibernate, Groovy, and Grails. Find me on Google+ I am the author of "Making Java Groovy", a Java / Groovy integration book published by Manning in the Fall of 2013, and "Gradle Recipes for Android", published by O'Reilly in 2015.

4 Responses to OO JavaScript, such as it is

  1. Neil Roberts says:

    This really isn’t a closure. This is what I call “object masquerading”, basically being able to provide a function with context. In your example, the context of the first is “window” and the context of the second is the instance you’ve created.

    A closure is a local variable that gets “sucked into” a function. The best example is something like: function(i){ return function(){ return i; }; }. This is where the local variable i from the outer function retains its value in the returned function.

  2. Ken Kousen says:

    You’re right, of course. A “local” variable for window is really more of a global anyway, which I think is (part of) your point. I noticed in Crane’s book that in his classes he often creates a closure for a method handler by doing something like

    … in the constructor code …
    var instance = this;
    this.element.onclick = function() {
    // use the ‘instance’ var here

    which he does because the “this” variable isn’t considered part of the closure, but the local variable “instance” is.

    It’s still a concept I’m getting used to, but I can see that understanding it really is a fundamental key to how JavaScript works.

  3. Greg McCarty says:

    I downloaded and installed Firebug – cool.

    I entered you MyClass example and it failed. I believe the constructor code should be

    function MyClass(name) {
    this.name = name;

  4. Ken Kousen says:

    Ack. Of course. I forgot the entry in the function signature. I was typing code into the Firebug console in one window while copying it into another.

    Good catch. Thanks for the correction.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: