Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:programacion:cursos:programacion_avanzada_javascript:notacion_objetos [2024/10/16 12:43] – [Métodos y propiedades simplificadas] tempwin
+++ informatica:programacion:cursos:programacion_avanzada_javascript:notacion_objetos [2024/10/30 13:01] (actual) – [Propiedades con nombre dinámico] tempwin
@@ Línea 124: / Línea 124: @@
 En el caso del uso de funciones constructoras, el tema es un poco confuso **porque si ''Foo'' es una función constructora entonces ''Foo.prototype'' puede asignarse a cualquier objeto en cualquier momento**. Y recuerda que ''Foo.prototype'' es el prototipo de todos los objetos creados mediante la función constructora ''Foo''. Pero si sustituyes ''Foo.prototype'' por otro objeto, este cambio solo afecta a los nuevos objetos que crees con ''new Foo'', no con los ya creados:
-<WRAP center round todo 60%>
+{{ :informatica:programacion:cursos:programacion_avanzada_javascript:14-cambio-foo-prototype.png |}}
-Cambio de Foo.prototype
-</WRAP>
 En la imagen anterior el valor de ''f1.name'' es ''undefined'' porque ''f1'' tiene el valor inicial de ''Foo.prototype'' que no define la propiedad ''name''. Por su parte ''f2.name'' tiene valor porque ''f2'' está creado después de que hayamos cambiado ''Foo.prototype'' por otro objeto que sí define la propiedad ''name''.
@@ Línea 285: / Línea 283: @@
 Se puede ver que ''obj.answer'' es ''42'' porque el objeto ''a'' es el prototipo del objeto ''obj''. Para conseguir el mismo efecto en ECMAScript 5 debíamos crear el objeto ''obj'' usando ''Object.create''.
-<WRAP center round todo 60%>
+{{ :informatica:programacion:cursos:programacion_avanzada_javascript:14-usando-proto-notacion-objeto.png |}}
-Usando __proto__ en notación de objeto.
-</WRAP>
 ===== Propiedades con nombre dinámico =====
@@ Línea 299: / Línea 295: @@
 Una vez se ha creado esa propiedad podemos acceder a ella con la notación de punto o de array, siendo ambas equivalentes:
-<WRAP center round todo 60%>
+{{ :informatica:programacion:cursos:programacion_avanzada_javascript:14-propiedades-dinamicas.png |}}
-Propiedades dinámicas
-</WRAP>
@@ Línea 387: / Línea 381: @@
 </code>
 ===== DEMO: Novedades en notación de objetos =====
+Repaso de las 4 novedades importantes de **ECMAScript 6** en notación de objetos.
+Posibilidad de **especificar el prototipo** del objeto en notación del objeto a la vez que declaramos el objeto:
+<code javascript>
+var a = {name: "campusmvp"}
+var b = {
+    __proto__: a,
+    cursos: ["javascript"]
+}
+b.name; // -> 'campusmvp'
+</code>
+Antes no se podía hacer, era necesario el uso de ''Object.create'' para obtener el mismo efecto.
+Otra de las novedades son las **propiedades con nombre dinámico**:
+<code javascript>
+var b = {
+    __proto__: a,
+    cursos: ["javascript"],
+    ["i_" + Math.random()]: 42
+}
+</code>
+Lo ejecutamos:
+<code javascript>
+b; // -> Object { cursos: Array[1], i_0.123412341234: 42}
+</code>
+En ECMAScript 5 podíamos hacer:
+<code javascript>
+b["i_" + Math.random()]: 42
+</code>
+Pero no podíamos hacerlo en la declaración de un objeto.
+Otra novedad más es una **sintaxis simplificada para declarar funciones**.
+<code javascript>
+var b = {
+    __proto__: a,
+    cursos: ["javascript"],
+    ["i_" + Math.random()]: 42,
+    foo(p) {return p + 1} // No es necesario usar 'function' ni los dos puntos (:)
+}
+</code>
+Finalmente, otra característica nueva son los //shorthand properties names//:
+<code javascript>
+var url = "https://campusmvp.es";
+var options = {
+    url, // en lugar de url: url
+    method: "GET"
+});
+</code>