Explicación detallada y ejemplos de patrones de funciones de JavaScript

El papel del patrón de diseño de JavaScript es mejorar la reutilización y la legibilidad del código, lo que hace que el código sea más fácil de mantener y expandirse.

En JavaScript, una función es una clase de objetos, lo que significa que se puede pasar como un parámetro a otras funciones; Además, la función también puede proporcionar alcance.

Sintaxis para crear una función

Expresiones de funciones nombradas

 // Nombre de la función de la función var add = function add (a, b) {return a+b;}; var foo = function bar () {console.log (foo === bar);}; foo (); // true

Se puede ver que se refieren a la misma función, pero esto solo es válido en el cuerpo de la función.

 var foo = function bar () {}; console.log (foo === bar); // referenceError: la barra no está definida

Sin embargo, no puede llamar a la función llamando a Bar ().

 var foo = (function bar () {console.log (foo === bar);}) (); // falso

Expresiones de funciones

 // también conocida como la función anónima var add = function (a, b) {return a+b;};

El valor asignado a la variable ADD es la definición de función en sí. De esta manera, ADD se convierte en una función que se puede llamar a cualquier parte.

Declaración de funciones

 función foo () {// código aquí} // No hay necesidad de semicolones aquí

En las semicolones finales, las expresiones de funciones siempre deben usar semicolones, y no se requiere el final de los semicolones en la declaración de la función.

La diferencia entre una función declarativa y una expresión de la función es que durante el período de precompilación de JS, la función declarativa se extraerá primero, y luego el código JS se ejecutará en orden:

console.log (F1); // [Función: F1]

console.log (F2); // Undefinado, JavaScript no se interpreta y ejecuta completamente en orden, sino que "precompilará" el JavaScript antes de la interpretación. Durante el proceso de precompilación, la función definitiva se ejecutará primero.

 function f1 () {console.log ("I am f1");} var f2 = function () {console.log ("I am f2");};

Dado que declarar que las funciones se completará durante la construcción de alcance global, las funciones que declaran son propiedades de los objetos de la ventana, lo que muestra por qué no importa dónde declaremos las funciones, declarando que las funciones finalmente pertenecen a los objetos de la ventana.

En el idioma JavaScript, cualquier función anónima pertenece a un objeto de ventana. Al definir una función anónima, devolverá su dirección de memoria. Si una variable recibe esta dirección de memoria en este momento, la función anónima se puede usar en el programa, porque la función anónima también se define y asigna durante la construcción del entorno de ejecución global, por lo que este punto de la función anónima también es un objeto de ventana

 var f2 = function () {console.log ("I am f2");}; console.log (f2 ()); // soy f2 (function () {console.log (this === ventana); // true}) ();

Declaraciones y expresiones de funciones

Promoción de funciones (elevación)

El comportamiento de una declaración de función no es equivalente a una expresión de función con nombre. La diferencia es el comportamiento de elevación. Vea el siguiente ejemplo:

 <script type = "text/javaScript"> // función de función global foo () {alert ("global foo!");} function bar () {alert ('global bar');} function hoist () {console.log (typeOf foo); // function.log (typeOf Bar); // sinfinado foo (); // local foo! bar (); // typeError: 'Undefined' no es una función // variable foo y el implementador se promueve la función foo () {alert ('local foo! '); } // Solo se promueve la barra variable, la parte de implementación de la función no se promueve var bar bar = function () {alert ('local bar!'); }; } hoist (); </script>

Para todas las variables, donde sea que se declaren en el cuerpo, se promueven internamente a la parte superior de la función. La razón de la aplicación general de las funciones es que las funciones son solo objetos asignados a variables.

Como su nombre indica, la mejora significa mencionar las siguientes cosas en la cima. En JS, es actualizar las cosas definidas en las siguientes (variables o funciones) a la definición anterior. Como se puede ver en el ejemplo anterior, Foo y bar en la función elevan dentro de la función se mueven hacia la parte superior, cubriendo así las funciones globales de foo y barra. La diferencia entre las funciones locales Bar y Foo es que Foo se promueve a la parte superior y puede ejecutarse normalmente, mientras que la definición de bar () no se ha mejorado, solo se promueve su declaración. Por lo tanto, cuando se ejecuta Bar (), el resultado está indefinido en lugar de ser utilizado como una función.

Modo de función en tiempo real

Las funciones también son objetos, por lo que pueden usarse como valores de retorno. La ventaja de usar funciones de auto-ejecución es declarar directamente una función anónima y usarla de inmediato, para evitar definir una función que no se usa una vez, y se evita el problema de nombrar conflictos. No hay concepto de espacio de nombres en JS, por lo que es fácil tener conflictos de nombre de función. Una vez que se realiza un conflicto de nombres, el último declarado prevalecerá.

Modo 1:

 <script> (function () {var a = 1; return function () {alerta (2);};} () ()); // 2 aparece, los primeros paréntesis se ejecutan a sí mismos, y los segundos paréntesis ejecutan funciones anónimas internas </script>

Patrón 2: Señalización de variables de función autojecutiva

 <script type = "text/javaScript"> var result = (function () {return 2;}) (); // La alerta de funciones (resultado); // puntos de resultado al valor de retorno 2 de la función autoexecutada; Si aparece resultado (), se producirá un error </script>

Patrón tres: funciones anidadas

 <script type = "text/javaScript"> var result = (function () {return function () {return 2;};}) (); alert (resultado ()); // When alerta (resultado) function () {return 2} </script>

Modo 4: la función de autoexecución asigna su valor de retorno a una variable

 var aBC = (function () {var a = 1; return function () {return ++ a;}}) (); // La función de la función de auto-ejecutación devuelve la función después de return a la variable alerta (ABC ()); // Si está alerta (ABC), el código después de la declaración de retorno será aparecido; Si es abc (), la función después de la devolución se ejecutará

Patrón 5: la función se ejecuta internamente, recursivamente

 // Esta es una función de autoexecución, la función se ejecuta internamente, la función recursiva abc () {abc (); }

Modo de devolución de llamada

Función de devolución de llamada: cuando pasa una función Write () como argumento a otra función de la función (), entonces llamar () puede ejecutar (o llamar) escribir () en algún momento. En este caso, Write () se llama función de devolución de llamada.

Oyente de eventos asíncronos

El modo de devolución de llamada tiene muchos usos, por ejemplo, cuando un oyente de eventos se adjunta a un elemento en la página, en realidad proporciona un puntero a una función de devolución de llamada que se llamará cuando ocurra el evento. como:

document.addeventListener ("hacer clic", console.log, falso);

El ejemplo del código anterior muestra la función de devolución de llamada console.log () en modo burbuja cuando el documento hace clic.

JavaScript es especialmente adecuado para la programación basada en eventos, porque el modo de devolución de llamada admite programas para ejecutarse de manera asíncrona.

se acabó el tiempo

Otro ejemplo de uso del modo de devolución de llamada es cuando se usa el método de tiempo de espera proporcionado por el objeto de la ventana del navegador: setTimeout () y setInterval (), como:

 <script type = "text/javaScript"> var calL = function () {console.log ("se le preguntará a 100ms ..."); }; setTimeout (llamar, 100); </script>

Modo de devolución de llamada en la biblioteca

Al diseñar una biblioteca JS, la función de devolución de llamada será útil. El código de una biblioteca debe usar el código reutilizable tanto como sea posible, y la devolución de llamada puede ayudar a lograr esta generalización. Cuando diseñamos una enorme biblioteca JS, el hecho es que los usuarios no necesitan la mayor parte, podemos centrarnos en las funciones centrales y proporcionar funciones de devolución de llamada en "forma de gancho", lo que nos facilitará construir, escalar y personalizar métodos de biblioteca

Zurra

El curry es una técnica que convierte una función en una nueva función simplificada (para aceptar menos parámetros) llenando múltiples parámetros en un cuerpo de funciones. "【【Competente en JavaScript】

En pocas palabras, la curryización es un proceso de conversión, es decir, el proceso de nuestra conversión de funciones. Como se muestra en el siguiente ejemplo:

 <script type = "text/javaScript"> // function de la función add () basado en curry add (x, y) {var oldx = x, oldy = y; if (typeof oldy == "Undefined") {Función de retorno (Newy) {return Oldx + Newy; }; } // Aplicar completamente return x+y; } // typing typeOf add (5); // salida "función" add (3) (4); // 7 // crea y almacena una nueva función var add2000 = add (2000); ADD2000 (10); // Salida 2010 </script>

Cuando se llama a add () por primera vez, crea un cierre para la función interna devuelta. Este cierre almacena los valores originales de X e Y en las variables privadas Oldx y Oldy.

Ahora podremos usar métodos comunes de curry de funciones arbitrarias, como:

 <script type = "text/javaScript"> // función de función ordinaria add (x, y) {return x + y; } // curry una función para obtener una nueva función var newadd = test (agregar, 5); newAdd (4); // 9 // Otra opción, llame directamente a la nueva prueba de función (agregar, 6) (7); // Salida 13 </script>

Cuando usar curry

Cuando se encuentra que se llama la misma función y la mayoría de los parámetros pasados son los mismos, entonces la función puede ser un buen candidato para la curryización