Accessing parent members from javascript functions called by event handlers

Question

The question

In Javascript, how can an event handler function refer to members of its parent? i.e. can you define an event handler function part of a larger object and have that function "know about" its parent?

(Note that someone else posted a nearly identical question Accessing variables of parent function in Javascript event handlers . It hadn't been answered. Hence the repost )

Erroneous Presuppositions

I had thought that at "function definition" time you could capture a copy of "this" for later re-use, (e.g. copy to "self"). Evidently I was wrong: after I bind the function to the event ("click()" below), "self" subsequently refers to the html anchor tag ('');

The general context : trying to use encapsuation/object-orientedness for code-re-use in javascript.

Example

Here's a simple example (cribbed from elsewhere and modified).

The function succeeds when called during page load, but fails when the user preses "click"

<a href="#" id="myLink" rel="my link">MY LINK</a>

<script type="text/javascript">

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

    this.attr1 = 3;
    this.attr2 = 2;
    this.childObj = {
        method1: function () {
            // this function fails if called from an event handler
            // edited this function to "do something", i.e. provide a visual cue upon execute
            var foo = self.attr1 * self.attr2;
            alert ('value is ' + foo);
            return foo;
        }
    }
}

     var obj = new Construct();
    
    // this call succeeds
    alert (obj.childObj.method1());   

    //this call fails as soon as the event handler refers to "self"
    $("#myLink").click(obj.childObj.method1);

</script>
</body>
</html>

Update/Edit -Updated the example to give a 'visual cue' when it runs -added this section.

My error. As pointed out below, the example works fine. My original, non-working code used this:

   this.self = this

instead of

   var self = this

I didn't realize the distinction (in Java they would be identical) and missed the fact that my example actually worked, (whereas my code failed).

davin · Accepted Answer · 2011-07-24 02:05:02Z

1

Your code works fine. self refers to the object as it is supposed to. That's how the lexical scoping of javascript is defined.

The problem is your handler does nothing. method1 simply returns 6 but you never tell it do anything with that value. If you want to prove it to yourself, the line before the return, add an alert: alert(self.attr1 * self.attr2);

Working Example

answered Jul 24, 2011 at 2:05

davin

45.6k9 gold badges81 silver badges78 bronze badges

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

3 Comments

jfriend00 Over a year ago

I wanted to prove this for myself. It does appear to work. Code example here: jsfiddle.net/jfriend00/sPpsG.

jfriend00 Over a year ago

What threw me off on this one is that the this value when method1() is called from the event handler is the this of the object that caused the event. It is not the "this" of the actual obj. But, the code works because the object doesn't use the this value passed in, it uses the self value that it saved earlier. At first I thought it wouldn't work, then I found out it would work and I wanted to understand why.

user331465 Over a year ago

OK. My bad in posting the question. In my original code, I had used " this.self = this" instead of "var self = this". In java, the two are interchangeable; in javascript evidently not. I didn't realize the difference between the original and the example.

Collectives™ on Stack Overflow

Accessing parent members from javascript functions called by event handlers

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related