javascript - “Esto” dentro del método de clase es6

class ecmascript-6

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo acceder al ''este'' correcto dentro de una devolución de llamada? 10 respuestas

Por alguna razón, estoy obteniendo valores extraños para "esto" en mi clase de es6 ...

''use strict'';
class Clicker {
  constructor(element) {
    this.count = 0;
    this.elem = element;
    this.elem.addEventListener(''click'', this.click);
    
    // logs Clicker { count:0, elem: button#thing} as expected
    console.log(this);
  }

  click() {
    // logs <button id="thing">...</button> as unexpected...
    console.log(this);
    this.count++;
  }
}


var thing = document.getElementById(''thing'');
var instance = new Clicker(thing);

<button id="thing">Click me</button>

Pregunta:

¿Por qué el "esto" dentro del método de clic de los Clickers se refiere al nodo dom en lugar de ... a sí mismo?

Más importante aún, ¿cómo me refiero a la propiedad de recuento de Clickers desde su método de clic si no puedo usar "esto" para hacerlo?

Answer 1

¿Por qué el "esto" dentro del método de clic de los Clickers se refiere al nodo dom en lugar de ... a sí mismo?

Debido a que la especificación para .addEventListener() es establecer this puntero en el elemento DOM que capturó el evento. Así es como está diseñado para trabajar.

Al pasar un método como devolución de llamada en el que desea anular el valor de this , puede usar .bind() para forzar el valor deseado de this con él:

this.elem.addEventListener(''click'', this.click.bind(this));

Explicación:

Todas las llamadas de función en Javascript establecen un nuevo valor de this acuerdo a cómo se llama la función. Consulte esta explicación para obtener más información sobre ese conjunto básico de reglas.

Además de eso, cuando haces esto:

this.elem.addEventListener(''click'', this.click);

Solo está obteniendo el método this.click y pasando ese método solo a addEventListener() . El valor de this se perderá completamente. Es como si estuvieras haciendo esto:

var m = this.click;     // m here is just a reference to Clicker.prototype.click
this.elem.addEventListener(''click'', m);

Además de esto, .addEventListener() está diseñado específicamente para establecer su propio valor cuando llama a la devolución de llamada (para señalarlo al elemento que crea el evento).

Por lo tanto, puede usar .bind() como se muestra arriba para forzar que el valor correcto de this esté en su lugar cuando se llame a su método.

Para referencia, puede encontrar esta descripción de las seis formas en que se configura para que una llamada de función en Javascript sea útil.

Otras opciones

Encuentro que .bind() es la forma más clara de definir esto, pero también puedes usar una función anónima local:

var self = this;
this.elem.addEventListener(''click'', function() {
    self.click();
});

o en ES6, una función de flecha:

this.elem.addEventListener(''click'', () => this.click());

La función de flecha conservará el valor de this automáticamente para que no necesite la referencia self utilizada en el ejemplo anterior.