CODEWITHSUNDEEP
javascript
Anindit Karmakar
Anindit Karmakar

Reputation: 835

Javascript access outer object attribute from anonymous function

I have the following object:

var object = {
    attr1 : "hello",
    myFunc : function() {
        alert(this.attr1);     //This should alert "hello"        
    },
    initialize : function() {
        document.getElementById("myElem").addEventListener("click", function() {
            // How do I access attr1 from here?

            myFunc(); // Says myFunc is not defined.

        });
    }
}

object.initialize();

How do I access myFunc or attr1 from inside of the anonymous function passed to addEventListener?

One way I can think of is this:

var object = {
    attr1 : "hello",
    myFunc : function() {
        alert(this.attr1);     //This should alert "hello"        
    },
    initialize : function() {

        myObject = this;

        document.getElementById("myElem").addEventListener("click", function() {
            // How do I access attr1 from here?
            alert(myObject.attr1);

            // calling myFunc
            myObject.myFunc();
        });
    }
}

object.initialize();

But is this a good solution?

Also, If I do this:

var object = {
    attr1 : "hello",
    myFunc : function() {
        alert(this.attr1);     //This should alert "hello"        
    },
    initialize : function() {

        myFunction = this.myFunc;

        document.getElementById("myElem").addEventListener("click", function() {
            // How do I access attr1 from here?
            alert(myObject.attr1);

            // calling myFunc
            myFunction();
        });
    }
}

object.initialize();

Then it alerts with "undefined". Which means this.attr1 is undefined. Why so?

Upvotes: 2

Views: 1400

Answers (3)

mohamedrias
mohamedrias

Reputation: 18576

Inside your event handler function, this will always refer to the DOM element on which the event has been attached.

To access the object properties, you need to use the alternatives such as self/that.

 initialize : function() {

        var that = this;

        document.getElementById("myElem").addEventListener("click", function() {
            alert(that.attr1);

            that.myFunc();
        });
    }

In your solution, you have declared myObject globally as var is missing.

var object = {
attr1 : "hello",
myFunc : function() {
    alert("Instance of window ? "+(this instanceof Window));
    alert(this.attr1);     //This should alert "hello"        
},
initialize : function() {

    myFunction = this.myFunc;

    document.getElementById("myElem").addEventListener("click", function() {
        // How do I access attr1 from here?
        alert(object.attr1);

        // calling myFunc
        myFunction();
    });
}
}

object.initialize();
<div id="myElem">Click me</div>

Now as you can see in the alert, this refers to the window object. Because when you copy the function, its by value and not by reference. So only the function is copied and not underlying object. So now this will refer to the window object.

Upvotes: 4

Vitaliy Terziev
Vitaliy Terziev

Reputation: 6701

Just make it like this - > You do not need extra variables to make your code so obscure. :)

var object = {
    attr1: "hello",
    myFunc: function () {
        alert(this.attr1); //This should alert "hello"        
    },
    initialize: function () {

        document.getElementById("myElem").addEventListener("click", function () {
            // How do I access attr1 from here?
            object.myFunc();
        });
    }
}

object.initialize();

Upvotes: 1

woolm110
woolm110

Reputation: 1204

The solution you provided is exactly how I go about solving this issue, declare a variable and set its value to this, then use that to call other functions within your object.

otherFunc: function() {
  console.log('test');
},

myFunc: function() {
  var self = this;

  // do stuff

  // call other function
  self.otherFunc(); 

}

Upvotes: 1

Related Questions