javascript - one - Uso de jQuery $(this) con ES6 Arrow Functions(léxico este enlace)

node arrow functions

Question

Usando las funciones de flecha ES6 con léxico, this unión es excelente.

Sin embargo, me encontré con un problema hace un momento al usarlo con un enlace de clic jQuery típico:

class Game {
  foo() {
    self = this;
    this._pads.on(''click'', function() {
      if (self.go) { $(this).addClass(''active''); }
    });
  }
}

Usando una función de flecha en su lugar:

class Game {
  foo() {
    this._pads.on(''click'', () => {
      if (this.go) { $(this).addClass(''active''); }
    });
  }
}

Y luego $(this) se convierte en cierre de tipo ES5 (self = this).

¿Es una forma de hacer que Traceur ignore "$ (this)" para el enlace léxico?

Answer 1

Otro caso

La respuesta principal es correcta y la he votado.

Sin embargo, hay otro caso:

$(''jquery-selector'').each(() => {
    $(this).click();
})

Podría arreglarse como:

$(''jquery-selector'').each((index, element) => {
    $(element).click();
})

Answer 2

Como dijo en su respuesta a esta misma pregunta. Si desea escribir ES6, debe escribir ES6 todo el tiempo ,

así que si está utilizando la función de flecha de ES6: (event)=>{} , entonces debe usar $(event.currentTarget) lugar de $(this) .

también puede usar una forma más agradable y limpia de usar currentTarget como ({currentTarget})=>{} ,

Class Game {
  foo(){
    this._pads.on(''click'', ({currentTarget}) => {
      if(this.go) {
        $(currentTarget).addClass(''active'');
      }
    });
  }
}

originalmente esta idea fue comentada por rizzi frank en la respuesta de @ Meager, y me pareció útil y creo que no todas las personas leerán ese comentario, así que lo escribí como esta otra respuesta.

Answer 3

Enlace de eventos

$button.on(''click'', (e) => {
    var $this = $(e.currentTarget);
    // ... deal with $this
});

Lazo

Array.prototype.forEach.call($items, (el, index, obj) => {
    var $this = $(el);
    // ... deal with $this
});

Answer 4

Esto no tiene nada que ver con Traceur y apagar algo, así es simplemente cómo funciona ES6. Es la funcionalidad específica que está solicitando usando => lugar de function () { } .

Si desea escribir ES6, debe escribir ES6 todo el tiempo, no puede cambiarlo en ciertas líneas de código, y definitivamente no puede suprimir o alterar la forma en que => funciona. Incluso si pudieras, terminarías con una versión extraña de JavaScript que solo tú entiendes y que nunca funcionaría correctamente fuera de tu Traceur personalizado, que definitivamente no es el objetivo de Traceur.

La forma de resolver este problema en particular es no usar this para obtener acceso al elemento seleccionado, sino usar event.currentTarget :

Class Game {
  foo(){
    this._pads.on(''click'', (event) => {
      if(this.go) {
        $(event.currentTarget).addClass(''active'');
      }
    });
  }
}

jQuery proporciona event.currentTarget específicamente porque, incluso antes de ES6, no siempre es posible que jQuery imponga this en la función de devolución de llamada (es decir, si estaba vinculado a otro contexto mediante bind .

Answer 5

(Esta es una respuesta que escribí para otra versión de esta pregunta, antes de saber que era un duplicado de esta pregunta. Creo que la respuesta reúne la información con bastante claridad, así que decidí agregarla como un wiki de la comunidad, aunque en gran medida es simplemente diferente fraseo de las otras respuestas.)

No puedes Esa es la mitad del punto de las funciones de flecha, se cierran sobre this lugar de tener las suyas propias establecidas por cómo se llaman. Para el caso de uso en la pregunta, si desea que jQuery establezca this al llamar al controlador, el controlador debería ser una function función.

Pero si tiene una razón para usar una flecha (tal vez quiera usar this para lo que significa fuera de la flecha), puede usar e.currentTarget lugar de this si lo desea:

class Game {
  foo(){
    this._pads.on(''click'', e => {                   // Note the `e` argument
      if(this.go) {
        $(e.currentTarget).addClass(''active'');      // Using it
      }
    });
  }
}

currentTarget en el objeto de evento es el mismo que jQuery establece al llamar a su controlador.