Languages
[Edit]
EN

JavaScript - how to access this object inside callback?

4 points
Created by:
Kate_C
19790

Most common problem for new developers that try programming in JavaScript is usage this in propper way. In JavaScript it is possible to access object inside callback in following ways.

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.

 

Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join