3
class Cat {
    constructor(name, picture) {    
        this.name = name;
        this.picture = picture;
        this.count = 0;

        // ...

        this.img.click(function () {
            this.count++; // não funciona como eu espero
        });
    }
}

Observe a linha this.img.click. A partir dela, o this passa a ser o img, porém dentro do callback eu manipulo o count que é do Cat.

Não posso usar this.count++; como está escrito pois o this naquele ponto não se refere mais ao Cat.

Como faço para acessar a instância de Cat dentro do callback?

2 Respostas 2

3

Existem 4 maneiras de se fazer isso.

1. Guardar uma referência em variável

A primeira é a da resposta do Isac, e consiste em guardar uma referência ao objeto this desejado numa variável a que a função tenha acesso. Repito o exemplo do Isac:

let obj = this; //criar referencia aqui
this.img.click(function () {
    obj.count++; //usar count através da referencia
});

2. Criar uma função com this fixo

Toda função em JS tem um método bind que cria uma cópia da função atrelada a um this específico. Com esse recurso você poderia fazer assim:

const incrementar = function() {
    this.count++
};
this.img.click(incrementar.bind(this));

3. Arrow functions

As arrow functions não possuem contexto/this próprio, e permitem algo mais próximo do seu código original:

this.img.click( () => this.count++ );

4. Implementando EventListener

Esse método é pouco conhecido, mas seu objeto pode escutar e tratar eventos internamente, se implementar a interface EventListener. Um exemplo baseado no seu:

class MyCounter {

    constructor() {    
        this.count = 0;
        this.btn = document.querySelector('#some-button');

        // Repare que passamos this em vez de uma função
        this.btn.addEventListener('click', this, false);
    }

    incrementa() {
       this.count++;
    }

    // Implementa a interface EventListener
    handleEvent(e) {
       if(e.type === 'click') {
          this.incrementa();
       }
    }

}
2

Pode criar uma referencia para o objeto em si que depois usa dentro do callback:

class Cat {
    constructor(name, picture) {    
        this.name = name;
        this.picture = picture;
        this.count = 0;

        // ...
        let obj = this; //criar referencia aqui
        this.img.click(function () {
            obj.count++; //usar count através da referencia
        });
    }
}

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 .