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
    }
};
Sign up to request clarification or add additional context in comments.

Comments

6

Assuming loadData is called like so:

MyClass.loadData();

then:

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

    // more stuff
}

Comments

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 Comments

"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.
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.
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.
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?
@iMoses—"When declaring a function without a name..." that would be a function expression, not a declaration. ;-)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.