¿Cómo convertir una función anidada en una función de clase?
Tengo una función anidada que quiero dividir en una función de clase, pero tengo un problema al usar “this” en la función de clase. Creo que debido a cómo se llama la función, el alcance de “this” cambia, pero no puedo encontrar una solución para esto.
Anidada:
private test() {
this._map.on('overlayadd', function(eventLayer: L.LeafletEvent) {
console.log(this.test);
});
}
}
Clase:
private test() {
this._map.on('overlayadd', this.onOverlayAdd);
}
private onOverlayAdd(eventLayer: L.LeafletEvent) {
console.log(this.test);
};
Intenté usar una función de flecha para “arreglar” el alcance, pero ahora parece que el código en la función ni siquiera se alcanza.
this._map.on('overlayadd', () => this.onOverlayAdd);
davy.ai
El problema con la función de clase es que el alcance de “this” cambia cuando se llama a la función, lo que impide el acceso a las propiedades o métodos de la clase. Una forma de solucionar esto es vincular el alcance de la función de clase al objeto de la clase mediante el método bind(). Por ejemplo:
private test() {
this._map.on(‘overlayadd’, this.onOverlayAdd.bind(this));
}
private onOverlayAdd(eventLayer: L.LeafletEvent) {
console.log(this.test);
};
Otra opción es usar una función de flecha en lugar de una función regular en el método de clase, ya que las funciones de flecha no tienen su propio contexto “this” y heredarán el contexto del alcance circundante. Sin embargo, en el código proporcionado, la función de flecha no está llamando realmente a la función onOverlayAdd, sino que está devolviendo una referencia a ella. La sintaxis correcta sería:
this._map.on(‘overlayadd’, (eventLayer: L.LeafletEvent) => {
this.onOverlayAdd(eventLayer);
});
Esto llamará a la función onOverlayAdd con el alcance correcto, lo que le permitirá acceder a las propiedades o métodos de la clase dentro de la función.