4

I am writing some JavaScript code. I am a little confused about this keyword. How do I access logger variable in the dataReceivedHandler function?

MyClass: {
    logger: null,
    init: function() {
        logger = LogFactory.getLogger();
    },
    loadData: function() {
        var dataReceivedHandler = function() {
            // how to access the logger variable here? 
        }

        // more stuff
    }
};

3 Answers 3

10

You can do something like this inside the loadData function to access your object...

MyClass: {
    logger: null,
    init: function() {
        this.logger = LogFactory.getLogger();
    },
    loadData: function() {
        var self = this;
        var dataReceivedHandler = function() {
            // how to access the logger variable here? 
            self.logger.log('something');
        }

        // more stuff
    }
};
6

Assuming loadData is called like so:

MyClass.loadData();

then:

loadData: function() {
    var self = this;
    var dataReceivedHandler = function() {
        self.logger ...
    }

    // more stuff
}
0
4

Because dataReceivedHandler is an anonymous function this will refer to the window object on the global scope. I think of two way you can bypass that.

a) Create a variable inside loadData to hold it's context then use it inside dataReceivedHandler as such:

loadData: function() {
    var self = this;
    var dataReceivedHandler = function() {
        console.log(self.logger);
    }

    // more stuff
}

b) Change the context of your anonymous function using apply or call.

loadData: function() {
    var dataReceivedHandler = function() {
        console.log(this.logger);
    }
    // more stuff
    dataReceivedHandler.call(this); // by passing this as the first argument we make sure the context of the excuted function is our current scope's this
}

I prefer option B due to performance and memory usage optimizations, but both would work just fine.

8
  • 2
    "Because dataReceivedHandler is an anonymous function this will refer to the window object on the global scope." - It's not anonymous when you refer to it by the name dataReceivedHandler. And anonymous or not the value of this depends on how the function is called, not how it is defined (as you presumably know given your second example). Note that both methods in your answer will only work if loadData() is called in a way that sets its this to the MyClass object.
    – nnnnnn
    Commented Apr 5, 2013 at 0:32
  • 1
    When declaring a function without a name which is returned into a variable (function() {} instead of function name() {}) this is what you call an anonymous function. Anonymous function's context will always be window unless overridden by a method such as call or apply. Am I wrong about that? If so please show an example proving otherwise.
    – iMoses
    Commented Apr 5, 2013 at 0:35
  • I'm correcting myself. If an anonymous function is part of an object (namespace), this will refer to the object as long as the method is executed directly from it.
    – iMoses
    Commented Apr 5, 2013 at 0:37
  • Although I have not mentioned, in my example dataReceivedHandler will be called upon the completion of ajax request. Is option B still a better choice in that case?
    – bluetech
    Commented Apr 5, 2013 at 0:37
  • 1
    @iMoses—"When declaring a function without a name..." that would be a function expression, not a declaration. ;-)
    – RobG
    Commented Apr 5, 2013 at 1:27

Not the answer you're looking for? Browse other questions tagged or ask your own question.