events ( node ) { let thisclass = this; node.on('mouseover', ( d, i ) => { thisclass.animateParentChain( d ); }); node.on('mouseout', (d, i) => { d3.select(this).select("circle").attr("r", 2.5); thisclass.unAnimateParentChain( d ); }); node.on('click', (nd, i) => { thisclass.persistsAnimateParentChain( nd ); thisclass.loadModal(nd); }); }

Lo anterior es un método en una clase es6. El guión original se veía así:

 events: function ( node ) { node.on('mouseover', function ( d, i ) { app.radialD3.animateParentChain( d ); }); node.on('mouseout', function(d, i){ d3.select(this).select("circle").attr("r", 2.5); app.radialD3.unAnimateParentChain( d ); }); node.on('click', function(nd, i){ app.radialD3.persistsAnimateParentChain( nd ); app.radialD3.loadModal(nd); }); },

El nuevo método es6 se puede reescribir usando la palabra clave de función, por ejemplo:

 events ( node ) { let thisclass = this; node.on('mouseover', function ( d, i ) { thisclass.animateParentChain( d ); }); node.on('mouseout', function (d, i) { d3.select(this).select("circle").attr("r", 2.5); thisclass.unAnimateParentChain( d ); }); node.on('click', function(nd, i){ thisclass.persistsAnimateParentChain( nd ); thisclass.loadModal(nd); }); }

Cambiando para usar la palabra clave de función y las cosas funcionan. Sin, el script tiene problemas con this palabra clave.

Soy razonablemente nuevo en el tema de es6, pero ¿cuál es la forma "adecuada" de escribir esto? En la devolución de llamada necesito que this sea el elemento html y no la clase, pero al mismo tiempo la devolución de llamada necesita acceder a los métodos de la clase. El uso de la palabra clave function parece dar un paso atrás, al igual que establecer la clase actual en una variable:/

¿Cómo se diferencia entre los this ?