Javascript “this” scope

Question

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

Answer 1

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.

Answer 2

Assuming loadData is called like so:

MyClass.loadData();

then:

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

    // more stuff
}

Answer 3

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
    }
};