ansaurus

Question

How to create proper closures in jQuery?

Answer 1

+4 A:

That happens because when you bind an event, the event handler function is called with the context of the DOM element which triggered the event, the this keyword represents the DOM element.

For getting "bar" you should store a reference to the outer closure:

var bar = function() {
  var self = this;

  this.baz = function() {
    this.input = $('.input');
    this.input.bind("keydown keyup focus blur change", this.foo);
  }

  this.foo = function(event){
    console.log(this); // the input
    console.log(self); // the bar scope
  }
};

Note: If the bar function is called without the new operator, this will be the window object and baz and foo will become global variables, be carefull!

However I think your code can be simplified:

var bar = {
  baz: function() {
    var input = $('.input');
    input.bind("keydown keyup focus blur change", this.foo);
  },

  foo: function(event){
    console.log(this); // the input
    console.log(bar); // reference to the bar object
  }
};

CMS 2009-08-26 18:59:06

I would add that you don't really need the "var bar = " portion. To call the closure inline, add "()" before the last semicolon.

spoulson 2009-08-26 19:08:08

Yes, but note also that if the closure is executed automatically, `baz` and `foo` will become global, since `this` will be the window object.

CMS 2009-08-26 19:15:43

Thanks, I think I will go with this "outer closure" option. But I was hoping for something more, well, elegant, like a, dunno, second bind inside the input.bind(). I have a feeling that I've seen something like this somewhere. Is there any other options?

n1313 2009-08-26 19:20:08

Answer 2

+1 A:

Hi, to get bar in your foo do this:

bar = function() {

var me = this;

this.baz = function() {
    this.input = $('.input');
    this.input.bind("keydown keyup focus blur change", this.foo);
}

this.foo = function(event){
    // me, would be your bar object.
    console.log(me);
}

}

Tomas Kirda 2009-08-26 19:06:35

Answer 3

A:

Here you go.this is an exmaple of how to get "this"

<html>
<head></head>
<script  type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script>
 var  bar = function() {

this.baz = function() {
    this.input = $('.input');
    this.input.bind("keydown keyup focus blur change", this.foo);
}

this.foo = function(event){
    console.log(this);
}

}

</script>
<body>
<input class="input">
<button onclick="new bar().baz()">Click</button>
</body>
</html>

This happens because the function baz is called with an instance of bar.SO bar is executing within the "new bar()" context and not the window object.

If you are using firebug (it seems so), you can track the logging as you type inside the input text control before and after clicking the click within the console tab.

2009-08-26 19:09:11

Answer 4

A:

This is a general problem when using instance methods as callbacks in JavaScript. I use this function to create a closure to call the method bound to the correct instance:

function bound_method(instance, method) {
  return function() {
    return method.apply(instance, arguments);
  };
}

Then you can use this as your callback in place of this.foo:

bound_method(this, this.foo)

Unlike some of the other proposals, this allows you to put the methods on the prototype instead of creating them in the constructor. This way you only have one shared copy of the implementation instead of re-creating those functions for each new instance of bar.

var bar = function() {};
$.extend(bar, {
  baz: function() {
    this.input = $('.input');
    this.input.bind("keydown keyup focus blur change",
                    bound_method(this, this.foo));
  },

  foo: function(event) {
    console.log(this);
  }
});

Matt Good 2009-08-26 19:09:57

Your bound_method() method looks a lot like a bind(), am I right?

n1313 2009-08-26 19:21:16

Yes, it's pretty similar to Function.bind in Prototype, or the newer ECMAScript standards. I'd considered adding it to the Function prototype, but we've been avoiding modifying the built-in object prototypes.

Matt Good 2009-08-26 19:39:24

ansaurus

tags:

views:

answers:

How to create proper closures in jQuery?

related questions