JavaScript - access this object inside callback

In this article, we would like to show you how to access this object inside a callback in JavaScript.

1. self / additional variable example

// ONLINE-RUNNER:browser;

function doSomething(callback) {
    var object = {
        message: 'Message from doSomething function.'
    };

    callback.call(object);
}

var Manager = {
    message: 'Message from Manager object.',
    printObjectMessage: function() {
        var self = this;

        doSomething(function() {
            console.log(self.message);
        });
    },
    printFunctionMessage: function() {
        doSomething(function() {
            console.log(this.message);
        });
    }
}

Manager.printObjectMessage();
Manager.printFunctionMessage();

Output:

Message from Manager object.
Message from doSomething function.

Note: it is good to use self variable with classes too - that approach prevent of incorrect calling of methods that are part of some classes.

// ONLINE-RUNNER:browser;

function Manager() {
    var self = this;

    self.printMessage = function() {
        console.log('This is example message...');
    };

    self.printMessages = function() {
        for (var i = 0; i < 5; ++i) {
            self.printMessage();
        }
    };
}


var manager = new Manager();

manager.printMessages();

Output:

This is example message...
This is example message...
This is example message...
This is example message...
This is example message...

2. Function bind method example

// ONLINE-RUNNER:browser;

function doSomething(callback) {
    var object = {
        message: 'Message from doSomething function.'
    };

    callback.call(object);
}

var Manager = {
    message: 'Message from Manager object.',
    printMessage: function() {
        function callback() {
            console.log(this.message);
        }

        doSomething(callback.bind(this));
    }
}

Manager.printMessage();

Note: by using callback.bind method we create proxy instance for callback function that will be called later with new context - in this case this indicates to Manager object.

Output:

Message from Manager object.

3. ES6 and arrow function example

// ONLINE-RUNNER:browser;

function doSomething(callback) {
    var object = {
        message: 'Message from doSomething function.'
    };

    callback.call(object);
}

var Manager = {
    message: 'Message from Manager object.',
    printMessage: function() {
        doSomething(() => {
            console.log(this.message);
        });
    }
}

Manager.printMessage();

Note: with arrow function this indicates parent context.

Output:

Message from Manager object.