Access to public and private methods from event handler closure

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.

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

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/

edited May 23 '17 at 12:12

Community

1
1

answered Dec 06 '12 at 20:31

jbabey

45,965
12
71
94

Could you please be more specific? I know about closures. – Stan Dec 06 '12 at 20:36
Still unclear to me why does `that` work differently with public and private methods? – Stan Dec 06 '12 at 20:41
You are adding the `myPublicCode` function as a property of `that` when you write `module.myPublicCode`. in that context, `that === this === module`. – jbabey Dec 06 '12 at 20:43

score 0 · Accepted Answer · edited May 23 '17 at 11:55

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

Access to public and private methods from event handler closure

2 Answers2