从事件处理程序闭包访问公共和私有方法

Question

I have a difficulty in understanding, how my current JavaScript code works. I've managed to solve a problem in accessing private object method from event handler closure, but I'd like to know why does it work so.

The code utilizes the well-known module/plugin metaphor:

(function(module, $, undefined)
{
  function myPrivateCode(e){ /*...*/ }

  module.myPublicCode = function(e) { /*...*/ }

  module.init = function()
  {
    var that = this;
    $('.clickable').click(function(e)
    {
      if($(e.target).hasClass('classX'))
      {
         that.myPublicCode(e.target); // requires 'that' to work
      }
      else
      {
         // that.
         myPrivateCode(e.target);     // will fail if 'that' uncommented
      }
    });
  }

}(window.module = window.module || {}, jQuery ));

In the code I set a click handler which invokes either public or private method. It's perfectly conceivable that we need to pass an object reference into the event handler closure, which is done by that local variable. What is strange to me is that myPrivateCode does neither require that as a refernce, nor fails due to its "privacy". This makes me think that myPrivateCode accesses not the appropriate object, and works somehow differently to expected way. Could someone explain what happens? Certainly I'm missing something.

Answer 1

Your call to myPrivateCode(e.target); is running in the context of the anonymous function that you pass as a handler to the click function.

For more information, read up on closures .

For a simpler example, try out this code:

var foo = function () {
    var a = 1;

    return function (b) {
        return a+b;
    }
};

var bar = foo();

bar(1); // 2

bar(1) will always always gives 2, because a = 1 was in scope when the function was created. In your case, a is your that and your handler is the closed function.

http://jsfiddle.net/Fh8d3/

Answer 2

Both that and myPrivateCode are available to your event handler through a closure . In short, what's going on is that every variable and function you declare inside of another function has access to the outer scope.

myPublicCode , on the other hand, is not available through closures, because it's being assigned to your module object specifically. So the only way to call it is by using module.myPublicCode() (or that.myPublicCode() as you did – but you don't actually need that there, since module is also available).