4

Como posso acessar o this relativo ao meu objeto, quando o mesmo chama um evento? Quando o evento é chamado, o this passa a ser o próprio evento, o window.event

Ex:

function Foo() {
     this.bar = function() {
        console.log('Hi!');
     }

    document.onkeypress = function(e) {
        // Aqui, o "this" não é mais o objeto Foo, mas sim o "e" ou "window.event"
        this.bar();
        // Erro: this.bar não está definido... 
    }
}

Como posso acessar o meu objeto de dentro do callback do evento keypress?

0

2 Respostas 2

7

Você precisa "setar" o escopo da função anônima que o evento recebe, para fazer isso use o .bind(), segue exemplo:

function Foo() {
     this.bar = function() {
        console.log('Hi!');
     }
    //Com esse método você passa pelo parâmetro o escopo que a função tera,que no caso é this mesmo.
    document.onkeypress = function(e) {
        this.bar();
    }.bind(this);
}
1

Se você estiver usando ES6 ou algum transpiler, a Arrow Function pode ser uma solução também. Elas tem o this do contexto que elas estão vinculadas, basicamente o contexto de onde ela foi declarada.

function Foo() {
  this.bar = function() {
    console.log('Hi!');
  }
  document.onkeypress = () => { this.bar() } 
}

ou se precisar do parâmetro de eventoe

document.onkeypress = e => { this.bar() } 

Gosto bastante desse approach por deixar o código mais clean

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 .