12

Situação

Estava montando uma widget quando comecei a analisar um possível erro, pois pelos testes de fato ocorreu :

Teste

document.getElementById('teste').addEventListener('click', function(){
  n.p.call(this);
  setTimeout(function(){
    document.getElementById('result').innerHTML = 'FAIL';
    n.q.call(this);
  },2000);
});

var n = {
  options : {
    move : true,
  },
  p : function(){
    console.log(this);
    document.getElementById('result').innerHTML = this;
  },
  q : function(){
    if(this.options.move === true){
      console.log()
      document.getElementById('result').innerHTML = 'OK';
    }
  }
}

n.p();
setTimeout(function(){
  n.q();
},2000);
<p id="teste">
  teste
</p>
<div id="result">
</div>

Descrição

Os métodos de n a principio deveriam ser chamados via n.p(), ou seja função, contudo lembrei do método call e apply, que alteram o this, para o objeto chamador.

Duvida

  • Como referenciar this, sendo que this não é o que eu esperava?
  • Sempre devo fazer objectName.var em vez de this.var?

1 Resposta 1

10

Guilherme, no seguinte trecho:

setTimeout(function(){
    document.getElementById('result').innerHTML = 'FAIL';
    n.q.call(this);
},2000);

O this passa a ser a função atual, se quiser pegar o this do escopo anterior (no caso a div#teste), armazene a mesma em uma variavel.

Quanto ao seguinte trecho:

if(this.options.move === true){
    console.log()
    document.getElementById('result').innerHTML = 'OK';
}

O this é o objeto que chamou o método... em uma situação normal será o proprio n, mas ao usar o call(this), quem está chamando o método é o this e este não tem uma propriedade options. então acesse n.options

caso precise de um controle maior sobre o seu escopo, utilize um closure ou implemente a interface EventListener

(function () {
  var teste = document.getElementById('teste');
  var result = document.getElementById('result');

  teste.addEventListener('click', function(){
    var self = this;
    n.p.call(self);
    setTimeout(function(){
      result.innerHTML = 'FAIL';
      n.q.call(self);
    },2000);
  });

  var n = {
    options : {
      move : true,
    },
    p : function(){
      console.log(this);
      result.innerHTML = this;
    },
    q : function(){
      if(n.options.move === true){
        console.log(this)
        result.innerHTML = 'OK';
      }
    }
  }

  n.p();
  setTimeout(function(){
    n.q();
  },2000);
})();
<p id="teste">
  teste
</p>
<div id="result">
</div>

um exemplo implementando a interface EventListener:

var n = {
  teste: document.getElementById('teste'),
  result: document.getElementById('result'),
  options : {
    move : true,
  },
  p : function(){
    console.log(this);
    result.innerHTML = this;
  },
  q : function(){
    if(this.options.move === true){
      console.log(this)
      result.innerHTML = 'OK';
    }
  },
  handleEvent: function (event) {
    if (event.currentTarget == this.teste && event.type == "click") {
      this.exec();
    }
  },
  exec: function () {
    var self = this;
    this.p();
    setTimeout(function(){
      self.q();
    }, 2000);
  },
  init: function () {
    this.teste.addEventListener('click', this);
    this.exec();
  }
};

n.init();
<p id="teste">
  teste
</p>
<div id="result">
</div>

1
  • +1, muito boa implementação, com isso me confirma que devo ter cuidado com o this. Commented 22/03/2016 às 13:09

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 .