Dado el siguiente código, necesito reutilizar la funcionalidad de innerFunc1 e innerFunc2 en innerfunc3 , pero no estoy seguro de cómo se puede acceder a innerFunc1 e innerFunc2 dentro de innerfunc3 , porque ni siquiera están definidos en ese momento. Además, me pregunto, ¿hay un patrón mejor para lograr esta funcionalidad?
const outerFunc = () => ({ innerFunc1: () => { console.log("Inner function 1"); }, innerFunc2: () => { console.log("Inner function 2"); }, innerFunc3: () => { innerFunc1(); innerFunc2(); console.log("Inner function 3"); } }); const func = outerFunc(); func.innerFunc3();Comportamiento esperado
Inner function 1 Inner function 2 Inner function 3 Pero el resultado aparente es ReferenceError: innerFunc1 is not defined
Actualizar:
Se me ocurrió que el resultado deseado se puede lograr usando el siguiente código
const outerFunc = () => ({ innerFunc1: () => { console.log("Inner function 1"); }, innerFunc2: () => { console.log("Inner function 2"); }, innerFunc3: () => { const func = outerFunc(); func.innerFunc1(); func.innerFunc2(); console.log("Inner function 3"); } }); const func = outerFunc(); func.innerFunc3();Pero, ¿es el patrón correcto para usar?
Si por alguna razón debe usar funciones de flecha en lugar de funciones regulares. Puede utilizar un cierre para almacenar el objeto.
const outerFunc = () => { let obj = { innerFunc1: () => { console.log("Inner function 1"); }, innerFunc2: () => { console.log("Inner function 2"); }, innerFunc3: () => { obj.innerFunc1(); obj.innerFunc2(); console.log("Inner function 3"); } }; return obj; }); class + this palabra clave
class Func { innerFunc1 = () => { console.log("Inner function 1"); } innerFunc2 = () => { console.log("Inner function 2"); } innerFunc3 = () => { this.innerFunc1(); this.innerFunc2(); console.log("Inner function 3"); } } const func = new Func(); func.innerFunc3();PERO, como @Sergey señaló a la derecha
La asignación de funciones a las propiedades de clase no se considera una buena práctica, ya que duplicará esta lógica cada vez que se cree una instancia. En su lugar, debe definirse como un método regular y, por lo tanto, un método se compartirá con N instancias a través del prototipo.
función de fábrica + this palabra clave
const outerFunc = () => ({ innerFunc1: function() { console.log("Inner function 1"); }, innerFunc2: function() { console.log("Inner function 2"); }, innerFunc3: function() { this.innerFunc1(); this.innerFunc2(); console.log("Inner function 3"); } }); const func = outerFunc(); func.innerFunc3();Funciona debido a la diferencia entre la función normal y la función de flecha cuando se trabaja con el contexto de invocación de función .
En this caso de una función normal, será una referencia a una func , porque se determina en la llamada y la llamada ocurre en el objeto func .
En el caso de una función de flecha, this no estará undefined , porque una función de flecha infiere su contexto en su creación cuando el objeto aún no está instanciado.
Otra solución para mantener el uso de funciones de flecha sería definir funciones como variables y regresar como un objeto al final. Esto también eliminará la necesidad de usar this palabra clave para otras invocaciones de funciones.
const outerFunc = () => { const innerFunc1 = () => { console.log("Inner function 1"); }; const innerFunc2 = () => { console.log("Inner function 2"); }; const innerFunc3 = () => { innerFunc1(); innerFunc2(); console.log("Inner function 3"); }; return { innerFunc1, innerFunc2, innerFunc3 }; }; const func = outerFunc(); func.innerFunc3();