Javascript access outer object attribute from anonymous function

Question

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?

Yes, that's a common solution, but you forgot to declare the variable var myObject = this — elclanrs
– elclanrs, Commented Mar 30, 2015 at 10:53
@dystroy can you show it in a new answer by editing my code? — Anindit Karmakar
– Anindit Karmakar, Commented Mar 30, 2015 at 10:56
While yours is a typical technique and a good solution, you can also make use the bind() function: .addEventListener("click" function() {}.bind(this)); — marekful
– marekful, Commented Mar 30, 2015 at 10:56
You could also directly use object without declaring a new variable, like object.myFunc() or object.attr1 — cyber_rookie
– cyber_rookie, Commented Mar 30, 2015 at 10:57

mohamedrias · Accepted Answer · 2015-03-30 11:20:24Z

4

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.

edited Mar 30, 2015 at 11:20

answered Mar 30, 2015 at 10:56

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

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

1 Comment

marekful Over a year ago

Be careful with self because in it may be a reserved (and readonly) keyword. (In some Gecko based browsers.)

woolm110 · Accepted Answer · 2015-03-30 10:57:56Z

1

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(); 

}

answered Mar 30, 2015 at 10:57

woolm110

1,20419 silver badges29 bronze badges

Comments

Vitaliy Terziev · Accepted Answer · 2015-03-30 11:06:26Z

1

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();

answered Mar 30, 2015 at 11:06

Vitaliy Terziev

6,7313 gold badges19 silver badges29 bronze badges

2 Comments

Anindit Karmakar Over a year ago

Are there any side effects of this approach? Or the other approaches?

Vitaliy Terziev Over a year ago

from what i see just readability is affected by the other approaches and there is more room for errors when you have extra variables, about the code, no from my experience.

Collectives™ on Stack Overflow

Javascript access outer object attribute from anonymous function

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related