Diferencias

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

--- informatica:programacion:cursos:programacion_avanzada_javascript:proxies [2024/10/28 14:55] – [DEMO: Creando un "congelador" de objetos - Parte 2] tempwin
+++ informatica:programacion:cursos:programacion_avanzada_javascript:proxies [2024/10/30 16:03] (actual) – [Recursos] tempwin
@@ Línea 413: / Línea 413: @@
 <code javascript>
+// Utilizaremos un WeakMap para guardar las variables privadas
+// de los objetos de tipo Freezer
+const _privates = new WeakMap();
+const createConfig = function(pr) {
+    return {
+        set (target, key, receiver) {
+            var prop = target[key];
+            if (pr.frozen) {
+                return prop.
+            } else {
+                target[key] = receiver;
+                return receiver;
+            }
+        }
+    }
+}
+class Freezer {
+    constructor(obj) {
+       let pr = {};
+       pr.frozen = false; // el objeto está congelado?
+       _privates.set(this, pr)
+       pr.proxy = new Proxy(obj, {});
+    }
+    // Método para "congelar" o "descongelar" el objeto
+    frozen(value) {
+        let pr = _privates.get(this);
+        pr.frozen = value ? true : false;
+    }
+    get value() {
+        let pr = _privates.get(this);
+        return pr.proxy;
+    }
+}
+</code>
+Probamos:
+<code javascript>
+var obj = {v:42};
+var freezer = new Freezer(obj);
+var proxy = freezer.value;
+proxy; // Object { v: 42 }
+// Congelamos el objeto:
+freezer.frozen(true);
+// Comprobemos que realmente está congelado:
+prop.v = 100;
+proxy.v; // 42
+// Para descongelarlo:
+freezer.frozen(false);
+prop.v = 200;
+proxy.v; // 200
 </code>
 ===== DEMO: Creando un "congelador" de objetos - Parte 3 =====
+Después de lo anterior, vamos a agregar un método ficticio al proxy que llamándolo nos permita congelar el propio objeto.
+Queremos lograr hacer algo como ''proxy[Freezer.freeze](true);''.
+Vamos a ello:
+<code javascript>
+// Utilizaremos un WeakMap para guardar las variables privadas
+// de los objetos de tipo Freezer
+const _privates = new WeakMap();
+// Para asegurarnos de que el nombre del método que crearemos
+// en el proxy es único y no tenga conflictos, utilizaremos un símbolo
+const _freeze = Symbol("freeze");
+const createConfig = function(pr) {
+    return {
+        set (target, key, receiver) {
+            var prop = target[key];
+            if (pr.frozen) {
+                return prop.
+            } else {
+                target[key] = receiver;
+                return receiver;
+            }
+        },
+        get (target, key, receiver) {
+            if (key === _freeze) {
+                return function(v) {
+                    pr.frozen = v ? true : false;
+                    return pr.frozen;
+                }
+            } else {
+                return target[key];
+            }
+        }
+    }
+}
+class Freezer {
+    constructor(obj) {
+       let pr = {};
+       pr.frozen = false; // el objeto está congelado?
+       _privates.set(this, pr)
+       pr.proxy = new Proxy(obj, {});
+    }
+    // Método para "congelar" o "descongelar" el objeto
+    frozen(value) {
+        let pr = _privates.get(this);
+        pr.frozen = value ? true : false;
+    }
+    get value() {
+        let pr = _privates.get(this);
+        return pr.proxy;
+    }
+    // getter para obtener el símbolo
+    static get freeze() {
+        return _freeze;
+    }
+}
+</code>
+Probamos:
+<code javascript>
+var obj = {v:42};
+var freezer = new Freezer(obj);
+var proxy = freezer.value;
+// Congelamos:
+proxy[Freezer.freeze](true); // true
+proxy.v = 100;
+proxy,.v; // 42
+obj.v; // 42
+// Descongelamos:
+freezer.frozen(false);
+proxy.v = 100;
+proxy.v; // 100
+obj.v; // 100
+</code>
+===== Recursos =====
+  * [[https://developer.chrome.com/blog/es2015-proxies| Introducing ES2015 proxies]]
+  * [[https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy#Extending_constructor|Extendiendo un constructor con un Proxy]] (MDN)
+  * [[https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy#manipulando_nodos_del_dom|Manipulando nodos del DOM]] (MDN)