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

Answer 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