CODEWITHSUNDEEP
javascriptjquery
Tarek Saied
Tarek Saied

Reputation: 6616

need help understanding why this line in the code

this code in book jQuery in action page 99

Why he wrote this line

var current = this;

    <!DOCTYPE html>
<html id="greatgreatgrandpa">
    <head>
        <title>DOM Level 0 Bubbling Example</title>
        <link rel="stylesheet" type="text/css" href="../styles/core.css"/>
        <script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
        <script type="text/javascript" src="../scripts/jqia2.support.js"></script>
        <script type="text/javascript">
            $( function() {
                $('*').each( function() {
                    var current = this;
                    this.onclick = function(event) {
                        if (!event)
                            event = window.event;
                        var target = (event.target) ?
                        event.target : event.srcElement;
                        say('For ' + current.tagName + '#'+ current.id +
                        ' target is ' +
                        target.tagName + '#' + target.id);
                    };
                });
            });
        </script>
    </head>
    <body id="greatgrandpa">
        <div id="grandpa">
            <div id="pops">
                <img id="example" src="example.jpg" alt="ooooh! ahhhh!"/>
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Views: 156

Answers (5)

Aaron Digulla
Aaron Digulla

Reputation: 328624

All the other answers are correct; I just try to make it easier to understand.

this is assigned by context. If a function is called as part of event handling, this is assigned to the DOM element which fired the event. In the example above, that would be the element that was clicked.

In a similar way, this in the loop $('*').each() is the current element in the DOM (the element which matched the selector '*').

This means this is changed by the browser before a function is called. If you want to use the outer this in the inner click handler, you must create a reference to it. The reference keeps its value because the browser will make a copy of all visible variables when it creates the inner click handler.

This also means that current will be a different reference for all inner click handlers. For each handler, it will point to the value the outer this had when the click handler was created.

Upvotes: 2

Pointy
Pointy

Reputation: 413737

He did that so that the this value could be preserved and used inside a nested lexical scope. Each function call to any function involves (internally) setting this to refer to some object, based on the details of the invocation. Thus, inside a nested function (a function declared inside another function, as in this case), should there be a need to refer to the "outer" value of this, well, there's a problem: this, in that nested context, will have been set to refer to something else (not necessarily, but possibly). By "capturing" this in the outer context, that inner code will be able to refer to it freely.

That's a pretty good book by the way; I used to work with one of the authors (Bear) :-)

Upvotes: 7

Clement Herreman
Clement Herreman

Reputation: 10536

This line of code's aim is to be able to use the value of this in the this.onclick = function(event) { } function, as in this function this would refer to the DOM element that was clicked on.

Upvotes: 1

Herms
Herms

Reputation: 38798

Look inside the function defined for onclick. The meaning of this is different inside that function, as it's set when the function is run.

By doing var current = this it stores a copy of the current value of this so it can be used inside that nested function declaration.

Upvotes: 1

mdm
mdm

Reputation: 12630

Because within the function defined for onclick, this refers to the object the event has fired on, so to refer to the this outside of that block of code, you must assign it to something else first.

Upvotes: 1

Related Questions