Transcripciones
1. Conceptos críticos: Bienvenido a esta sección sobre conceptos
críticos en JavaScript. En esta sección,
vamos a tratar
lo que creo que son conceptos
críticos
sobre el lenguaje y cómo funciona JavaScript. Ahora algunos de ustedes pueden querer
adelantar dos secciones que se centran más en el
aspecto del lenguaje de JavaScript. Pero yo instaría a los pacientes, estos conceptos son críticos. Ahora bien, al iniciar
en esta sección, algunos de los conceptos pueden
parecer básicos porque lo son. Pero incluso si llevas tiempo
trabajando con
JavaScript, estoy seguro de que
aprenderás algo. Así que quédate con él. Ahora bien, ¿por qué son críticos estos
conceptos? ¿ Por qué es importante entender
cómo funciona el lenguaje? Porque una parte crítica de la
comprensión de cualquier buen desarrollador es saber por qué
haces ciertas cosas. La y
permite ajustar patrones o código para adaptarse a
sus necesidades específicas. El y facilitar el pensamiento
crítico. Y estos conceptos proporcionan
el por qué para muchas cosas que
hacemos en JavaScript de las que
hablaremos más adelante. De hecho, como parte
de secciones posteriores, es posible que desee volver y
volver a visitar algunos de estos temas, como el bucle de eventos cuando se trata de código asincrónico. Por lo que es importante pasar algún tiempo hablando
del motor JavaScript, la pila de llamadas, el montón de memoria. El hecho de que JavaScript
sea un solo subproceso, el entorno de tiempo de ejecución
y el bucle de eventos. Entonces saltemos a ello.
2. Entorno de tiempo de ejecución: Para que podamos hacer
uso de JavaScript, necesitamos un entorno
donde se ejecute. Ahora, JavaScript
no requiere
muchas herramientas para escribir código. De hecho, sólo podemos abrir un sencillo editor de texto y
comenzar a escribir JavaScript. Pero para
que ese código
tenga sentido o haga cualquier cosa, necesitamos que el
código esté disponible para un
entorno de tiempo de ejecución de JavaScript. Ahora hay dos entornos de tiempo de
ejecución principales que conforman la mayor parte
del uso de JavaScript, el navegador y NodeJS. Así podremos tener JavaScript
ejecutándose y completar alguna tarea usando ya sea
el navegador o nodo. Ahora bien, estos dos no son los únicos entornos
que podríamos usar, sino que son los más importantes
y los más prevalentes. Ahora hay algunas similitudes entre nodo y navegadores, y luego hay
algunas diferencias. Hablemos de esos brevemente. Primero, tanto un navegador como un nodo
es simplemente una aplicación. En cada caso, necesitan ser instalados en tu
computadora para poder utilizarlos. Instalamos Node
antes en el curso. Cuando inicio un navegador, en este caso Chrome, estoy iniciando esa
aplicación desde mi computadora. Ahora lo mismo es cierto con nodo. Simplemente lo usamos de manera diferente. Necesitamos usarlo desde el
terminal o símbolo del sistema. Y no solemos
usar una interfaz GUI. Por ejemplo, puedo acceder al
nodo escribiendo eso en. Y ahora tengo un prompt de nodo. Así es como uso nodo. Otra similitud es
que estas aplicaciones, es
decir, tanto el
navegador como el nodo, están escritas con el
mismo lenguaje informático. Ahora en el caso de Chrome y la mayoría de los navegadores por ese hecho, el núcleo de esa aplicación
está escrito en C plus plus. La GUI suele ser un lenguaje
diferente, pero el núcleo es C plus plus. Ahora, el núcleo de NodeJS también
está escrito en
C plus plus con algún
código JavaScript que actúa como envoltorio para algunos de
los comandos que usamos. El código. Esas dos
aplicaciones están escritas en el navegador y el nodo
es muy similar, pero eso no es lo que nos permite
usar JavaScript en cada uno
de esos entornos. Para que un entorno de tiempo de
ejecución JavaScript permita el uso de JavaScript, necesita algo para
interpretar el lenguaje, leer el JavaScript y
traducirlo para la computadora. Esa pieza muy importante se llama el motor JavaScript. Tanto un navegador como un nodo requieren un motor
JavaScript para poder usar JavaScript. Ahora el motor JavaScript es solo una pieza de
toda la aplicación. Hay muchas
otras piezas a un navegador y hay muchas
otras piezas a nodo. Echemos un
vistazo a un diagrama que ilustra el
entorno de tiempo de ejecución para nuestro navegador. Estas son todas las
piezas de las que vamos a estar hablando porque
interactuamos con ellas cuando usamos
JavaScript en el navegador. Entonces, si todo esto representa el navegador
y lo que contiene, podemos ver que hay
cosas que no están aparte del motor JavaScript, que se representa aquí arriba. A veces hacemos
cosas en JavaScript que hacen uso de partes de la aplicación del navegador
que no forman parte del motor JavaScript. Ahora bien, estas otras partes o piezas son algunas de las cosas que son
diferentes entre un navegador y conocidas. Por ejemplo, en un navegador, interactuamos con el DOM, ampliamente representado
aquí en las API web. Bueno, eso no es
algo que hagamos en Node. No hay DOM que
forme parte del nodo. Sin embargo conocido hace posible realizar otro tipo de tareas. Tareas que se
requieren en un servidor, como escribir un archivo en un
disco duro o iniciar un servidor. Esas son cosas que no
podemos hacer en un navegador. Entonces hay algunas diferencias. Echemos un vistazo a otra
diferencia realmente rápido. Entonces aquí en un navegador, si abro la consola, puedo mostrar ventana. Eso muestra el objeto de ventana. Este es el entorno global en el
que estamos escribiendo código. Cuando estamos escribiendo JavaScript
está dentro de la ventana. Y hay mucho
asociado con la ventana, que podemos hacer uso. Ahora nodo no tiene ventana. Si tecleamos ventana aquí, referencia
no capturada, nuestra
ventana no está definida. Sin embargo, podemos escribir global. Y sí obtenemos información
sobre global. Y esto sería el equivalente a Window en el lado del navegador. Ahora, claro,
va a haber similitudes. Por ejemplo, puedes ver
setTimeout aquí dentro de global. Settimeout también está disponible
en el navegador. puede ver que no está en
el motor JavaScript. En realidad es parte
de la API web. Lo mismo con nodo. No es parte del motor
JavaScript, pero tenemos acceso a él. Y podemos hacer algo
como console.log aquí. Y al igual que podemos
hacer en un navegador. Ahora, a lo largo de los siguientes
temas, vamos a estar
hablando de estas diferentes partes de un navegador ya que son
críticas para entenderlas. Con el fin de
escribir de manera efectiva, JavaScript. Node también tiene partes adicionales, pero nos centraremos
principalmente en el navegador. En primer lugar, vamos a hablar del motor
JavaScript.
3. Motor: En pocas palabras, el motor
JavaScript es un programa que ejecuta código
JavaScript. Entonces mirando nuestro diagrama, si tenemos algún código JavaScript, el
motor JavaScript está a cargo. Es la única pieza que sabe
qué hacer con el código. Lo traduce en algo que la
computadora pueda entender. Ahora, los motores JavaScript iniciales desde el principio eran intérpretes, lo que significa que procesarían el
código JavaScript línea por línea, lo
convertirían en bytecode para
que pudiera ejecutarse. Los intérpretes se dejan de fumar para
comenzar a ejecutar el código, que es algo
que se necesitaba en el entorno del navegador. Pero pueden ser
más lentos en general
en comparación con compilar el código. código compilado es
convertir el programa código de
máquina para que
se ejecute optimizado. Los últimos motores JavaScript
están mucho más optimizados. Utilizan una combinación de intérprete y justo a tiempo, compilación o compilador JIT
para optimizar el código. Esto consigue lo mejor
de ambos mundos. compilación de Jit toma frío que se puede optimizar
y la compila. Por ejemplo, si una pieza
de código se ejecuta mucho, se puede
compilar en código de máquina. Y entonces cuando ese
trozo de código sí se ejecuta, se optimiza y
por lo tanto más rápido. Ahora, hay una serie
de motores JavaScript. El que
probablemente sea el más conocido es el motor V8. Este es el motor
que se utiliza en el navegador Chrome
y también en nodo. Este motor fue escrito por Google para Chrome
usando C plus plus. Y es de código abierto. Probablemente sea el motor
más conocido porque cuando se construyó, mejoró la velocidad de
los motores JavaScript existentes. Google estaba usando
JavaScript para hacer algunas
cosas bastante increíbles en ese momento. Piensa en las
diferentes aplicaciones de Google escritas con JavaScript. En fin, querían
que fuera más performante. Entonces escribieron el motor V8
para lograr exactamente eso. Otros motores JavaScript
siguieron su ejemplo con el fin de
hacer que sus motores fueran más
para el rendimiento también. Esta mejora en el
rendimiento es importante para
estar al tanto de esta idea de usar un compilador JIT con un intérprete para
ayudar a optimizar el código. La razón por la que esto es
importante porque
hablamos de escribir código
ciertas formas de
hacerlo más rendimiento o evitar cosas en nuestro código que podrían hacerlo
menos rendimiento. Muchas veces tiene que ver con la forma en que el motor JavaScript maneja el código y es
capaz de optimizarlo. Ahora, aquí hay algunos otros motores
JavaScript que puede haber encontrado. Ya mencionamos a V8
que era de código abierto, eso fue desarrollado por Google. Se utiliza en Chrome y NodeJS. Mono araña. Este fue el primer motor
JavaScript, y hoy en día se usa en Firefox. Y por cierto, el primer motor
JavaScript fue escrito por Brendan Eich cuando
inventó JavaScript, y como dice la historia, lo
hizo en diez días. Ahora,
núcleo de JavaScript, eso también es código
abierto y eso fue
desarrollado por Apple para Safari. Entonces ese es el motor
que usa Safari. Otro que
probablemente deberíamos mencionar es el chakra. Y esto se usa
en Microsoft Edge. Así que el motor
JavaScript de Microsoft. Ahora, con todos estos diferentes motores
JavaScript en
diferentes navegadores, ¿cómo sabemos que
el código JavaScript que
escribimos funcionará de la misma
manera en cada navegador? Al principio de la historia de JavaScript, esto era un problema real. Hubo diferencias. En esos días. Pasamos mucho tiempo preocupándonos por
las diferencias en los navegadores. Bibliotecas como
jQuery ayudan a resolver ese problema y se hicieron muy
populares debido a eso. Ahora bien, debido a
estas diferencias, tenía que
haber
un estándar y es donde entra el guión Acme. Este es un estándar que
JavaScript sigue. Un script AGMA es una especificación que todos los motores
JavaScript siguen ahora. Esto permite múltiples implementaciones
independientes, pero asegura que nuestro
código funcione igual. Por lo que cuando se realizan cambios
en el estándar de guión, los indios deben ser actualizados
para apoyar estos cambios. Algunas actualizaciones son
más rápidas que otras. Y por eso tenemos
sitios como este. ¿ Puedo usar.com que nos
diga qué navegadores admiten
ciertas implementaciones? Así podemos ver el historial de diferentes navegadores
y cuándo empezaron a soportar módulos ES
en este ejemplo. Ahora bien, por eso también
hacemos uso del transpiler. Un transpiler como balbuceo, te
permite escribir código usando el estándar de
scripts Ekman más ligero, pero luego genera
código JavaScript a un estándar más antiguo. Entonces una forma anterior
de JavaScript que motores de navegador
más antiguos pueden ejecutar. Esto también se puede llamar
compilador porque técnicamente estás compilando código a otra forma y versión
anterior de JavaScript. Bien, así que eso es suficiente
sobre los motores JavaScript. Ahora necesitamos
entrar más en los detalles y hablar sobre el montón y la
pila de llamadas dentro de los motores. Estas dos cosas
se usan con frecuencia al
codificar en JavaScript, aunque quizás no lo
hayas sabido.
4. El montón de memoria y la pila: Ahora vamos a
sumergirnos en dos características
del motor JavaScript que
son importantes de entender, montón de
memoria y la pila de llamadas. Estos se utilizan durante toda la ejecución de
código. Primero voy a describir cada uno de ellos y luego los
veremos en acción para entender mejor cómo están involucrados
en la ejecución de código. Ahora, el montón de memoria, como su nombre indica, tiene que ver con la asignación de
memoria. Siempre que definas una función de objeto
variable, algo así en tu código, tiene que haber un
lugar para almacenarla. Entonces como estas variables aquí se
almacenarían en
el montón de memoria. Siempre que se
encuentre una declaración, como esta, el valor se coloca
en el montón de memoria, y luego la ubicación de ese valor se coloca
en la variable. Entonces, siempre que el código necesite ese valor o la función
o lo que sea que se almacene, usa la
ubicación de la memoria para buscarlo. Ahora la memoria tiene una cantidad
limitada de memoria, por lo que programas complejos que
tienen muchas variables y objetos
anidados pueden
masticar esa memoria. El motor JavaScript intenta hacer más memoria
disponible al
borrar datos del
programa que
determina que ya no son necesarios. Este proceso se llama
recolección de basura. Hay cosas que
puedes hacer como programador para ayudar en la recolección de basura. Y hay cosas que podrías
hacer que podrían obstaculizarlo. Veremos
esto con más detalle
en el tema sobre recolección de
basura. Pero por ahora,
hablemos de la pila de llamadas. Cada vez que ejecutamos código, se usa
la pila de llamadas. Es simplemente un lugar en memoria que realiza un
seguimiento de la función ejecutándose y las funciones que se van a
ejecutar después de eso. Entonces el orden en que se ejecutan estos
comandos. Ahora, cada función se coloca encima de la función
anterior. Entonces la primera función en está en la parte inferior
de la pila de llamadas. Y entonces como se llaman otras
funciones, se colocan encima de ella. Entonces, la pila de llamadas sigue un enfoque de
primero en entrar, último en salir. Ahora tan pronto como se complete la función o comando se
elimina de la pila de llamadas. Ahora, como puede ver
en el diagrama, solo
se representa una sola pila de
llamadas. El motor JavaScript solo tiene una pila de llamadas para tratar con
los comandos que se están ejecutando. Eso se debe a que JavaScript
es de un solo hilo, un término del que quizás hayas oído hablar. Ahora, un solo hilo significa
que el motor JavaScript
solo puede ejecutar una parte
del programa a la vez. Entonces la pila de llamadas trata
con un comando a la vez. Y como resultado de esto,
JavaScript es sincrónico. Los comandos solo se pueden
ejecutar uno a la vez. Probablemente puedas ver un
posible problema con esto. ¿ Y si invocamos
una función que requiere mucho tiempo para ejecutarse? ¿ Cómo podemos evitar que eso
bloquee otro código? Por ejemplo, queremos que un
usuario pueda hacer clic en un botón y no tener que esperar dos segundos
para que termine algún JavaScript antes de que pueda
responder a ese botón. Ahora, nos sumergimos en
cómo se maneja esto y cómo lo maneja
el motor JavaScript cuando
hablamos del bucle de eventos. Y esta es también la razón por la
que es importante
entender los patrones asíncronos de JavaScript
en JavaScript. Y esa es una de
las partes críticas con las que tratamos
en este curso. Ahora bien, en nuestro diagrama,
como pueden ver, tenemos algún código muy sencillo. Vamos a recorrerlo con el montón de memoria
y la pila de llamadas ilustran cómo se usan
esos para moverse por el código. Básicamente lo que estamos
haciendo es que estamos declarando dos
variables, a y B. Entonces tenemos una
función declarada. Y entonces aquí invocamos
esa función. Dentro de la función, llamamos registro de consola. Llamamos setTimeout y pasamos
una función a setTimeout. El tiempo para eso
es de 0 milisegundos. Y luego volvemos a llamar al registro de la
consola. Entonces pasemos por esto. Primero tenemos las declaraciones
de variables. Y así cada uno de
esos van a ser colocados en el montón de memoria. Hay 1 segundo. Ahora no hay
un orden específico en cómo se colocan en el montón. Solo necesitan una referencia dónde se encuentra ese valor. Entonces tenemos nuestra función. Y eso va a necesitar ser colocado en el montón también. Y ahí lo hemos agregado
al montón de memoria. Ahora bien, si hubiera alguna variable declarada dentro
de esa función, esas necesitarían
ser colocadas ahí. O si hay funciones
declaradas en su interior,
si hay otras cosas dentro que necesitan
entrar en el montón de memoria, eso tendría que suceder. Pero ahora nos encontramos. El llamado a helloworld a esa función.
Loestamos invocando. Entonces el motor JavaScript toma ese código de su ubicación de
memoria, y luego es capaz de comenzar
a
ejecutarlo usando la pila de llamadas. Entonces la
función hello-world se coloca en la pila de llamadas que
indica dónde estamos dentro de
la ejecución del código. Entonces ahora mismo estamos dentro
de la función helloworld. Llegamos al primer
comando ahí dentro, y eso es una llamada
a console.log. Así que nuestra
consola invocando el registro de puntos y eso se coloca
en la pila de llamadas. Ahora podemos
completar ese comando. Y así una vez que ese
comando
está completo, se elimina de
la pila de llamadas y podemos continuar. Y llegamos a establecer timeout y setTimeout se agrega
a la pila de llamadas. Sin embargo, setTimeout
es algo que forma parte de la API web, como puedes ver aquí. Entonces JavaScript no necesita
hacer nada con eso. Entonces básicamente se deshace de él. Lo envía al
navegador y dice, Aquí, tengo que
llamar al setTimeout. Aquí está la información. Sigue adelante y
cuídalo. Y luego al
motor JavaScript se olvida de ello en ese momento, la API web, configuraremos un temporizador para
ese setTimeout y se
encargará de todo lo que necesite ser manejado con setTimeout. Pero en este punto,
el motor JavaScript simplemente
se olvidó de él. Ya no le
preocupa. Simplemente continúa
al siguiente comando, que es otro
colega, console.log. Y así eso se agrega
a nuestra pila de llamadas. Podemos encargarnos
de eso de inmediato. Enviamos un mensaje
a la consola, que pasa a ser mundo. Y entonces eso se elimina
de la pila de llamadas. Y entonces en ese punto estamos
al final de la función
hello-mundo. Y así eso se elimina
de la pila de llamadas. Ahora, puedes ver cómo la pila de llamadas podría
construirse con una
serie de cosas. Si tuviéramos funciones llamadas
dentro de otras funciones. Y entre más
funciones anidadas así, más cosas
se van a agregar a la pila de llamadas. Y vamos a construir
sobre esa pila de llamadas. Porque hasta que una
función regrese, hasta que se complete,
no se puede quitar
de la pila de llamadas. Ahora con toda esta
ilustración, dejé SetTimeout por ahí y dije que el
motor JavaScript simplemente se olvidó de ello. Bueno, vamos a hablar eso cuando lleguemos al
tema en el bucle de eventos,
porque realmente es
el bucle de eventos y la cola de mensajes
los
que tratan con eso, los
que tratan con estos elementos de la API
web. Entonces lo discutiremos
en otro tema. Pero antes de pasar
al siguiente tema, quiero abordar
algo que podamos encontrar con la pila de llamadas
se llama Stack Overflow. Y esta es una
condición con la que quizás te hayas
topado con tu codificación. Esto ocurre cuando la pila de
llamadas se llena porque no puede eliminar comandos y se siguen
agregando más a ella. Mencioné que las funciones
anidadas podrían agregar mucho a
la pila de llamadas. Bueno, se necesita bastante
para la pila de llamadas se llene. Pero cuando sí se llena, provoca un error. Ahora, podemos simular esto con bastante facilidad con una llamada recursiva. Ahora, la recursión es simplemente cuando
una función se llama a sí misma. Y hay algunas
situaciones en las que este es un
patrón ventajoso en JavaScript. Pero quiero
mostrarte los efectos de lo que hace en la pila. Entonces, sigamos adelante y configuremos una función que lo
ilustrará. Este archivo JavaScript se
adjunta al archivo HTML. Este de aquí que estamos
viendo anteriormente. Sólo voy a ponerle una función y llamarlo auto ramus. ver qué pasa. Entonces déjame llamarlo recursión. No es necesario
llamarlo así, pero voy a hacer eso porque
voy a estar llamándolo. Y entonces voy a establecer
el número que se pasa igual a sí mismo más a sí mismo, algo sencillo así. Y entonces aquí es donde ocurre
la recursión. Nos invocamos desde adentro. Entonces piensa en lo que
va a hacer esto. La pila de llamadas. Vamos a llamar a recursión va a colocar la
recursión en la pila de llamadas se va a
bajar a esta línea. Y se va
a llamar de nuevo a la recursión, pero la función no se
ha completado, por lo que no se elimina
de la pila de llamadas. Otra invocación de eso
se agrega a la pila de llamadas. Y así sigue
agregando recursividad a la pila de llamadas hasta
que se acumula hasta el punto de que ya no
puede agregar. Y ahí es donde obtenemos
ese desbordamiento de pila. Déjenme seguir adelante e invocar esto. Va a pasar en el número uno. Eso lo guardaremos. Ahora como acabo de tener eso
adjunto a este archivo HTML, sólo
voy a refrescar
eso y ver qué pasa. Abramos la consola
y veamos qué tenemos ahí. Tenemos un rango de aire sin captura. Nuestro tamaño máximo de
pila de llamadas excedió. Este es el aire
que recibiríamos. Si tuviéramos un desbordamiento de pila. superó el
tamaño máximo de la pila de llamadas, y eso es lo que
estamos consiguiendo allí. Ahora bien, este es un
problema sencillo de resolver. Todo lo que tenemos que hacer
es asegurarnos de que eventualmente las funciones comiencen a completarse, que regresen. Y luego puede
eliminarlos de la pila de llamadas. Eventualmente eliminarlos todos de la pila
de llamadas de calavera. Veamos cómo se podría hacer
eso. Digamos que si el número es
mayor que y sólo voy a
poner aquí un número grande. No tengo idea de
lo grande que va a ser, pero si es mayor que eso, entonces solo voy a
iniciar sesión en la consola. Quiero ver qué tan
grande es el número, solo por diversión. Y luego voy a regresar. Entonces aquí es donde estamos
regresando de esta función. Entonces completará la
función, volvemos aquí. No va a hacer esto otra vez. Y completará esa
función en la que estamos. Y así entonces
desenrollará la pila de llamadas, cada una de esas funciones. Finalmente llegaremos a regresar porque llegará al
final de la función. Y así el hecho de que la última vez que llamamos a
esto, donde el, donde num es mayor que esto, que obliga a un retorno, no llama a otro. Y así todos esos otros
que están en la pila de llamadas llegan a completarse también. Y así entonces no obtenemos
ese desbordamiento de pila. Muy bien, veamos
eso solo una vez más. Voy a refrescarme aquí. Quiero recordar que
no es cada vez más grande si no lo vuelvo a pasar cuando
llamo a esa función. Así que quiero asegurarme de que
se está haciendo más grande. Ahí vamos. Ahora nos un número muy grande sale
un número muy grandey ya
no estamos recibiendo el desbordamiento de pila porque
fue capaz de regresar. Y luego desenrollar todas esas llamadas a funciones
que están en la pila. Entonces a eso nos
referimos cuando hablamos de
StackOverflow. Muy bien,
pasemos al siguiente tema.
5. Colección de basura: En el tema anterior, mencionamos la recolección de basura en relación con
el montón de memoria. En un lenguaje como C, tenemos que asignar
y liberar memoria. No vamos así en JavaScript, pero aún tiene que haber un mecanismo para
recuperar memoria. Así que no nos quedamos sin
memoria y fallamos el sistema. Javascript se encarga de
recuperar la memoria por nosotros. Una vez que una pieza de información, un objeto o variable, está fuera de contexto y ya
no se utilizará. Se recupera la memoria, por lo que se puede reutilizar. A esto se le llama
recolección de basura. Echemos un vistazo a cómo funciona
eso en el motor. recolección de basura se
lleva a cabo en el montón de memoria y utiliza
lo que a veces se llama algoritmo de marca y
barrido. Determina los
objetos que se pueden eliminar de
manera segura del calor de
la memoria
determinando qué cosas son alcanzables y cuáles
son inalcanzables. Y luego barre a través de
aquellos que son inalcanzables. Están barridos y
ese recuerdo es reclamado. Echemos un
vistazo a cómo funciona. Ahora, el recolector de basura
comienza con el objeto raíz o global y se mueve a los objetos referenciados por ellos. Y se mueve de un
objeto a otro, identificando cosas a las que
hace referencia otra cosa. Entonces, básicamente, esas cosas
que son alcanzables, esas cosas que no son
alcanzables ahora están definidas. Y entonces todo lo
que es inalcanzable, ahora
vemos algunas cosas que no
están vinculadas o no alcanzables. Todo lo que es
inalcanzable está despejado. Atraviesa y los
barre. Se han ido. Esa memoria ahora puede ser recuperada y utilizada
para otra cosa. Ahora bien, como notó
en nuestra explicación, el orden para que la información
sea
liberada y recuperada no debe estar conectada a nada que esté
sucediendo
actualmente en el programa inalcanzable. Si bien es posible nuestra codificación
evite que las cosas se recuperen, aunque
ya no las estemos usando. Esto se llama fuga de memoria. Las fugas de
memoria son partes de la memoria que la aplicación necesitaba y usó en el pasado
y ya no se necesita, pero su almacenamiento aún no se
devuelve al grupo de memoria. A pesar de que la
recolección de basura se maneja para nosotros. Como hemos visto, todavía
necesitamos ser cautelosos con la administración
de la memoria. Las fugas de memoria pueden hacer que los programas
JavaScript fallen
al usar toda
la memoria disponible. Veamos algunas cosas comunes que pueden provocar fugas de memoria. Entonces, antes que nada, las variables globales. Si sigues creando variables
globales, éstas se
quedarán a lo largo de
la ejecución del programa, aunque no sean necesarias. Si estas variables son objetos
profundamente anidados, se puede desperdiciar mucha memoria. No eliminar los oyentes de eventos
que ya no son necesarios. Como un ejemplo de cómo puede suceder esta cosa en
particular. Podrías crear muchos oyentes
de eventos para una
página o ubicación en particular. Y luego cuando el
usuario pasa de eso, donde esos oyentes de eventos
son largos, ya no es necesario. Tú como programador,
no los elimines. Siguen ahí. Todavía están tomando memoria, especialmente para los objetos a los
que están vinculados. Entonces algo a tener en cuenta. El tercer ítem, intervalos de
tiempo poco claros. Ahora bien, establecer intervalo es un
buen ejemplo de esto. Y si no has
usado set interval, básicamente lo que
hace es que te
permite ejecutar algún código y
otra vez en
base a una cantidad de tiempo establecida. Ahora, veamos un ejemplo realmente
rápido de éste. Sólo voy a
llamar a establecer intervalo. Y establecer intervalo toma como
primer parámetro una función. Esta es una función de devolución de llamada. Así que cada vez que expira el
intervalo, la cantidad de tiempo
que ingresamos invoca esta función de
devolución de llamada. Entonces voy a
configurar una función aquí. Y entonces el segundo
parámetro es la cantidad de tiempo en milisegundos que ocurre
cada intervalo. Entonces, cada 200 milisegundos, esta función va
a ser invocada, ¿de acuerdo? Ahora, donde esto puede
convertirse en un problema, digamos dentro de aquí, hacemos referencia al
número de objetos. Esos objetos son, están
siendo referenciados ahí. A veces es algo
que se hace con animación o
algo así. Pero si esto nunca se borra, si no
se borra este intervalo establecido, obviamente
estas referencias seguirán siendo válidas. Y así nunca
podrá liberar esa memoria aunque ya
no esté siendo utilizada. Entonces un mejor acercamiento al problema del intervalo
establecido es declarar un ID y lo configuramos igual a setInterval que
colocará un ID dentro de aquí. Entonces, cuando hayamos terminado, debemos asegurarnos de que tenemos intervalo
claro con ese
ID, algo así. Bien, una cosa más
tenemos que mencionar, y eso se eliminan los elementos DOM. Si en tu programa eliminas
elementos del DOM. Pero estos elementos
siguen siendo referencia, como con un oyente de eventos. Hablamos de eso antes, o de alguna otra manera, no se va a liberar la
memoria. Algo más a tener en cuenta. Ahora, volveremos a visitar algunos de estos y otros
lugares del curso para que tengas un recordatorio de las
mejores prácticas para
evitar fugas de memoria. Todas estas cosas de las que hemos
hablado pueden
sumar y las fugas de memoria
seguirán tomando cada vez
más memoria. Si su programa
se ejecuta el tiempo suficiente, eventualmente
podría fallar
por falta de memoria. Aunque no se caiga, debes asegurarte de evitar fugas de
memoria y no solo depender de la recolección de basura
para salvar el día. Bien, pasemos
al siguiente tema.
6. Cómo eliminar los escuadrones de eventos: En este segundo tema
sobre recolección de basura, quiero ampliar algunas de
las técnicas que son específicas de los navegadores mencionados
en el tema anterior. En concreto,
voy a abordar cómo eliminar los
oyentes de eventos y JavaScript. No todos los desarrolladores de JavaScript están familiarizados con esta característica, pero es fundamental cuando se
habla de recolección de basura. Así que quería insertarlo aquí. Ahora, si estás codificando
para el navegador, entonces estarás trabajando
con el amanecer. El DOM es la abreviatura de
Document Object Model. Se trata simplemente de una
interfaz que permite a
JavaScript
manipular el contenido, estructura y el estilo
del documento HTML. El documento HTML se representa utilizando nodos y objetos para que el programador pueda interactuar y trabajar con cada elemento de la
página HTML. Existen numerosos comandos
para trabajar con el DOM. Cubro estos en detalle en mi
curso Getting Started y he incluido algunos de estos
temas en el apéndice. Si necesitas revisar. He incluido información
sobre el DOM y comandos para seleccionar y trabajar
con elementos DOM. Bien, ahora volvamos
al tema que nos ocupa. Si ha adjuntado un listener de eventos a un
objeto o a un elemento DOM, y ese evento ya
no se utilizará. Es una buena práctica
eliminar al oyente. Entonces echemos un vistazo al ejemplo. Echemos un vistazo al código
HTML de esta página, que estoy mostrando actualmente. Aquí está, como pueden ver, es una página HTML bastante simple. Tenemos un título en el encabezado, tenemos algunos CSS. Entonces en el cuerpo aquí
tenemos algunas etiquetas div. Y lo que quiero hacer
es adjuntar un oyente de eventos
a esta etiqueta div aquí que tenga un ID de título. Entonces, si echamos un vistazo a
nuestro código JavaScript, como puedes ver, este app.js se adjunta a este archivo HTML. Aquí hemos declarado
algunas variables. Ahora, solo estoy haciendo esto de manera simplista para
mostrar un ejemplo aquí. Así que he usado algunas variables
globales porque es muy sencillo. Yo no, no me estoy tomando el tiempo para hacerlo
de otra manera. Sólo quiero
mostrar este ejemplo. Entonces tenemos algunas
variables globales aquí. Una es cuenta y otra
es una variable de título que almacena ese div que
tiene un ID de título. Así es como lo selecciono ahí. Entonces vamos a agregar un oyente de
eventos a eso. Entonces vengo aquí y simplemente
tomo esa variable
ahí, agrego oyente de eventos. Y tenemos que indicar
qué evento es. Es un evento click como
uno que queremos usar. Y ahora, ¿a qué función se le
va a llamar Eso es título? Haga clic en esta función aquí. Ahora a veces puedes agregar oyentes de
eventos con funciones
anónimas, donde declaras la
función aquí mismo, en lugar de declararla
antes de declararla dentro del
listener de eventos add. Y eso está bien. Pero debes tener en cuenta
que si haces eso, no
puedes eliminar el oyente de eventos es un caso en el que es posible que
necesites eliminarlo, entonces deberías hacerlo de esta manera. Bien. Hablaré del
motivo de eso en tan solo un minuto cuando
lleguemos a ese punto. Pero primero,
asegurémonos de que esto esté funcionando.
Voya salvar eso. Ya tengo el
servidor virtual ejecutándose en esa página. Así que sólo voy
a cambiar el tamaño de esto. Y vamos a mostrar la
consola para que podamos ver el mensaje de registro de la consola
cuando haga clic en el título. Y como podemos ver que
aparece y el contador va incrementando y contando
tantas veces se le ha hecho clic. Bien, así que bastante simple. Hemos agregado el
EventListener ahí. Ahora veamos cómo
eliminaríamos ese oyente de
eventos. Entonces digamos aquí arriba, queríamos quitarlo
una vez que el conteo fuera
mayor a cinco. Así que vamos a
hacerlo rápido. Si declaración. Si el conteo es
mayor a cinco. Bueno esa es una
situación en la que vamos a
eliminar al oyente de eventos.
Yaquí está el comando. Tenemos que usar el mismo objeto al que está unido el
oyente de eventos. En este caso, es
un elemento DOM. Entonces mareas punto y
luego el comando es remove event,
listener, así. Ahora esta parte dentro de los
paréntesis aquí tiene que coincidir con lo que teníamos aquí
abajo cuando
configuramos el EventListener. Y por eso digo que cuando usarías la función
anónima, no
puedes conseguir que eso funcione. Es necesario declarar la
función de antemano. Entonces estas cosas son lo mismo. E incluso si declaras
opciones o usas captura, cualquier otra cosa, cuando
configuras el AddEventListener, necesitas incluirlos aquí necesitas incluirlos aquítambién para eliminarlos. Ese es uno de los requisitos de este comando remove event
listener. Bien, así que sigamos
adelante y guardemos eso. Eso refrescará la página. Se puede ver que esos
mensajes desaparecieron. Ahora si empezamos a darle clic, cuenta, cuenta, conseguiremos seis. Ahora debería ser removido. Ahora le estoy dando click
y no pasa nada. Ese oyente de eventos fue eliminado. Entonces ese es básicamente el proceso de eliminar un oyente de eventos. Queríamos cubrirlo
aquí porque estábamos hablando de recolección
de basura. Bien, sigamos adelante.
7. Lazo de eventos: Ahora antes de terminar hablar del motor
JavaScript, necesitamos hablar
del bucle de eventos. Hasta este punto, hemos establecido que
JavaScript es de un solo hilo. Sólo tiene una pila de llamadas. Sólo puede hacer una
cosa a la vez, por lo que es sincrónico. Sin embargo, JavaScript nos permite
hacer codificación asíncrona. Un ejemplo sencillo de eso es agregar un botón a una página HTML. Podemos estar ejecutando
algo de JavaScript. El usuario hará clic en el botón y nosotros podremos responder
a ese clic. Porque tenemos JavaScript
ejecutándose haciendo otra cosa. No impide que el usuario
haga clic en ese botón. Eso por supuesto,
sería una experiencia horrible
en un navegador. Otro ejemplo es
si estamos tratando obtener algunos datos
de una base de datos, hacemos esa llamada a la base de datos y luego
podemos hacer
otra cosa mientras estamos
esperando que los datos regresen. No tenemos que
sentarnos a esperar
esos datos antes de
hacer otra cosa. Y eso bloquearía otro procesamiento de
JavaScript. Podemos hacer otra cosa. Y entonces cuando los datos regresen, podemos actuar sobre esos datos. Podemos lograr esta codificación
asíncrona en JavaScript debido al bucle
de eventos. En el escenario anterior, el comando setTimeout fue
manejado por la API web. Y lo mencioné En ese punto, el motor JavaScript
se olvida por completo de ello. Bueno, una vez que se realiza ese evento de
timing, una vez que la API web
termina en el evento timing, ¿cómo se vuelve a
integrar eso en la pila de llamadas para que se haga
la tarea que queremos
completar? Por ejemplo, si recuerdas, tenemos una función de devolución de llamada
como parte del setTimeout. ¿ Cómo
devuelve esa función de
devolución de llamada al motor JavaScript? Repasemos de nuevo ese escenario
anterior, pero esta vez incluiremos
el bucle de eventos. Una vez más. Aquí está nuestro código,
aquí está nuestro setTimeout. Y fíjate que tenemos
una función aquí. Toda la función tiene dentro de ella como una
instrucción de registro de consola, eso es todo. Los milisegundos se establecen en 0, por lo que el temporizador debe
caducar inmediatamente. Pero veamos qué pasa. Hemos llegado al punto en que se invoca
la
función hello-world. Entonces sigamos
caminando por eso. Entonces tenemos la invocación de la función hello-world que
se agrega a la pila de llamadas. Y entonces comienza a
trabajar a través los comandos dentro de
esa función. Y así el primer
comando que encontramos es una instrucción de registro de consola
y va a registrar la variable a a la consola. Y así eso se agrega
a la pila de llamadas. Se encarga de
esa declaración de registro. Vemos hola en la consola. Y luego
se elimina el comando console log de la pila de llamadas. Y luego nos movemos
en esa función, nos encontramos con el setTimeout. Ahora, el motor JavaScript sabe que setTimeout es
manejado por la API web, lo que se envía
allí para ser tratado. Entonces la API web configura un temporizador. Tiene la capacidad de
ejecutar un temporizador. Y ese temporizador
expira inmediatamente porque no hemos ajustado
a 0 milisegundos. Y así cuando expira el temporizador, ¿qué hace con
esa función de devolución de llamada? Eso es lo que se supone que debe hacer ese
temporizador. Y entonces lo que hace es agregar la función de devolución de llamada
a la cola de mensajes. Ahora esa
función de devolución de llamada se sentará en la cola de mensajes y es en este punto el
bucle de eventos entra en juego. El ciclo de eventos
continuará circulando. Estará revisando la
pila de llamadas y verá si está vacía. Ahora mismo. trabajando en la función
hello-world. Entonces no está vacío, sino en ciclos y
sigue buscando escena. Si está vacío. Si está vacío, entonces
agregaría el siguiente elemento disponible en la cola de mensajes
en la pila de llamadas. Pero ahora mismo no está vacío, así que necesitamos continuar con
la función hello-mundo. ¿ Qué es
lo siguiente que surge? Bueno, es otra instrucción de registro de
consola, así que eso se agrega
a la pila de llamadas. Y seguimos adelante y completamos esa declaración de registro de consola World se imprime en la consola. Y para que esa sentencia de
registro de consola se elimine de la pila de llamadas. En este punto hemos
terminado con la función hello-world que también se elimina de la pila de
llamadas. Entonces como mencioné,
el bucle de eventos está ciclando y comprobando
la pila de llamadas. Entonces en cheques y lo
ve, está vacío. Luego toma el siguiente elemento en la cola de mensajes y
lo agrega a la pila de llamadas. Y así sacamos esa función
anónima, esa función de devolución de llamada, fuera
de la pila de llamadas y comienza a trabajar a través de lo
que esa función necesita hacer. Lo único que contiene es
una instrucción de registro de consola. Encuentra esa sentencia de registro de
consola y la agrega a la pila de llamadas. completa la
instrucción de registro de la consola. imprime un signo de
exclamación la consola que se elimina
de la pila de llamadas. Ese es el final
de esa función, y esa función también se elimina
de la pila de llamadas. Y así en este punto en
la pila de llamadas está vacía, no
queda nada que agregar
desde la cola de mensajes. Y así simplemente estamos
esperando un número, otro comando de JavaScript
que necesita ser ejecutado. Bien, ahora antes de que
terminemos, permítanme destacar algunos puntos importantes
de esta discusión. Primero, otras partes
del entorno JavaScript
pueden manejar ciertas tareas. Por ejemplo, aquellas tareas
que pertenecen al navegador. El motor JavaScript no
tiene que procesarlos. Nosotros, en este ejemplo usamos la API web para manejar
ese comando setTimeout. Pero las devoluciones de llamada que forman
parte de lo que se maneja allí se integran de nuevo en el motor usando
el bucle de eventos. extrae de
la cola de mensajes y los agrega a la pila de llamadas. Logramos
JavaScript asincrónico de esta manera. El bucle de eventos es crítico
para que eso suceda. Otro punto importante,
una vez que se agrega una devolución de llamada
a la pila de llamadas, el código es manejado
por la pila de llamadas como lo sería normalmente si el código JavaScript no hubiera venido de la Q, no no importa. Se va a procesar ese
JavaScript de la misma manera. A continuación, un recordatorio,
el bucle de eventos está constantemente buscando
elementos en la cola. Y si la pila de llamadas está vacía, si la pila de llamadas está vacía y hay algo
en la cola, agregará el
siguiente elemento disponible de la cola a
la pila de llamadas. Y como se mencionó, la pila de
llamadas es de un hilo, por lo que es sincrónica. Solo puede hacer una
cosa a la vez, pero su interacción
con el bucle de eventos y la API web permite la codificación asíncrona que
podemos lograr en JavaScript. Muy bien,
pasemos al siguiente tema.
8. Entorno de tiempo de ejecución: Dado que NodeJS es una
implementación
tan ampliamente utilizada de JavaScript, creo que es
importante
mirar brevemente su entorno de tiempo de ejecución, especialmente en relación con
el bucle de eventos y cola de
mensajes que de lo
que acabamos de hablar. Este artículo aquí cubre algunos de los entresijos del entorno
Node.JS. Y aquí está la URL
de este artículo. Puedes leerlo
tú mismo si quieres. Pero quería tomarme
un momento y mirar el diagrama que proporciona del entorno
de tiempo de ejecución. Entonces si nos desplazamos un poco hacia abajo aquí, aquí mismo, el nodo JS Runtime. Ahora bien, algunas de estas cosas las
vas a reconocer, por
ejemplo, V8, aquí está el motor V8 y
está manejando el JavaScript. Eso es lo que hace.
Observela cola de eventos, nombre
diferente pero similar
a la cola de mensajes. El bucle de eventos
también es parte de esto. Con el fin de manejar las cosas
en la cola de eventos. Esta parte aquí en vivo, podría pensarse
como similar a la API web va a manejar cosas que NodeJS necesita hacer. Eso no lo hace JavaScript, lo hace el entorno
fuera de él. Por lo que el motor V8
sigue siendo de un solo hilo, todavía tiene una pila
de llamadas, pero puede aprovechar otras cosas. Y ejecutándose en un servidor, hay una serie de
cosas diferentes que hacer y eso va
a ser manejado aquí. Ahora sabemos que GIS sí
tiene algunos comandos que son similares a lo
que vemos en el navegador. Por ejemplo, setTimeout,
set interval, ambos están disponibles
y NodeJS también, no
son manejados
por el motor V8, igual que
no están en un navegador. Están manejados por aquí. Y así hay
algunas similitudes. Pero porque es un entorno
diferente, porque el tiempo de ejecución
es diferente. Se manejó de
diferentes maneras, pero los conceptos
son transferibles. Entonces, una vez más,
puedes leer más sobre esto en este artículo
si así lo eliges. Pero sí quería hacer el punto del bucle
de eventos y las
similitudes entre NodeJS y el
entorno de tiempo de ejecución manejado en un navegador. Bien, pasemos
al siguiente tema.
9. Iniciación de ejercicios: pila de llamadas y lazo: Así que quería hacer un
pequeño ejercicio divertido como parte de esta sección, una oportunidad para explorar
un poco
la pila de llamadas y el bucle de eventos. Ahora, con todos mis cursos, siempre
tengo ejercicios lo largo de ellos porque
creo que es importante a
lo largo de ellos porque
creo que es importante
que realmente
hagas cosas para aprender que hacer las cosas tiene que ser por
tu cuenta en tiempos. Y así es donde entran
los ejercicios. La forma en que los hago es que tengo un video inicial
presentando el ejercicio. Y luego sigues
adelante y pruébalo. Y luego cuando estés listo,
vas al siguiente tema. Y nosotros pasamos por ese ejercicio. Esa es generalmente la estructura. A veces hacen las cosas
un poco diferentes, pero esa es generalmente
la estructura. Entonces, sigamos adelante
y echemos un
vistazo a lo que me gustaría que
hicieras para este ejercicio. Muy bien, los archivos
para el ejercicio, y específicamente el archivo
JavaScript App.js. Tengo un código aquí
y déjame
explicarlo muy rápido y luego te
indicaré lo que
me gustaría que hicieras. Así que aquí estamos
creando una matriz, y estamos creando una matriz
con 10 mil elementos. El número que he usado
en el constructor, el constructor de matriz
ahí mismo. Y luego usamos el método fill de arrays para rellenar
eso con unos. Y así básicamente
crea un array con una longitud de 10 mil que
tiene unos en todos ellos. Eso es lo que estamos haciendo aquí. Entonces tengo un poco de
función, lo llamo pop it. Básicamente todo lo que
hace es simplemente sacar un valor cada vez que se llama
a la función desde esta matriz aquí. Y luego lo invocamos. Y note que tenemos recursión aquí porque comprueba
la longitud de la matriz. Si la longitud es
aún mayor que 0, lo que significa que todavía hay
elementos en esa matriz, entonces se llamará a sí mismo de nuevo, lo
que hará que
salga de otro elemento. Eso es recursión que estamos haciendo. Y como recuerdas cuando
hicimos recursión antes, somos capaces de
desbordar la pila. Y entonces lo que me gustaría que
hicieras es ver qué número se requiere para provocar
un desbordamiento de pila. Si 10 mil te funcionan
, entonces genial. Pero puede que no. Y así solo juega con esa
cantidad de pujas, un poco divertido solo para
ver qué va a hacer que eso se desborde. Y luego la segunda
parte del ejercicio, una vez que te desborde esa
pila, ¿cómo puedes cambiar esto? ¿ Cómo puede hacer que esto use el bucle de eventos para que la
pila no se desborde? Así que una idea interesante, aprovechando algo
que está disponible en
el entorno de tiempo de ejecución para que no
desbordemos la pila, pero aún así podemos usar
ese mismo número que estaba desbordando la pila. Así que dale, pruébalo. Obviamente, no te he enseñado comandos
específicos
para que hagas esto, aunque has visto algunos
ejemplos ya que hemos estado revisando diferentes
conceptos en esta sección. Pero pruébalo
con lo que sabes. Y luego, cuando estés
listo, pasa al siguiente tema y
nosotros lo repasaremos.
10. Fin de ejercicio: pila de llamada y lazo: Bien, echemos un
vistazo a este pequeño
ejercicio divertido de aquí. Entonces ahora mismo, 10 mil, así
es como hay en esta matriz. Veamos si esto
provoca un StackOverflow. Así que voy a seguir adelante y servir esto y ver qué obtenemos. Entonces voy a saltar
al archivo HTML y luego hacer clic en Go Live. Y luego saltó a la consola. este momento no estamos viendo
ningún error para StackOverflow. Entonces eso parece
estar funcionando bien. Así que saltando de nuevo a
Visual Studio Code, solo
voy a
reducir un poco el tamaño de esto
para que podamos seguir adelante y ver el registro de la consola
mientras jugamos con esto. Entonces vamos hasta,
vamos a ir 10 mil 500. Veamos qué pasa ahí. Entonces voy a cambiar ese
número ahí, guardarlo aún. Bien. Vamos a ir a 11 mil. Voy a salvarlo. Y todavía no tengo
ningún problema. Entonces tal vez
necesitamos saltar más. Vamos 13 mil todavía. Bien, vamos 15 mil. Y ahí nos sale un desbordamiento. Entonces no sé cuál es
el número exacto, pero eso no era realmente lo que
quiero lograr aquí. Yo solo quería darte la oportunidad
de jugar con este desbordamiento de pila y ver que eventualmente en algún momento, provocará
que se supere el
tamaño de la pila. Entonces tenemos aquí el rango de aire
sin atrapar. Bien, entonces ahí está el
aire que estamos buscando. Ahora. ¿Cómo podemos cambiar esto? Así que todavía podemos mantener este
número y aún así poder ejecutar este recursivamente y sacar todos estos
elementos de la matriz. Bueno, para
aprovechar el bucle de eventos, podemos usar la API web, podemos usar setTimeout para realmente invocar esta
función nuevamente. ¿ Bien? Entonces, en lugar de
llamarlo recursivo, recursivamente de inmediato,
podemos usar setTimeout para invocarlo. Y así la forma en que lo haríamos, setTimeout, y luego
pasamos en la función. Ahora no incluimos
los paréntesis en este punto porque eso
hará que se invoque enseguida. Simplemente pasamos en la función
y luego la invocará una vez
que el temporizador haya caducado. Entonces vamos a poner
un 0 después de eso por 0 milisegundos que
queremos invocar enseguida. Y así que aquí está nuestra nueva configuración. Sigamos adelante y guardemos eso y veamos qué pasa aquí abajo. Fíjate que no estamos
recibiendo el aire. Sigamos adelante y echemos
un vistazo a la matriz, veamos cuántos quedan. Bajamos a 13.600. Entonces así es como muchos
han reventado. Entonces, obviamente, ya que estamos
usando el bucle de eventos, estamos usando la
API web con setTimeout. Con el fin de reventar estos. Está tardando más
en
eliminarlos todos porque tiene
que configurar ese temporizador. Entonces pone
algo en cola. Y entonces ese elemento
de la cola se
coloca entonces en la pila de llamadas
y luego se saca. Y está haciendo eso
una y otra vez. Así que vamos a
verlo en su contra y lo hemos reducido a oh, ya
bajamos 67
mil o 6700. Entonces se está moviendo a través de
ellos, pero es un poco ordenado. Se puede ver que hace esto porque lo está haciendo
mucho más lento. Pero fíjate que no está bloqueando. Puedo introducir cosas aquí en la consola y
no estoy bloqueado de hacer otras cosas en JavaScript. Entonces esa es la ventaja de el bucle de eventos
funcione para nosotros ahí. Echa un vistazo más, casi listo. Y para cuando presiono
Retorno, ya estaba hecho. Así que ahora se ha
limpiado de esa matriz. Así que solo un pequeño ejercicio divertido
para explorar la pila de llamadas, un bucle de eventos un poco. Bien, pasemos
al siguiente tema.
11. Cómo evoluciona JavaScript: Como desarrollador de JavaScript, es importante
entender cómo evoluciona y cambia
JavaScript. Porque eso es algo que es definitivo en el mundo
JavaScript. Está en constante evolución. Cuando empecé a usar
JavaScript hace muchos años, no se
parecía en nada al
lenguaje que tenemos hoy en día. Casi se siente como un idioma completamente
diferente. Ahora podemos hacer mucho
más con él. Para entender cómo evoluciona
JavaScript, necesitamos
hablar de dos cosas, ekman script y TC 39. Primero,
hablemos del guión ECMO. Ahora. ¿ Qué es un guión? Seguro que ya has oído hablar de ello. Está maltratado
todo el tiempo, básicamente como simplemente
una especificación utilizada por ciertos idiomas. Está estandarizado por
ACM International, y de ahí viene
el nombre. Javascript es la implementación más utilizada de
nuevo mi script. Entonces es por eso que está enredado
con JavaScript tan de cerca. Pero hay otros idiomas de los que probablemente
hayas oído hablar. La caída de este estándar de
guiones de Ekman. Por ejemplo, Action Script, que es el lenguaje
detrás del flash que se
basa en el
estándar de script Ekman y el script J que fue realizado por Microsoft. Eso también se basa en
esa especificación. Ahora, la primera edición
del estándar de guiones Ekman
surgió en junio de 1997, y a eso se le llamó
Ekman script one o ES1. Y desde ese momento, cada lanzamiento adicional ha sido ese número
se ha incrementado. Entonces ES x1, x2, x3, y así sucesivamente. Ahora, cuando se estrenó acme script
sexto, comenzaron a designar
el contrato de arrendamiento con el año. Y así en ese momento, el lanzamiento fue técnicamente
referido como Ackman guión 2015 porque ese es el año que Ekman guiones
seis fue lanzado. Sin embargo, ES6 acaba de quedarse atascado. Y así la gente se refiere a eso
como ES6 o ECMO guión 2015. Van de un lado a otro
entre eso, porque los lanzamientos de ES6 se atascaron. Ese lanzamiento en particular fue un lanzamiento enorme con una serie
de características para JavaScript. Si estabas en el
mundo JavaScript en ese momento, recordarás
cuántas cosas se agregaron a JavaScript. ese lanzamiento en particular se agregaron muchas cosas
que
ahora hacen un uso
regular Duranteese lanzamiento en particular se agregaron muchas cosas
que
ahora hacen un uso
regularde ellas. Ahora, desde que salió esa versión
del estándar, ha
habido un nuevo
lanzamiento cada año. Y así hemos tenido
guión de Ekman, 2016201718192020. Cada año, ha salido un nuevo
lanzamiento. Mucho de eso viene del hecho
de que el lanzamiento de
los guiones de Ekman seis fue tan enorme. No querían otra
versión tan grande otra vez. Y así se acercan
al lanzamiento es de una manera mucho
más manejable. Ahora bien, ¿quién determina qué
hay en cada lanzamiento? ¿ De dónde viene todo eso? Bueno, eso tiene que
ver con TC3 nueve. Entonces hablemos de eso. Ahora. Tc 39 significa comité
técnico 39. Y son un comité
que evoluciona JavaScript. Y sus miembros son empresas
como los vendedores de navegadores, ese tipo de cosas tienen
un interés personal en JavaScript. El comité se reúne regularmente y puedes seguir sus actas
en línea si así lo deseas. Entonces en ese sentido,
es transparente. Ahora para
que una característica llegue a la madurez y se convierta en parte de una futura versión estándar de Ekman
script, esa característica debe pasar por varias etapas y
las llamamos etapas de madurez. Por lo que TC3 dynein, el comité, maneja estas propuestas a través estas etapas hasta que son aceptadas como parte
de la norma. Entonces quiero hablar de
esas etapas muy rápido. Entonces etapa uno o etapa
0, la primera etapa. Pero la etapa 0 es en realidad etapa de
sumisión. Y esto es solo una
presentación de una nueva característica, una propuesta para una nueva característica. Y esto debe provenir de un miembro de TC 39 o alguien que sea considerado
un colaborador de TC 39. Y básicamente se trata de un
documento
que describe cuál
es la característica que quieren. Esa etapa 0. La primera etapa es la etapa de propuesta. Ahora esta es una
propuesta formal para el largometraje. Y esto debe tener
un campeón que como parte de ese comité, alguien que quiera que este
rasgo sea adoptado. Entonces esa es la etapa uno. La segunda etapa es la etapa de borrador. Y esta es realmente la
primera versión de lo que
estará en la especificación para
esa característica en particular. Una vez que algo se pone en escena a su eventual inclusión
es mucho más probable. Ahora la etapa tres es
la etapa candidata. En este punto, la propuesta
está mayormente terminada y necesita retroalimentación de
implementaciones y de usuarios. Y luego finalmente, la etapa
cuatro es la etapa terminada. En este punto, está
listo para ser incluido en la especificación y lo más probable es que se incluya en la siguiente especificación próxima. Pero eso no es
necesariamente una garantía. A través de todas
estas etapas, estas características
siguen siendo consideradas propuestas y no son características hasta que se
incluyen oficialmente en la norma. Ahora bien, conocer estas
etapas puede ser importante. Por ejemplo, si vas
a un sitio como este, y accedes a las próximas funciones, lo cual se hace con este siguiente botón para averiguar qué es lo que está apoyando
y qué no es compatible. Observe cómo se rompe en las etapas
de las que acabamos de hablar. Aquí está la etapa de candidatos, esto es lo que
se avecina como posibilidad en el próximo lanzamiento del
guión de Ekman. Y se puede ver que
algunos navegadores y algunos compiladores
ya están empezando a soportar estas características
propuestas. Se puede ver que por aquí, medida que avanza por las
etapas borrador dos, se ve
que cada vez se
han hecho
menos implementaciones . Y así como estos vendedores
tienen un escaño en el comité, saben lo que viene. Pueden ser los campeones de una
propuesta en particular, quién sabe, pero empiezan a implementar
algunas de estas cosas antes de que
pasen a formar parte de la especificación
oficial. Se puede ver que incluso podemos
ir despejados a la etapa 0, no pasa mucho ahí en absoluto. Entonces, cuando artículos o
sitios como este están hablando de propuestas, propuestas de guiones de
Ekman, están hablando de
cosas que están en una de estas etapas que
no han sido adoptadas oficialmente
en el estándar todavía, pero se están moviendo en
esa dirección. Entonces ese es el proceso que sigue
tc treonina
con el fin de actualizar el
estándar de script Ackman para JavaScript. Bien, pasemos
al siguiente tema.
Steven Hancock, Founder All Things JavaScript
