Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❤ 💻
We are community of people that helps each other.

If you think you have some skills to help others

help someone and become a part of our community - List Q & A

JavaScript - how to access this object inside callback?

0 contributions
4 points

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.

 

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more