Diferencias

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

--- informatica:programacion:cursos:programacion_avanzada_javascript:simbolos [2024/10/16 17:24] – [DEMO: Revealing Module Pattern] tempwin
+++ informatica:programacion:cursos:programacion_avanzada_javascript:simbolos [2024/10/30 13:03] (actual) – [Variables privadas usando símbolos] tempwin
@@ Línea 154: / Línea 154: @@
 <code javascript>
-(function() {
+var miModulo = (function() {
     var value = 42;
     var foo = function(i) {
-        return i + 42;
+        return i + value * bar();
     }
+    var bar = function() { return 10;}
     return {
+        // El primer ''foo'' es el nombre público y el segundo es el privado
+        foo: foo
     }
 })();
 </code>
+La función ''foo'' es privada, pero la exponemos al devolverla con el objeto en el último ''return''.
+Al ejecutar el código anterior:
 <code javascript>
+miModulo; // -> Object { foo: foo() }
+miModulo.pFoo(10); // -> 62
+// Comprobamos que no podemos acceder a variables y funciones privadas:
+miModulo.value; // -> undefined
+miModulo.bar(); // -> TypeError: miModulo.bar is not a function
+miModulo.foo(); // -> TypeError: miModulo.foo is not a function
 </code>
+===== Variables privadas usando símbolos =====
+Los símbolos ofrecen un nuevo mecanismo para declarar variables privadas en un objeto. Para ello **podemos usar un símbolo como nombre de propiedad de un objeto**. Eso garantiza que solo quien tenga acceso al símbolo original podrá acceder a dicha propiedad, ya que no hay otro modo de obtener el nombre de la propiedad.
+Las propiedades cuyo nombre es un símbolo no aparecen ni al usar ''Object.getOwnProperyNames'' ni ''Object.keys''.
 <code javascript>
+var obj={
+   v1: 42,
+   [Symbol("v2")]: 100
+};
 </code>
+Dado el siguiente código, si miramos las propiedades que tiene obj tan solo obtendremos la propiedad v1. La otra propiedad (cuyo nombre es un símbolo) no la vemos de ninguna manera:
+{{ :informatica:programacion:cursos:programacion_avanzada_javascript:15-propiedades-simbolo.png |}}
+Se puede ver que la propiedad ''%%Symbol("v2")%%'' no se obtiene de ninguna manera. Para poder acceder a esta propiedad necesitamos el símbolo original. Ahora bien, **¿cuál es el valor de ''result'' en este código?**
 <code javascript>
+var obj={
+    v1: 42,
+    [Symbol("v2")]: 100
+};
+var result = obj[Symbol("v2")];
 </code>
-===== Variables privadas usando símbolos =====
+Al finalizar este código el valor de ''result'' es ''undefined''. La razón es que no estamos usando el mismo símbolo para acceder a la propiedad. Recuerda que dos símbolos son distintos a pesar de que los creemos con el mismo identificador.
+Por la misma razón el siguiente código no modifica el valor de la propiedad de 100 a 200, sino que crea otra propiedad con el valor 200 (distinta de la propiedad con el valor de 100).
+<code javascript>
+var obj={
+    v1: 42,
+    [Symbol("v2")]: 100
+};
+obj[Symbol("v2")] = 200;
+</code>
+Para acceder a la propiedad cuyo nombre es un símbolo necesitamos el símbolo original:
+<code javascript>
+var s = Symbol("v2");
+var obj={
+    v1: 42,
+    [s]: 100
+};
+var result = obj[s];    // 100
+</code>
+Observa que colocamos la variable símbolo entre corchetes para acceder a la propiedad. Si no usásemos los corchetes simplemente estaríamos creando (o accediendo a) una propiedad llamada "s"
 ===== DEMO: Símbolos como nombres de propiedades =====
+Un símbolo nos permite obtener un nombre único.
+<code javascript>
+var obj = {
+    [Symbol("v")]: 42,
+    v: 60
+}
+</code>
+<code javascript>
+obj; // -> Object { v: 60}
+</code>
+No nos muestra la otra propiedad, la creada con el símbolo. Solo podemos acceder a ella utilizando el símbolo:
+<code javascript>
+obj[Symbol("v")]; // -> undefined
+Symbol("v") === Symbol("v"); // false
+</code>
+Así que tendríamos que haber guardado el símbolo:
+<code javascript>
+var s = Symbol("v");
+var obj = {
+    [s]: 42,
+    v: 60
+}
+</code>
+Tras ejecutarlo:
+<code javascript>
+obj[s]; // -> 42
+</code>
+Podríamos ver todos los símbolos usados como propiedad en un objeto con ''Object.getOwnPropertySymbols(obj)'':
+<code javascript>
+var sy = Object.getOwnPropertySymbols(obj);
+sy; // -> Array[ Symbol(v) ]
+obj[sy[0]]; // -> 42
+</code>
+Los símbolos nos dan otro mecanismo para definir propiedades privadas, pero esto no impide que alguien utlizando ''Object.getOwnPropertySymbols(obj)'' pueda obtener los símbolos que se han utilizado para esas propiedades y acceder directamente a ellas.
+Si quisiéramos ocultar realmente una propiedad, no podemos usar símbolos. Deberíamos usar el revealing module pattern o utilizar el concepto de función constructora.
 ===== DEMO: Símbolos en valores =====
+<code javascript>
+var handle = function(name) {
+    var _name = name;
+    var _status = "C"; // 'C' cerrado
+    return {
+        // getter para devolver la propiedad privada
+        get name() { return _name; },
+        get status() { return _status; },
+        open() {
+            if (_status == "C") {
+                console.log("Abriendo " + _name);
+                _status = "A";
+            } else {
+                console.log("Ya está abierto");
+            }
+        }
+    }
+}
+</code>
+Tras ejecutarlo:
+<code javascript>
+var h = handle("test");
+h.name; // -> 'test'
+h.status; // -> 'C'
+h.open();
+// -> Abriendo test
+h.open();
+// -> Ya está abierto
+</code>
+Para evitar colisiones con otros posibles valores, usaremos símbolos porque de esa manera tendremos valores únicos para nuestras propiedades y aumentamos la seguridad de nuestro código:
+<code javascript>
+var handle_status = {
+    Abierto: Symbol("A"),
+    Cerrado: Symbol("C")
+}
+var handle = function(name) {
+    var _name = name;
+    var _status = handle_status.Cerrado;
+    return {
+        // getter para devolver la propiedad privada
+        get name() { return _name; },
+        get status() { return _status; },
+        open() {
+            if (_status === handle_status.Cerrado;) {
+                console.log("Abriendo " + _name);
+                _status = handle_status.Abierto;
+            } else {
+                console.log("Ya está abierto");
+            }
+        }
+    }
+}
+</code>
+Tras ejecutarlo:
+<code javascript>
+var h = handle("edu");
+h; // -> Object { name: Getter, status: Getter, open: open() }
+h.name; // -> 'edu'h
+h.status; // -> Symbol(C)
+h.open();
+// -> Abriendo edu
+h.open();
+// -> Ya está abierto
+h.status === handle_status.Abierto; // -> true
+</code>
 ===== DEMO: Símbolos en nombres de métodos =====
+Queremos hacer un objeto que sirva para mostrar información de otros objetos:
+<code javascript>
+var Dumper = function() {
+    this.dumpObject = function(obj) {
+        console.log("Dumping object");
+        if (typeof(obj["dump"]) == "function") {
+            obj["dump"]();
+        } else {
+            for (var k in obj) {
+                console.log(k, obj[k]);
+            }
+        }
+    }
+}
+</code>
+Creamos un objeto:
+<code javascript>
+var a = {v: 42, ov: 69, foo() {} };
+var b = {v: 42, ov: 69, foo() {}, dump() { console.log("dumping b"); } };
+var myDumper = new Dumper();
+myDumper.dumpObject(a);
+myDumper.dumpObject(b);
+</code>
+Para evitar colisiones con otros métodos ''dump'':
+<code javascript>
+var Dumper = function() {
+    this.dumpObject = function(obj) {
+        console.log("Dumping object");
+        if (typeof(obj[Dumper.dump]) == "function") {
+            obj[Dumper.dump]();
+        } else {
+            for (var k in obj) {
+                console.log(k, obj[k]);
+            }
+        }
+    }
+}
+Dumper.dump = Symbol("dump");
+var a = {v: 42, ov: 69, foo() {}, [Dumper.dump]() { console.log("dumping a"); } };
+var myDumper = new Dumper();
+myDumper.dumpObject(a);
+</code>
+Ahora este código no tendrá colisiones con ningún otro objeto.
 ===== Símbolos globales =====
+A pesar de que el objetivo básico de los símbolos es proporcionar nombres únicos y evitar las colisiones, de forma que solo quien tenga acceso al símbolo original podrá reproducir este nombre, **ECMAScript 2015 da la posibilidad de crear símbolos globales**. Un símbolo global es un símbolo pero que cualquiera que conozca la cadena identificativa de este símbolo puede recrear:
+<code javascript>
+var s1 = Symbol.for("s");
+var s2 = Symbol.for("s");
+s1 === s2;  // true
+s1 == s2;   // true
+var s3 = Symbol("s");
+s1 === s3;  // false
+var s4 = Symbol.for("s4");
+s1 === s4;  // false
+</code>
+Los símbolos globales se crean con ''Symbol.for()'' y se le pasa la cadena a usar como identificador. Cualquiera que conozca esta cadena puede usar de nuevo ''Symbol.for()'' para obtener el símbolo. En el código anterior se ve como ''s1'' y ''s2'' son iguales (ambas están creadas con ''Symbol.for'' y la misma cadena identificativa). Por otro lado ''s3'' no es igual a ''s1'' (o ''s2'') ya que, a pesar de usar la misma cadena identificativa, no se trata de un símbolo global. Por último, ''s4'' también es distinto de ''s1'' y ''s2'' ya que, a pesar de ser un símbolo global, se ha usado otra cadena identificativa para crearlo.
+Los símbolos globales permiten seguir usando símbolos para métodos o valores concretos, pero evitan el tener que exponer este símbolo para quien necesite usarlo.
+En el vídeo anterior, teníamos que exponer el símbolo a través de la variable ''Dumper.dump'', para que los usuarios de nuestro objeto ''Dumper'' pudiesen usar este símbolo para crear el método específico. Usando un símbolo global, no es necesario exponer el símbolo (basta con que los usuarios sepan el identificador y luego usen ''Symbol.for''). La contrapartida es que podemos volver a tener colisiones si dos objetos distintos esperan métodos (o propiedades) cuyo nombre sea el mismo símbolo global. Pero dado que el identificador es una cadena, la probabilidad de colisiones (si cada librería elige bien sus identificadores) es menor que usando simplemente nombres de métodos (que al tener que cumplir ciertas reglas sintácticas son más limitados).