Diferencias

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

--- informatica:programacion:cursos:programacion_avanzada_javascript:notacion_objetos [2024/10/16 12:42] – [Propiedades con nombre dinámico] 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 334: / Línea 328: @@
 ===== Métodos y propiedades simplificadas =====
+Acostúmbrate a la "nueva" sintaxis de ECMAScript para declarar métodos y/o propiedades en objetos, porque es tan sencilla y cómoda que te preguntarás por qué no existía antes.
+Imagina un objeto ''hello'' que tiene un método ''greetings''. Hasta ahora este objeto lo podíamos declarar de la siguiente manera:
+<code javascript>
+var hello = {
+    greetings: function(name) {
+        return "hello " + name;
+    }
+}
+</code>
+Pues bien, ahora tenemos disponible una **sintaxis simplificada** para métodos, que te permite declarar exactamente este mismo objeto sin necesidad de la palabra clave ''function'':
+<code javascript>
+var hello = {
+    greetings(name) {
+        return "hello " + name;
+    }
+}
+</code>
+Esa sintaxis simplificada puedes usarla también para //getters// y //setters// de propiedades:
+<code javascript>
+var hello = {
+    get salute() {return "hello"}
+}
+console.log(hello.salute);      // hello
+</code>
+Un ejemplo un poco más completo, donde muestra un //getter// y un //setter// simulando una variable privada cuyo valor debe ser siempre positivo:
+<code javascript>
+var hello = (() => {
+    var _private = 42;
+    return {
+        get value() {return _private},
+        set value(v) {
+            if (v > 0) {
+                _private = v;
+            }
+            return _private;
+        }
+    }
+})();
+console.log(hello.value);           // 42;
+hello.value = -10;
+console.log(hello.value);           // 42;
+hello.value = 20;
+console.log(hello.value);           // 20;
+</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>