¿Cuáles son las clases y proxies en JavaScript?

Clases : son casi similares a las funciones, excepto que usan una palabra clave de clase en lugar de una palabra clave de función. Otra diferencia importante entre las funciones y las clases es que las funciones se pueden llamar en el código antes de que se definan, mientras que las clases se deben definir antes de que se construya un objeto de clase en JavaScript; de lo contrario, ejecutar el código generará un error de referencia.

Definición de una clase: una clase se puede definir utilizando una palabra clave de clase junto con una función constructora para inicializarla.

Sintaxis:

class Classname {
    constructor(property1, property2) {
        this.property1 = property1;
        this.property2 = property2;
    }
}

Ejemplo: El siguiente ejemplo describe una clase simple.

JavaScript

<script>
    class Employee {
        constructor(name, id) {
            this.name = name;
            this.id = id;
        }
    }
    let Employee1 = new Employee("Suraj", 533);
    console.log(Employee1);
</script>

Producción:

Employee {name: 'Suraj', id: 533}
id: 533
name: "Suraj"
[[Prototype]]: Object

Expresiones de clase: También podemos definir una clase usando expresiones de clase . Pueden ser de dos tipos, a saber, «nombrados» o «sin nombre». Se puede acceder al nombre de una clase mediante la propiedad de nombre .

Sintaxis:

let Employee = class {
      constructor(name, id) {
          this.name = name;
          this.id = id;
      }
}

Ejemplo: 

JavaScript

<script>
  
   // Unnamed class
    let Employee1 = class {
        constructor(name, id) {
            this.name = name;
            this.id = id;
        }
    }
    console.log(Employee1.name);   
  
   // Named class
    let Employee2 = class Intern {
        constructor(name, id) {
            this.name = name;
            this.id = id;
        }
    }
    console.log(Employee2.name);        
</script>

Producción:

Employee1
Intern

Métodos de clase: También podemos definir métodos dentro de clases. Puede ser con o sin parámetros. 

Sintaxis:

class Classname {
 constructor(property1, property2) {
   this.property1 = property1;
   this.property2 = property2;
 }
 method1() { ... }
}

Ejemplo:

JavaScript

<script>
    class Employee {
        constructor(name, id) {
            this.name = name;
            this.id = id;
        }
        
        // Without parameter
        getname(){
            return "Name of Employee: "+this.name; 
        }
        
        // With parameter
        getdept(department){
            return "Works in " + department;
        }
    }
  
    let Employee1 = new Employee("Suraj", 533);
    console.log(Employee1.getname());
    console.log(Employee1.getdept("Finance department"));
</script>

Producción:

Name of Employee: Suraj
Works in Finance department

Proxis: Los proxies son objetos que se utilizan para redefinir las operaciones fundamentales de un objeto. Nos permite crear un proxy de otro objeto.

Parámetros:

Un objeto proxy acepta dos parámetros que se describen a continuación:

  • target: Es el objeto original del que queremos envolver con proxy.
  • controlador: un objeto cuyas propiedades definen el comportamiento del proxy si se realiza una operación en ese proxy.

Sintaxis:

const target = {
   property1: "first property",
   property2: "second property"
};
const handler = { ... };
const proxy1 = new Proxy(target, handler);

Ejemplo:

JavaScript

<script>
    const target = {
        property1: "GeeksforGeeks",
        property2: "Computer science portal"
    };
  
    const handler = {};
    const proxy = new Proxy(target, handler);
  
    console.log(proxy.property1); 
    console.log(proxy.property2); 
</script>

Producción:

GeeksforGeeks
Computer science portal

Dado que el controlador está vacío, no afecta al destino. Por lo tanto, el proxy se comporta como su destino original.

También podemos definir operaciones dentro del controlador para cambiar las propiedades del proxy de su objetivo original. Para esto, necesitamos usar el controlador get() que puede acceder a las propiedades del objetivo y manipular las propiedades dentro del proxy. La clase reflect ayuda a aplicar las propiedades originales del objetivo al proxy.

Ejemplo: Aplicamos la condición if en el controlador, para verificar la «propiedad2» del objetivo, la salida debe cambiarse de la propiedad original del objetivo.

JavaScript

<script>
    const target = {
        property1: "GeeksforGeeks",
        property2: "Computer science portal"
    };
  
    const handler = {
        get: function (target, prop, receiver) {
            if (prop === "property2") {
                return "For computer science geeks";
            }
            else{
                return Reflect.get(target,prop);
            }
        }
     }
        const proxy = new Proxy(target, handler);
  
        console.log(proxy.property1); 
        console.log(proxy.property2); 
</script>

Producción:

GeeksforGeeks
For computer science geeks

Publicación traducida automáticamente

Artículo escrito por souvikm02 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *