Scope of functions vs. code order in Javascript objects

Question

Consider this HTML:

<p>Click me</p>

I would like to write an object with a click handler for each p, but run into the problem that my click handler function could not be found.

This code does not work:

(function(){
    var self = this;

    $("p").each(function(){
        $(this).click(self.myFunction);
    });

    self.myFunction = function(){ alert("myFunction"); }
})();

When I wrap the click handler assignment in a function it does work:

(function(){
    var self = this;

    $("p").each(function(){
        $(this).click(function(){ self.myFunction(); });
    });

    self.myFunction = function(){ alert("myFunction"); }
})();

Question: Why doesn't $(this).click(self.myFunction) work, but $(this).click(function(){ self.myFunction(); }) does?

Edit: The following code does work:

$("p").click(myFunction);
function myFunction(){ alert("myFunction"); }

Shouldn't this fail as well?

P.S. I got my object working without the need to wrap the function by moving the location of the function:

(function(){
    var self = this;

    self.myFunction = function(){ alert("myFunction"); }

    $("p").each(function(){
        $(this).click(self.myFunction);
    });
})();

I guess the problem is parser related.

You need to understand javascript code parsing and evaluation order. See this: stackoverflow.com/questions/3887408/… — slebetman
– slebetman, Commented Sep 7, 2012 at 9:36

Lucas Green · Accepted Answer · 2012-09-07 09:00:05Z

3

In this:

(function(){
    var self = this;

    $("p").each(function(){
        $(this).click(self.myFunction);
    });

    self.myFunction = function(){ alert("myFunction"); }
})();?

The reference is evaluated immediately, and since nothing has been placed in self yet, it fails.

Here:

(function(){
    var self = this;

    $("p").each(function(){
        $(this).click(function(){ self.myFunction(); });
    });

    self.myFunction = function(){ alert("myFunction"); }
})();

The reference is evaluated when the click actually happens, much after self.myfunction is assigned to.

This is in fact not a problem, and an intentional design feature.

In this example:

$("p").click(myFunction);
function myFunction(){ alert("myFunction"); }

The function name is being hoisted to the top of the scope. Since there is nothing dynamic about this function definition (meaning it's not being assigned to an object dynamically), it's available all throughout this scope, from top to bottom.

Functions fill many gaps in JavaScript.

They act as lambdas, modules, methods, functions and probably more that I can't think of right now.

edited Sep 7, 2012 at 9:00

answered Sep 7, 2012 at 8:46

Lucas Green

3,95924 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Asciiom Over a year ago

Good explanation, will vote up tomorrow as I have used up all my votes for the day :) This is an additional resource to understand these kinds of things, (by John Resig!): ejohn.org/apps/learn

Jasper de Vries Over a year ago

Thanks for explaining. I need to keep this in mind when designing objects.

MaxArt · Accepted Answer · 2012-09-07 08:44:14Z

0

I think you already figured out your problem. At the moment you attach the handlers, self.myFunction isn't defined, so no even handler is attached.

But when you wrap the call like function(){ self.myFunction(); }, then self.myFunction is called at the moment the handler is called, not when it's attached.

answered Sep 7, 2012 at 8:44

MaxArt

22.8k10 gold badges85 silver badges82 bronze badges

Collectives™ on Stack Overflow

Scope of functions vs. code order in Javascript objects

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related