¿Qué son los decoradores y cómo se usan en JavaScript?

Los decoradores son la forma de envolver una pieza de código con otra o aplicar un envoltorio alrededor de una función en JavaScript. Los decoradores son el patrón de diseño que permite agregar comportamiento a un objeto individual, ya sea de forma estática o dinámica, sin afectar el comportamiento de otros objetos de la misma clase. Se utilizan para mejorar la funcionalidad de la función sin modificar la función subyacente. Simplemente están modificando el comportamiento de la función o el método que se le pasó al devolver una nueva función. Los decoradores ya se han usado en lenguajes como Python y C#, ahora también se usan en JavaScript. 

• Sintaxis: 

let variable=function(object) {
  object.property='characteristic';
}

// Use as decorator
@variable   
class GFG
{ }
console.log(GFG.property);

• Ejemplo: este ejemplo implementa el trabajo de los decoradores utilizando una versión inferior de JavaScript. En este ejemplo, la función add toma como parámetro la función print . Aquí la función de impresión funciona como decorador. Ayuda a concatenar la string «es mejor» con la string pasada «GFG» . Aquí usamos la función «agregar» para extender y ejecutar la función «imprimir» concatenando la string.

<script>
// Working of decorators in javascript
 
// "add" function takes the function as
// a parameter for wrapping function
// "print" is wrapped
function add(fn) {
 
  return function(s) {
 
    var gg = s + ' is Best';
 
    // By concatenating we extend
    // the function "add"
    fn(gg);
  }
}
 
// Decorated function
function print(s) {
  document.write(s);
}
 
// Calling "add"
var g = add(print);
g('GFG');
</script>

• Producción: 

GFG is Best

Procedimiento para ejecutar: Para ejecutar decoradores, se requiere compatibilidad con transpiler en los navegadores, pero en la actualidad ningún navegador es compatible con esto. 

• Paso 1: usamos BabelJS y luego podemos ejecutar decoradores en los navegadores. Aquí usaremos jsfiddle para ejecutar el código. 
• Paso 2: En jsfiddle, seleccione la opción Babel+JSX , de lo contrario, el programa no se ejecutará, solo JavaScript mostrará el error @ . 

El siguiente ejemplo ilustra los decoradores en JavaScript: 

• Ejemplo 1: 

let variable = function(target) {
  target.property = 'GFG is best';
}
 
// Decorator
@variable 
class GFG
{ }
  
// Print in the console
console.log(GFG.property);

• Producción: 

GFG is best

• Ejemplo 2: 

let variable = function(color) {
    return function (target) {
      target.property = color;
  }
};
  
// The value is passed in the decorator
@variable('GFG is Green')
class GFG
{ }
   
console.log(GFG.property);

• Producción: 

GFG is Green

¿Por qué usar decoradores?  
Podemos decorar un código usando decoradores, pero esta decoración es difícil de aplicar y también es difícil aplicar las mismas técnicas a otras piezas de código o envolver una pieza de código con otra o aplicar un envoltorio alrededor de una función. En ES6, los decoradores pueden resolver estas dificultades. Los decoradores permiten una forma eficiente y comprensible de envolver una pieza de código con otra función u otro código. Además, los decoradores proporcionan una sintaxis clara para aplicar estos envoltorios. Los decoradores de JavaScript no son compatibles directamente, pero en el futuro es posible que se agregue soporte de decoradores a javascript.

Tipos de Decorador: Los decoradores son llamados por los detalles apropiados del elemento que será decorado. Los decoradores son en realidad funciones que devuelven otra función. Ahora se admiten dos tipos de decoradores:  

• Decoradores de miembros de la clase
• miembros de clases

Decoradores de miembros de clase: estos decoradores se aplican a un solo miembro de una clase. Este decorador tiene propiedades, métodos, getters, setters. Este decorador acepta 3 parámetros:  

• target: La clase a la que pertenece el miembro.
• nombre: Nombre del miembro de la clase.
• descriptor: descripción del miembro que es el objeto que se pasa a Object.defineProperty .

Ejemplo 1: En este ejemplo, estamos pasando dos argumentos y aquí la función decoradora verifica si el descriptor es una función o no y luego imprime los argumentos y la suma de ellos. La función add está decorada aquí usando otra función gfg . 

// Decorator function
function gfg(target, name, descriptor) {
  var fn = descriptor.value;
 
  // Checks if "descriptor.value"
  // is a function or not
  if (typeof fn == 'function') {
    descriptor.value = function(...args) {
  
      // Document.write(`parameters: ${args}`+"<br>");
      console.log(`parameters: ${args}`);
      var result = fn.apply(this, args);
  
      // Document.write(`addition: ${result}`);
  
      // Print the addition of passed arguments
      console.log(`addition: ${result}`);
                  
      return result;
    }
  }
  return descriptor;
 }
    
  
class geek {
  @gfg
  add(a, b) {
    return a + b;
  }
}
  
var e = new geek();
e.add(100, 200);

• Producción:

parameters: 100, 200
addition: 300

• Ejemplo 2: 

let readonly = function(target, key, descriptor) {
  descriptor.writable = false;
    
  return descriptor;
}
 
class car {
  constructor(color) {
      this.color = color;
  }
   
  // Decorator
  @readonly
  getColor() {
      return this.color;
  }
}
  
const rCar = new car('car is Black');
  
// When  descriptor.writable = false;
rCar.getColor = function() {
   
    // When  descriptor.writable = true;
    return 'car is not Black'
}
  
console.log(rCar.getColor());

• Producción: 

car is Black

Miembros de clases: estos decoradores se aplican a toda la clase. Estas funciones se llaman con un solo parámetro que se va a decorar. Esta función es una función constructora. Estos decoradores no se aplican a cada instancia de la clase, solo se aplican a la función constructora. Estos decoradores son menos útiles que los decoradores de miembros de clase. Porque podemos usar una función simple para hacer todo lo que pueden hacer estos decoradores.  

• Ejemplo: 

function log()
 
// Decorator function
{
  return function decorator()
    {
    // "arrow" function
    return (...args) =>
        {
      console.log(`Parameters : args`);
      return new Class(...args);
    };
  }
}
 
// Decorators
@log 
class gfg
{
  constructor(name, category) {}
}
 
const e = new gfg('geek', 'code');
 
// Arguments for Demo: args
console.log(e);

• Producción: 

(...args) =>  
    {
      console.log(`Parameters : args`);
      return new Class(...args);
    }