Есть ли возможность доступа к методу класса из метода вложенного обработчика в JavaScript?

Question

Я хочу отправить запрос XMLHttpRequest на сервер с JavaScript.Внутри функции обработчика мне нужно вызвать метод окружающего класса.Есть ли способ реализовать это?

Я знаю, что использование this в JavaScript немного сложно.Поэтому я попробовал все варианты использования this и bind(this), но безуспешно.

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 to access foo-method??
            }
        }
        request.open('GET', url);
        request.send();
    }

    foo()
    {
        // Do something here
    }
}

Моя цель - просто достичь этого метода foo, но Firefox Console показывает мне сообщение «TypeError:this.foo не является функцией ".

Answer 1

вы можете справиться с этим двумя способами.

Используйте функцию стрелки

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

foo()
{
    // Do something here
}

Как вы можете видеть, я теперь ссылаюсь на объект запроса по переменной, а не по this, поскольку область действия функции стрелки ограничена по-разному. И вы можете увидеть здесь, как вы можете ссылаться на запрос: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange#Example

Сохранить ссылку на верхнюю область в переменной :

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

foo()
{
    // Do something here
}