3

Estou fazendo meus estudos de Javascript, e estou fazendo alguma bem simples para consumir uma API, porém recebi um erro. Antes de comentá-lo, vou mostrar meu código:

View.js

var model = new Model();
var response = null;
model.setUrl("https://jsonplaceholder.typicode.com/users");
model.openXhr("GET");

Model.js

var Model = function() {
    var _url = null;
    var _xhr = new XMLHttpRequest();
    var _message = {};
    var _response = null;

    this.setUrl = function (url) {
        _url = url;
    }

    this.getUrl = function (url) {
        return _url;
    }

    this.openXhr = function(method) {
        _xhr.open(method, this.getUrl());
        _xhr.onload = this.onLoadXhr;
        _xhr.send();
    }

    this.onLoadXhr = function() {
        if (_xhr.status === 200)
            _message.status = "success";
        else
            _message.status = "failed";

        var response = this.parseResponse(_xhr.responseText); // this.parseResponse is not a function

        this.setResponse(response);
    }

    this.parseResponse = function(response) {
        return JSON.parse(response);
    }

    this.setResponse = function(response) {
        _response = response;
    }

    this.getResponse = function() {
        return _response;
    }


}

O problema

var response = this.parseResponse(_xhr.responseText); // this.parseResponse is not a function

Vejam que chega nessa parte ele dá esse erro ao chamar a função. Printando o this verifiquei que ele não é do contexto da função, e sim do _xhr. Por quê ? Em outra parte do código eu faço uma operação parecida e não acontece isso _xhr.onload = this.onLoadXhr;. Aqui eu referenciei a onLOadXhr dentro da openXhr.

0

3 Respostas 3

5

O problema é que o _xhr.onload vai ser corrido pela a instância do Ajax e quando fazes _xhr.onload = this.onLoadXhr; passas uma função, sem contexto associado, por isso vai ser-lhe dado o this do objeto que chamar.

Usa assim: _xhr.onload = this.onLoadXhr.bind(this);, dessa maneira passas o teu método, já forçando o contexto.

Um exemplo para clarificar:

function Obj(fn) {
    this.teste = fn;
}

function foo(quem) {
    console.log(quem, this === window);
}

new Obj(foo).teste('dentro do obj');
foo('fora do objeto');

4
  • Então sempre que passar uma função como referência ela não virá com contexto associado ? 6/12/2016 às 18:54
  • @AllanRamos depende, nesse caso a função é chamada como método de XMLHttpRequest e daí o contexto mudar.
    – Sergio
    6/12/2016 às 18:56
  • Por estar associada ao objeto XHR. Se eu não tivesse esse objeto, como ficaria ? 6/12/2016 às 18:58
  • @AllanRamos juntei um exemplo à resposta
    – Sergio
    6/12/2016 às 19:04
1

O normal em situações como essa é declarar uma variável para armazenar uma referência para o próprio objeto. Por exemplo:

var Model = function() {
    var $this = this;

    // ...

    this.onLoadXhr = function() {
        if (_xhr.status === 200)
            _message.status = "success";
        else
            _message.status = "failed";

        var response = $this.parseResponse(_xhr.responseText);

        $this.setResponse(response);
    }

    // ...
}

O problema com o this é que ele muda de acordo com o contexto. No caso, dentro de uma função, o this já não faz mais referência ao objeto, e sim ao contexto da função.

0

Agora eu entendi, e vou explicar o ocorrido com um novo caso.

var Model = function() {
    this.teste = 1;

    this.firstFunction = function (url) {
        this.secondFunction();
        this.thirdFunction();
    }

    this.secondFunction = function (url) {
        console.log("second " + this.teste);
    }

    this.thirdFunction = function (url) {
        console.log("third " + this.teste);
        var a = this.fourthFunction;
        a();
    }

    this.fourthFunction = function (url) {
        console.log(this);
        console.log("fourth " + this.teste); //undefined
    }

}

var model = new Model();
model.firstFunction();

O fourthFunction perdeu o contexto ao ser passado como referência, assumindo o contexto do objeto global.

Por via de regra, sempre quando você regista uma function para ser executada depois, seja por causa de um CB, ou Event ou até mesmo para renomear uma function vais ter que bindar ele para o escopo original, por que se não ela vai assumir o escopo destino, ou seja, no seu caso a onLoadXhr (sem bind) esta assumindo o this como essa própria função e não mais o this da openXhr.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .