Could a class method be accessed from outside a nested handler method in JavaScript?

Question

Could a class method be accessed from outside a nested handler method in JavaScript?

I am trying to make an XMLHttpRequest to a server using JavaScript. In the handler function, I need to call a method from the surrounding class. Is there a way to achieve this?

Understanding how this works in JavaScript can be confusing. I have experimented with different permutations of using this and bind(this), but so far, my attempts have been unsuccessful.

class ServerRequest
{
    askServer(url)
    {
        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                // Got the response
                this.foo().bind(this); // How do I access the foo method??
            }
        }
        request.open('GET', url);
        request.send();
    }

    foo()
    {
        // Perform some action here
    }
}

All I want is to be able to call the foo method, but when I try, Firefox Console displays the message "TypeError: this.foo is not a function".

javascript ajax xmlhttprequest

Answer 1

Answer №1

There are two ways to handle this situation.

Option 1: Utilize the arrow function

askServer(url)
{
    var request = new XMLHttpRequest();
    request.onreadystatechange = () => {
        if (request.readyState == 4 && request.status == 200) {
            // Response received
            this.foo(); // How to access foo-method??
        }
    }
    request.open('GET', url);
    request.send();
}

foo()
{
    // Perform operations here
}

In this approach, the request object is referenced through a variable instead of using this, as the arrow function has a different scope binding. You can refer to the request object like this: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange#Example

Option 2: Save reference to upper scope in a variable:

askServer(url)
{
    var request = new XMLHttpRequest();
    var self = this;
    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            // Response obtained
            self.foo(); // How to access foo-method??
        }
    }
    request.open('GET', url);
    request.send();
}

foo()
{
    // Implement functionality here
}

Answer 2

There are two ways to handle this situation.

Option 1: Utilize the arrow function

askServer(url)
{
    var request = new XMLHttpRequest();
    request.onreadystatechange = () => {
        if (request.readyState == 4 && request.status == 200) {
            // Response received
            this.foo(); // How to access foo-method??
        }
    }
    request.open('GET', url);
    request.send();
}

foo()
{
    // Perform operations here
}

In this approach, the request object is referenced through a variable instead of using this, as the arrow function has a different scope binding. You can refer to the request object like this: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange#Example

Option 2: Save reference to upper scope in a variable:

askServer(url)
{
    var request = new XMLHttpRequest();
    var self = this;
    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            // Response obtained
            self.foo(); // How to access foo-method??
        }
    }
    request.open('GET', url);
    request.send();
}

foo()
{
    // Implement functionality here
}

Could a class method be accessed from outside a nested handler method in JavaScript?

Answer №1

Similar questions

Strategies for Ensuring Ember JS Waits for Asynchronous Functions to Respond Prior to Rendering

Update the link by simply clicking on a div tag

Is there a way to stop TinyMCE from adding CDATA to <script> elements and from commenting out <style> elements?

Steps for including a subdocument within a mongoose schema

Guidelines for converting a number into an array of strings using JavaScript

Arrange the items in a list in JavaScript in descending sequence

Automatically resizing images in a canvas when their resolution exceeds the canvas size in HTML5

Encountering difficulties with updating an object in Angular

Excessive geolocation position responses in Angular 5

Empty Media Viewer

Troubleshooting: Problems with AngularJS $http.get functionality not functioning as expected

Encountering Datepicker Issue in Your Angularjs App?

Error: Uncaught promise rejection - The function is undefined in the context of Vue.js and Electron

I am unable to utilize the map function as it results in a TypeError: The property 'map' is undefined and cannot be read

Finding the index value of an array in Django

Is it possible for a conditional type in TypeScript to be based on its own value?

Encountering difficulties loading a Partial View using a JQuery ActionResult request in ASP.NET Core

Show the error message from passport.js authentication in the user interface

Is it possible for me to include the id attribute in an HTML element that has been generated using React

Guide to sending multiple images through an upload form using Ajax and Node.js