.. role:: problema-contador Programar el lado del cliente ============================= JavaScript es un lenguaje orientado a objetos, funcional, dinámico e interpretado, usado principalmente como el lenguaje de programación de las páginas web en el lado del navegador. Actualmente, sin embargo, se usa también en la parte del servidor en entornos como Node.js o MongoDB. El nombre del estándar que regula JavaScript es ECMAScript. Los navegadores recientes entienden las últimas versiones de ECMAScript; cada año se publica una nueva versión (por ejemplo, ECMAScript 2020, también conocido como ES11). .. Important:: Las habilidades que deberías adquirir con este tema incluyen las siguientes: - Comprender los elementos básicos de JavaScript como lenguaje de programación orientado a objetos. - Saber programar en JavaScript la parte del cliente de una aplicación web usando la API de los navegadores para la gestión del DOM, eventos, estilos, etc. - Usar las herramientas para desarrolladores integradas en los navegadores, como Chrome DevTools, para depurar un programa escrito en JavaScript. .. _label-intro-js: Introducción al lenguaje de programación JavaScript --------------------------------------------------- .. admonition:: Hazlo tú ahora :class: hazlotu Estudia todos los vídeos de la serie "Introducción a JavaScript" en los que se presentan los elementos principales del lenguaje: `parte 1-1`_, `parte 1-2`_, `parte 1-3`_, `parte 1-4`_, `parte 1-5`_ y `parte 1-6`_. .. _`parte 1-1`: https://drive.google.com/file/d/1p3ThE3xA1ubg3jJXFd968ucwckVpayKy/view?usp=sharing .. _`parte 1-2`: https://drive.google.com/file/d/1MgFD19HaWSPo6P_CnPUFF6kmCLJJowEx/view?usp=sharing .. _`parte 1-3`: https://drive.google.com/file/d/1GInxvZFxgt8GcS2cWzbMRWEDpNi0kHmG/view?usp=sharing .. _`parte 1-4`: https://drive.google.com/file/d/1SrmuNde9DeOoOOClZ2WDGbf-aZH4vi33/view?usp=sharing .. _`parte 1-5`: https://drive.google.com/file/d/15Z-leYRlWbMmPWQZczqakCt0q3jMLAcJ/view?usp=sharing .. _`parte 1-6`: https://drive.google.com/file/d/1uP37JivyhSZeEgqwzcD57CznQwzLqS-Z/view?usp=sharing Elementos más avanzados del lenguaje o las características adicionales a las que un programador puede acceder cuando escribe programas en JavaScript para ser ejecutados por un navegador se estudiarán más adelante. Los conceptos que tienes que comprender del lenguaje se encuentran recogidos en `estas diapositivas`_, que también contiene información sobre elementos más avanzados que estudiaremos más adelante. .. _`estas diapositivas`: _static/slides/150-js-slides.html .. admonition:: Hazlo tú ahora :class: hazlotu Practica con los diferentes conceptos de JavaScript hasta tener claro su uso. Puedes practicar usando la consola de JavaScript de las Chrome Devtools, instalando Node.js, abriendo una `consola en línea`_ o creando un proyecto en `repl.it`_ de tipo Node.js. .. _`consola en línea`: https://jsconsole.com/ .. _`repl.it`: https://repl.it/ .. Note:: A diferencia de lo que ocurre en otros lenguajes, el punto y coma actúa en JavaScript como un *separador* de instrucciones y no como un *finalizador* de ellas. El estándar establece que su uso es opcional en ciertos casos (básicamente, cuando el intérprete puede determinar dónde acaba una instrucción y empieza la siguiente), pero en ocasiones esto puede llevar a que el motor de JavaScript interprete el código de forma diferente a la que teníamos en mente. Por ejemplo, el código siguiente: .. code-block:: javascript :linenos: :force: const a = 1 const b = 2 const c = a + b (a + b).toString() produce un error ``b is not a function`` porque el intérprete de JavaScript lo analiza como si estuviera escrito así: .. code-block:: javascript :linenos: :force: const a = 1; const b = 2; const c = a + b(a + b).toString(); Por ello, se recomienda a los novicios del lenguaje que siempre finalicen cada instrucción con punto y coma. .. _label-app-web-sencilla: Una aplicación web sencilla --------------------------- El código que se incluye más abajo muestra *en acción*, a modo de introducción, los elementos básicos del lenguaje JavaScript (variables, condicionales, bucles, funciones, etc.), así como la utilización de las APIs del navegador relacionadas con la gestión del DOM, de los eventos o de los estilos, para, con todo ello, presentar una `aplicación web muy sencilla`_ que permite añadir dinámicamente contenido a una página web e interactuar con el contenido añadido. .. _`aplicación web muy sencilla`: _static/data/ejemplo-apis-js.html .. admonition:: Hazlo tú ahora :class: hazlotu Lee los comentarios para entender el propósito de cada línea, pero ten en cuenta que en actividades posteriores ampliaremos estos elementos. Estudia después todos los vídeos de la serie "Una aplicación web sencilla con JavaScript" en los que se comenta este código con detalle: `parte 2-1`_, `parte 2-2`_, `parte 2-3`_, `parte 2-4`_ y `parte 2-5`_. Repasa después, otra vez, el código y asegúrate de que ahora comprendes mejor cada una de sus instrucciones. .. _`parte 2-1`: https://drive.google.com/file/d/1YUI7AIgzHO9vcGnmxJ9h84YyEZy9MnXi/view?usp=sharing .. _`parte 2-2`: https://drive.google.com/file/d/1g_enM9nz9iVIsGJYmV_HOUORdIs6PUeA/view?usp=sharing .. _`parte 2-3`: https://drive.google.com/file/d/1Iw6z9tf4Jc-XztH7sDa16LANPVF56xDw/view?usp=sharing .. _`parte 2-4`: https://drive.google.com/file/d/1Py4eM_Zu8EHW6hIqw1JXktSVnGuSw47j/view?usp=sharing .. _`parte 2-5`: https://drive.google.com/file/d/16ZE7bQHXPTcRO7xCbqml_9m-nsenmgBB/view?usp=sharing .. literalinclude:: _static/data/ejemplo-apis-js.html :language: html :linenos: .. Note:: Observa lo que se menciona sobre ataques XSS en los comentarios del código anterior. En un entorno de producción nunca deberías integrar una subcadena no verificada (por ejemplo, un valor introducido por el usuario en un formulario o el resultado devuelto por un servidor) en una cadena que se asigna a un atributo ``innerHTML``, ya que el intérprete de JavaScript analiza e interpreta toda la cadena como HTML y podría terminar ejecutando código no deseado. La mejor recomendación es que uses ``innerHTML`` para crear rápidamente nodos, pero que cuando vayas a añadir contenido de terceros lo metas directamente como valor del atributo ``node.textContent``, donde ``node`` es el nodo donde quieres insertar el texto. El navegador no intenta interpretar el contenido de ``textContent`` como HTML, sino que lo considera como texto plano, por lo que no hay riesgos en este caso. Modifica el código anterior para que funcione de esta manera. .. _label-api-web-js: Las APIs del navegador para programar el lado del cliente --------------------------------------------------------- Los navegadores incluyen una serie de librerías estandarizadas para programar la parte de la aplicación web que se ejecuta en el navegador (lo que se conoce como el *front-end* de la aplicación, en oposición al *back-end*, que denotaría la parte del servidor). En esta actividad profundizaremos en las APIs para el manejo del árbol DOM, la gestión de eventos y el control de estilos. Otras APIs, como la que permite realizar peticiones asíncronas desde el cliente a un servidor, se explorarán más adelante. .. admonition:: Hazlo tú ahora :class: hazlotu Estudia todos los vídeos de la serie "El API del navegador para JavaScript" en los que se presentan los elementos principales del lenguaje: `parte 3-1`_, `parte 3-2`_, `parte 3-3`_, `parte 3-4`_, `parte 3-5`_, `parte 3-6`_ y `parte 3-7`_. Practica después con todas las funciones con la consola de JavaScript de las Chrome Devtools o con entornos como CodePen_. .. _`parte 3-1`: https://drive.google.com/file/d/1Q-H8iZpfQ8k2h0DhMbp1hOxRK37SrCQB/view?usp=sharing .. _`parte 3-2`: https://drive.google.com/file/d/1Fa4r4IPDKBHFhWOMCaX9Ca2BLb-TiljQ/view?usp=sharing .. _`parte 3-3`: https://drive.google.com/file/d/1IYKnaNmt6LJO0zMp8jM5AtriYfY6FK1s/view?usp=sharing .. _`parte 3-4`: https://drive.google.com/file/d/1cbN_pIzpt0CPkFp5vv2szHyd7EYCQfS4/view?usp=sharing .. _`parte 3-5`: https://drive.google.com/file/d/1TFYTXsrpO5-vi9aXIdrImPAFu4ZdP4Sz/view?usp=sharing .. _`parte 3-6`: https://drive.google.com/file/d/1ySWqKaravIKkI8s860FL8ZoB73t7cinm/view?usp=sharing .. _`parte 3-7`: https://drive.google.com/file/d/1eJjgloOm5q8RVyeQDtpr6FKUpjlGjJ2w/view?usp=sharing .. _CodePen: http://codepen.io/ Los conceptos que tienes que estudiar de estas APIs se encuentran recogidos en `estas otras diapositivas`_. .. _`estas otras diapositivas`: _static/slides/150-apidom-slides.html Ten en cuenta que las funciones de *callback* se ejecutan en el (único) hilo de tu programa pero cuando les toque (se van apilando conforme están listas para ser invocadas). El navegador nunca va a interrumpir la ejecución de tu código hasta que acabe lo que esté haciendo. Por ejemplo, si se está ejecutando un manejador de evento de clic, hasta que la función manejadora no acabe, el intérprete no se irá a la cola a ver si hay alguna otra función de *callback* esperando a ser llamada. .. Important:: A la hora de usar funciones y atributos que permiten acceder a listas de nodos o elementos del árbol DOM es importante que conozcas un par de conceptos. Por un lado, las listas pueden ser *vivas* o *estáticas*. Por ejemplo, las funciones ``getElementsByClassName`` o ``getElementsByTagName`` se usan para obtener una lista de elementos en base al valor del atributo ``class`` o del tipo de etiqueta, respectivamente, y la lista devuelta está *viva* en tanto que si con posterioridad a la llamada a la función añadimos un nuevo nodo al DOM que cumpla con el criterio correspondiente, el *array* se ampliará para incluirlo (haz la prueba). La función ``querySelectorAll``, sin embargo, devuelve una lista *estática* que permanece inalterada por mucho que se incorporen nuevos nodos al árbol (compruébalo). Por otro lado, está la distinción entre las funciones (o atributos) que devuelven *elementos* o *listas de elementos* (lo que excluye, por ejemplo, a los nodos con texto), y las que devuelven *nodos* o *listas de nodos*. Cuando hablamos de listas, las primeras se basan en el tipo ``HTMLCollection`` y las segundas en ``NodeList``. Cuando hablamos de items individuales, los tipos son ``Element`` y ``Node``, respectivamente. Por ejemplo, atributos como ``childNodes`` o ``nextSibling`` contienen nodos, mientras que ``children`` o ``nextElementSibling`` contienen elementos. Normalmente, nos interesarán las listas de tipo ``HTMLCollection`` porque querremos recorrer los elementos incluidos en otro elemento, pero en otras ocasiones, puede servir más a nuestro objetivo tener una lista de tipo ``NodeList`` que no excluye ningún nodo del árbol DOM, ni siquiera los que contienen texto o espacios en blanco. .. Note:: Una idea básica para comprender la gestión de eventos es el hecho de que cuando, por ejemplo, se hace clic en un pixel concreto de la ventana del navegador, es posible que este evento dispare la ejecución de más de un manejador de eventos. Considera el siguiente código en HTML: .. code-block:: html :linenos:
hello
bye
Y el siguiente código en JavaScript: .. code-block:: javascript :linenos: function prnt() {console.log("parent clicked");} function child() {console.log("child clicked");} var p = document.getElementById("prnt"); var c = document.getElementById("child"); p.addEventListener("click",prnt,true); c.addEventListener("click",child,true); Si se hace clic en la palabra *bye*, se está haciendo clic en ambos ``div`` y no solo en el más interno, por lo que procede ejecutar ambos manejadores, como puedes comprobar aquí_. .. _aquí: http://jsfiddle.net/rLv1cob7/ Respecto a la existencia de las dos fases de captura y *burbujeo*, en la mayoría de los casos no será muy relevante en qué fase se ejecuta un determinado manejador. De hecho, en las primeros años de la web y antes de la estandarización de la gestión de eventos, los navegadores solían implementar una de las dos fases, pero no ambas. Herramientas para desarrolladores --------------------------------- Las herramientas para desarrolladores que incorporan los navegadores permiten depurar el código en JavaScript de la parte del cliente de una aplicación web. .. admonition:: Hazlo tú ahora :class: hazlotu Familiarízate con las opciones de depuración de JavaScript de las pestañas :guilabel:`Console` y :guilabel:`Sources` del entorno de las Chrome DevTools siguiendo estas páginas de su documentación: `Console Overview`_ , `Get Started`_, `Pause your Code with Breakpoints`_ y `JS Debugging Reference`_. Practica las distintas posibilidades en DevTools con una aplicación web como la de la primera actividad de este tema. .. _`Console Overview`: https://developers.google.com/web/tools/chrome-devtools/console .. _`Get Started`: https://developers.google.com/web/tools/chrome-devtools/javascript .. _`Pause your Code with Breakpoints`: https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints .. _`JS Debugging Reference`: https://developers.google.com/web/tools/chrome-devtools/javascript/reference .. Note:: Otra opción para pausar la ejecución del código JavaScript en un determinado punto es añadir la instrucción ``debugger`` (recogida en el estándar de ECMAScript) en una línea. Si las herramientas de desarrolladores están abiertas, la ejecución se detendrá en esa línea como si hubiéramos definido un punto de ruptura:: function foo (x) { if (x < 0) { debugger; return x*x; } } .. _label-js-objetos: Objetos y prototipos -------------------- La manera en la que se gestionan los objetos en JavaScript es diferente a la que puedas conocer por otros lenguajes como Java o C++. JavaScript sigue el paradigma de la *programación basada en prototipos*, que algunos denominan también programación orientada a objetos *sin clases*. Para familiarizarte con este enfoque de la programación orientada a objetos, vas en esta ocasión a leer un texto en inglés, lo que te permitirá no solo profundizar en el tema, sino desarrollar tu habilidad para leer documentación en este idioma (recuerda que las fuentes primarias de documentación tecnológica suelen estar en inglés y que muchas veces el tiempo necesario para que haya información de calidad en otros idiomas sobre una materia novedosa puede ser inaceptablemente largo). En la actividad ":ref:`label-intro-js`" ya realizamos una introducción rápida a los objetos en JavaScript. Ahora vamos a estudiarlos con más detalle. .. admonition:: Hazlo tú ahora :class: hazlotu Lee el capítulo "`The secret life of objects`_" de la tercera edición del libro con licencia abierta "`Eloquent JavaScript`_". Practica por tu cuenta cada concepto estudiado con un intérprete de JavaScript. Lee únicamente desde el principio hasta el apartado "`Overriding derived properties`_" incluido. .. _`The secret life of objects`: https://eloquentjavascript.net/06_object.html .. _`Eloquent JavaScript`: https://eloquentjavascript.net/ .. _`Overriding derived properties`: https://eloquentjavascript.net/06_object.html#h_oUlUep3Os8 La recomendación es que leas el fragmento del capítulo en su idioma original, pero si te cuesta seguir el texto de este modo, puedes leer una `versión traducida automáticamente del capítulo`_. Recuerda que aunque la traducción automática entre lenguas similares ha mejorado mucho en los últimos años, los sistemas aún cometen errores que en ocasiones son difíciles de detectar porque la frase traducida *suena bien* en español, por ejemplo, pero no refleja el significado de la original en inglés. Desde el enlace anterior puedes ir alternando entre la versión traducida automáticamente y el texto original con los botones de la parte superior; además, si consultas la versión traducida automáticamente y colocas el puntero del ratón sobre una frase, se mostrará un texto flotante con el original. Si lees la versión traducida automáticamente, ve consultando el original para asegurarte de que el sistema no ha alterado su significado. Ten especial cuidado con el código en JavaScript cuyas variables o palabras reservadas, por ejemplo, pueden haber sido traducidas erroneamente. .. _`versión traducida automáticamente del capítulo`: https://translate.google.es/translate?hl=es&sl=en&tl=es&u=https%3A%2F%2Feloquentjavascript.net%2F06_object.html De cara a comprender mejor el capítulo sobre la vida secreta de los objetos, se muestran a continuación algunas notas que te pueden servir para terminar de comprender los conceptos allí introducidos. .. Important:: En primer lugar, no hay que confundir la propiedad ``prototype`` de una función con el prototipo de un objeto. El prototipo de un objeto, entendido como un segundo objeto que contiene el conjunto de funciones y atributos compartidos con otros objetos, se almacena en una propiedad *interna* llamada ``[[Prototype]]`` que no es directamente accesible desde tu código. No obstante, consultar o modificar esta propiedad interna se puede hacer indirectamente de dos formas: - Usando el atributo ``__proto__`` de un objeto, atributo que muchos navegadores han venido soportando pero que el estándar de ECMAScript solo ha reconocido recientemente, señalándolo, eso sí, como un atributo en vías de extinción (*deprecated*). Significa esto que puedes usarlo para acceder rápidamente al prototipo de un objeto mientras haces pruebas desde la consola del navegador o en la fase de desarrollo de un programa, pero nunca deberías usarlo sobre aplicaciones en producción porque futuras versiones de los navegadores podrían no soportarlo. - Mediante las funciones ``Object.getPrototypeOf()`` y ``Object.setPrototypeOf()`` reconocidas por el estándar del lenguaje como la forma correcta de acceso al prototipo interno. El prototipo (interno) por defecto de los objetos de JavaScript es ``Object.prototype``, es decir, el prototipo (visible) de la función ``Object``. Por otro lado, el valor por defecto del prototipo (visible) de una función es un objeto que contiene una única propiedad llamada ``constructor`` que apunta a la propia función. Un prototipo no deja de ser un objeto con una serie de funciones como el siguiente: .. code-block:: javascript :linenos: protoOkapi = { habla() { console.log("¡Hola!"); } } La definición anterior no parece seguir la notación que habíamos estudiado para crear objetos literalmente, pero lo que ocurre aquí es simplemente que, si omitimos el nombre de la propiedad, se utilizará para ella el mismo nombre que el de la función correspondiente, por lo que lo anterior es más o menos equivalente a: .. code-block:: javascript :linenos: protoOkapi = { habla: function habla() { console.log("¡Hola!"); } } Y también es equivalente a: .. code-block:: javascript :linenos: protoOkapi = { habla: function() { console.log("¡Hola!"); } } La función ``habla`` no tiene en principio nada especial; podemos invocarla para que imprima el saludo con ``protoOkapi.habla()``. Una vez tenemos nuestro prototipo, podemos crear objetos que lo usen y *hereden* sus propiedades mediante la función ``Object.create()``. Vamos a usarla en una función que, además de crear un objeto con dicho prototipo, asigna a ese objeto en particular un atributo con la edad del animal: .. code-block:: javascript :linenos: :force: function creaOkapi(proto,edad) { let okapi= Object.create(proto); okapi.edad= edad; return okapi; } Con estos ingredientes, podemos crear dos objetos que representen sendos okapis: .. code-block:: javascript :linenos: let o1= creaOkapi(protoOkapi,2); let o2= creaOkapi(protoOkapi,4); o1.habla(); o2.habla(); Aunque cada okapi tiene su propio atributo ``edad`` (puedes imprimir ``o1.edad`` y ``o2.edad``), el código de la función ``habla`` no está duplicado en memoria, porque solo existe una instancia de la función (recuerda que las funciones son objetos de clase ``Function`` y podemos, por tanto, manejar referencias a ellas) dentro del prototipo. Cuando escribimos ``o1.edad`` el atributo se encuentra directamente en el objeto, pero cuando escribimos ``o1.habla()`` la función no es un atributo directo de ``o1``, sino que, al no encontrarlo en el objeto, el intérprete lo busca en su prototipo. Como hemos comentado, podemos acceder al prototipo del objeto con ``Object.getPrototypeOf(o1)`` y en muchos navegadores, aunque no recomendado, con ``o1.__proto__``. De hecho, en un navegador que soporte ``__proto__`` la comparación ``Object.getPrototypeOf(o1) === o1.__proto__`` devolverá ``true`` porque el prototipo no deja de ser un único objeto en memoria. También devolverá cierto la expresión ``o1.__proto__ === protoOkapi`` en nuestro caso. Ahora bien, si el prototipo de un objeto es a su vez un objeto, como hemos visto, ¿cuál es el resultado de ``o1.__proto__.__proto__`` o, dicho de otra forma, cuál es el prototipo del objeto ``protoOkapi``? Si mostramos el contenido de la expresión ``o1.__proto__.__proto__`` por la consola del navegador, veremos un objeto con una serie de métodos como ``toString``, entre otros. Estos métodos vienen del prototipo de ``Object``, es decir, ``Object.prototype``, que es el prototipo usado por defecto para los objetos para los que no se define un prototipo específico. La expresión ``Object.prototype === o1.__proto__.__proto__`` se evalúa, por tanto, a cierto. El método ``habla`` definido anteriormente se limita a imprimir siempre la misma cadena. Los métodos, sin embargo, suelen utilizar los atributos del objeto sobre el que se invocan. Como el intérprete de JavaScript se encarga de vincular ``this`` al objeto sobre el que se ejecuta un método, podemos hacer que la función ``habla`` imprima la edad del okapi con otro prototipo: .. code-block:: javascript :linenos: protoOkapi = { habla() { console.log("¡Hola! Tengo "+this.edad+" años."); } } let o3= creaOkapi(protoOkapi,6); o3.habla(); Obviamente, si invocamos ``habla`` directamente haciendo ``protoOkapi.habla()``, la variable ``this.edad`` valdrá ``undefined``. Observa que podemos asociar una nueva función al okapi ``o1`` haciendo: .. code-block:: javascript :linenos: o1.camina = function() { console.log("Caminando voy."); } o1.camina(); Pero, al no pertenecer al prototipo, la función ``camina`` solo existe para el objeto ``o1``. .. Note:: La variable polimórifica ``this`` se revincula cada vez que se llama a una función por lo que no podremos usarla desde una función interna para referirnos al objeto ``this`` de la función externa, excepto si la función interna es una función flecha. Para ilustrarlo, considera el siguiente bloque HTML: .. code-block:: html :linenos: :force:
X
Cuando se hace clic en la equis mayúscula, el siguiente código de JavaScript muestra por consola la cadena ``w`` excepto en el segundo caso en el que se produce una excepción por tener ``this.parentNode`` el valor ``undefined``: .. code-block:: javascript :linenos: :force: document.querySelector("#x").addEventListener("click", function () { console.log(this.parentNode.id); }); document.querySelector("#x").addEventListener("click", function () { setTimeout(function () { console.log(this.parentNode.id) }, 1000); }); document.querySelector("#x").addEventListener("click", function () { var this2= this; setTimeout(function () { console.log(this2.parentNode.id) }, 2000); }); document.querySelector("#x").addEventListener("click", function () { setTimeout(() => { console.log(this.parentNode.id) }, 3000); }); Observa cómo en el tercer caso salvaguardar el ``this`` externo en la variable local ``this2`` de la función externa garantiza una clausura adecuada entre la función interna y una copia de la referencia a ``this``. Una representación gráfica de la disposición en memoria de los diferentes objetos resultantes del código anterior es la siguiente: .. figure:: _static/img/okapi1.svg :target: _static/img/okapi1.svg :alt: objetos y prototipos en memoria :figwidth: 70 % Representación en memoria de los objetos creados en el código de la actividad. JavaScript tiene una sintaxis alternativa ligeramente más sencilla para crear objetos. Esta segunda forma se basa en definir una *función constructora* y utilizar la palabra reservada ``new``: .. code-block:: javascript :linenos: function Okapi (edad) { this.edad= edad; } Okapi.prototype.charla= function () { console.log("¿Qué tal? Tengo "+this.edad+" años."); } let o4= new Okapi(8); o4.charla(); .. Important:: El operador ``new`` hace aquí muchas cosas: - crea un nuevo objeto; - asigna como prototipo de este nuevo objeto (es decir, como valor de la propiedad interna e inacesible ``[[Prototype]]``, la misma a la que podemos acceder con ``Object.getPrototypeOf()`` o en algunos navegadores con ``__proto__``) el mismo objeto que el referenciado por la propiedad externa y accesible de nombre ``prototype`` del constructor (en este caso, ``Okapi.prototype``, objeto al que hemos añadido la función ``charla``); - hace que ``this`` apunte al nuevo objeto; - ejecuta la función constructora; - devuelve el objeto creado (que en este caso será asignado a la variable ``o4``). Cada vez que creamos una función, el objeto que la representa recibe un atributo ``prototype``, que es un objeto con un atributo ``constructor`` que referencia a la misma función. Además, como cualquier objeto de JavaScript, el objeto de la función tiene un prototipo interno que inicialmente se basa en el prototipo de la clase predefinida ``Object``, esto es, ``Object.prototype``, que contiene una serie de métodos básicos como ``toString``. Cuando sobre el objeto creado (``o4`` en nuestro caso) invocamos una función, esta se busca en primer lugar en los atributos del objeto; si no se encuentra allí, se busca en su prototipo (allí el intérprete encontraría, por ejemplo, la función ``charla``); si no se encuentra allí, se busca en el prototipo de su prototipo (allí el intérprete se encontraría con la función ``toString``) y así sucesivamente hasta llegar al prototipo de ``Object``. Observa el paralelismo de este comportamiento con la herencia de lenguajes de programación como Java o C++, aunque su implementación es muy diferente. .. Note:: En cualquier momento durante la ejecución del programa, podemos añadir nuevos métodos a un prototipo y todos los objetos vinculados a él (tanto los ya existentes como los nuevos que se creen) recibirán dinámicamente el nuevo método. Más recientemente, JavaScript ha incorporado la palabra reservada ``class`` que permite crear objetos y asociarles prototipos de una forma más parecida a como otros lenguajes definen clases y crean objetos. En realidad, esta otra manera de definir los objetos es lo que se conoce como *azúcar sintáctica*, porque no añade nuevas características al lenguaje, sino que el intérprete transforma la nueva notación a la clásica basada en prototipos que hemos visto: .. code-block:: javascript :linenos: class OkapiBis { constructor(edad) { this.edad= edad; } charla() { console.log("¿Qué tal? Tengo "+this.edad+" años."); } } let o5= new OkapiBis(10); o5.charla(); o5.toString(); Finalmente, encadenando prototipos podemos definir relaciones de herencia, lo que con la nueva notación se puede hacer con la palabra reservada ``extends``: .. code-block:: javascript :linenos: class Empleado { constructor(nombre,apellidos) {...} getNombreCompleto() {...}; } class Director extends Empleado { constructor(nombre,apellidos) { super(nombre,apellidos); this._empleados = []; } añadeEmpleado(empleado) { this._empleados.push(empleado); } } .. _label-js-clausuras: Ámbitos y clausuras ------------------- En JavaScript es habitual definir una función dentro de otra de forma que la función interna utilice variables definidas en el ámbito de la externa y *sobreviva* a ella, en el sentido de que la función interna acabe ejecutándose cuando la externa ya finalizó: .. code-block:: javascript :linenos: function creaLista() { var list = document.querySelector("#list"); for (let i = 1; i <= 5; i++) { let item = document.createElement("li"); item.appendChild(document.createTextNode("Elemento " + i)); item.addEventListener("click", function (e) { console.log("Se ha hecho clic en el elemento "+i+"."); }, false); list.appendChild(item); } } Para que este código funcione es necesario que las variables locales de la función externa no se destruyan al finalizar la ejecución de la función como ocurriría en principio con todas sus variables locales cuando son eliminadas de la pila. Una *clausura* de JavaScript es la combinación de una función (como la función manejadora de evento del código anterior) junto con las variables locales del ámbito exterior que utiliza (la variable ``i`` en este caso). Una clausura se implementa como un registro que almacena una función y un entorno de la pila. Las clausuras y su relación con las variables declaradas con ``var`` o ``let`` es uno de los aspectos que más cuesta entender a los programadores que acaban de empezar con JavaScript (con el permiso de los prototipos, claro). Existen cuatro tipos de ámbitos para las variables en JavaScript: - ámbito de función: corresponde a las variables locales declaradas con ``var``; estas variables se almacenan en la pila y pueden usarse incluso antes de haber sido definidas; esto es así por un mecanismo conocido como *izado* (*hoisting*) que aupa las declaraciones de variables locales (pero no sus inicializaciones) al comienzo de la función; declarar dos o más veces una variable con ``var`` dentro de la misma función equivale a declararla una sola vez al comienzo de esta; si intentamos leer el valor de una variable antes de su declaración en el código y antes de haberle asignado ningún valor obtenemos el valor *undefined*; - ámbito de bloque: corresponde a las variables locales declaradas con ``let``; estas variables se almacenan en la pila también, pero no hay ningún proceso de izado y la variable se circunscribe al ámbito en el que ha sido declarada; dos variables declaradas en ámbitos diferentes de una misma función tienen espacios separados en la pila; no se pueden declarar dos variables de este tipo con el mismo nombre dentro del mismo contexto; si se declara una variable con ``let`` dentro de un bucle, se reserva sitio en la pila para una variable distinta en cada iteración; el uso de ``let`` está permitido en el lenguaje desde la versión 6 de ECMAScript, publicada en 2015, por lo que es normal que encuentres muchos ejemplos de código que no lo usan; - ámbito global: corresponde a las variables globales declaradas fuera de cualquier función; estas variables se almacenan en el *heap* y sus declaraciones también son *izadas* al principio del ámbito global; - ámbito léxico: corresponde al hecho de que una función definida dentro de otra función puede acceder a las variables locales de esta última; si una función interna *sobrevive* a la función contenedora, las variables referenciadas no se borran de la memoria (a la asociación entre la función y las variables externas se le conoce, como hemos mencionado, como *clausura*); Las declaraciones de funciones locales y globales también sufren el mecanismo de izado en sus ámbitos respectivos. .. admonition:: Hazlo tú ahora :class: hazlotu Estudia el siguiente código y ejécutalo después de dedicar un rato a pensar qué valores imprime por la consola. .. code-block:: javascript :linenos: function f() { var i = 0; var x = {}; { var i = 0; x.f1 = function() { console.log(i); }; } i++; { var i = 1; x.f2 = () => { console.log(i); }; } i++; return x; } var x = f(); x.f1(); .. la barra introduce una línea en blanco en restructured text La variable ``i`` se declara con ``var`` y, por tanto, su ámbito es el de la función ``f``. No importa que usemos ``var`` varias veces a continuación dentro de la función, incluso aunque estas declaraciones adicionales estén dentro de un nuevo ámbito. En la pila de ejecución solo se reserva sitio para una variable cuando se ejecuta la función y esta única posición es la que no se destruye al salir de la función debido a las clausuras que se crean por las dos funciones anónimas asignadas a ``x.f1`` y ``x.f2``. La variable ``i`` vale 2 al salir de la función y este valor es el que se usa al llamar a las dos funciones. .. Note:: Observa de paso que para introducir nuevos ámbitos no es necesario usar una instrucción condicional o un bucle, sino que en JavaScript, como en la mayoría de lenguajes, basta con encerrar un bloque de código entre llaves para conseguirlo. Sin embargo, si usamos ``let`` en lugar de ``var`` en las declaraciones de ``i``, el ámbito de cada variable será el del bloque y tendremos tres variables distintas en la pila de ejecución justo antes de salir de la función. La primera de ellas será destruida en ese momento, pero las otras dos se *salvarán* de dicha destrucción para mantener las clausuras: .. code-block:: javascript :linenos: function f () { let i=0; let x= {}; { let i=0; x.f1= function() { console.log(i); }; } i++; { let i=1; x.f2= () => {console.log(i);}; } i++; return x; } let x= f(); x.f1(); x.f2(); .. admonition:: Hazlo tú ahora :class: hazlotu Las clausuras llevan fácilmente a confusión si no se entiende bien cómo funcionan. Intenta predecir la salida del siguiente código antes de ejecutarlo: .. code-block:: javascript :linenos: function f () { var funcs = []; for (var i = 0; i < 3; i++) { funcs[i] = function() { console.log("My value: " + i); }; funcs[i](); // Aquí se obtiene un resultado } return funcs; } var m= f(); for (var j = 0; j < 3; j++) { m[j](); // Aquí otro diferente } Intenta predecir ahora la salida cuando las variables se declaran con ``let`` en lugar de con ``var``: .. code-block:: javascript :linenos: function f () { var funcs = []; for (let i = 0; i < 3; i++) { funcs[i] = function() { console.log("My value: " + i); }; funcs[i](); } return funcs; } var m= f(); for (var j = 0; j < 3; j++) { m[j](); } Al usar ``let`` se crea un nuevo enlace entre la función interior y la variable del bucle en cada iteración. Comprueba después si tus predicciones eran correctas ejecutando el código en un intérprete de JavaScript. Profundizar en JavaScript ------------------------- JavaScript tiene obviamente muchos más elementos que los que hemos explorado en este tema. Si quieres ampliar por tu cuenta tu conocimiento del lenguaje, puedes seguir con referencias como "`The Modern JavaScript Tutorial`_", "`JavaScript for impatient programmers`_", "`Eloquent JavaScript`_" o "`Deep JavaScript: theory and techniques`_". .. _`The Modern JavaScript Tutorial`: https://javascript.info/ .. _`JavaScript for impatient programmers`: https://exploringjs.com/impatient-js/index.html .. _`Eloquent JavaScript`: https://eloquentjavascript.net/ .. _`Deep JavaScript: theory and techniques`: https://exploringjs.com/deep-js/index.html