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 am a Java Champion and the author of the books "Modern Java Recipes" (O'Reilly Media), "Gradle Recipes for Android" (O'Reilly Media), and "Making Java Groovy" (Manning), as well as over a dozen video courses at Safari Books Online. I'm a regular member of the No Fluff, Just Stuff conference tour and have given talks all over the world. Through my company, Kousen IT, Inc, I've taught training courses to and worked with thousands of developers.

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.

    Ken

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: