Anotación de JavaScript: cómo los decoradores agregarán la sintaxis de anotación a las clases

1. Anotaciones antes de la propuesta de los decoradores
2. una cartilla sobre decoradores
3. Sintaxis de un decorador
4. la evaluación de un decorador
5. Llamando a los decoradores
6. un ejemplo de decoradores

Este artículo explica cómo se ven las anotaciones en JavaScript actual. Decimos anotaciones porque no son como las anotaciones clásicas en un lenguaje como Java.

Sin embargo, a partir del 24 de abril de 2022, Decorators sigue siendo una propuesta de Etapa 3. Esto significa que los decoradores aún no están disponibles en JavaScript.

Sin embargo, cuando estén disponibles, proporcionarán una forma de agregar sintaxis de anotación para las declaraciones de clase.

Anotaciones antes de la propuesta de los decoradores

Antes de las propuestas de Decorators en JavaScript, lo más parecido a una anotación es la directiva "use script". Por ejemplo:

(function() {
'use strict';
// code in strict mode
})();

En el código anterior, la directiva "use strict" provoca la ejecución en modo estricto dentro de la función.

una cartilla sobre decoradores

De la propuesta de decoradores, los decoradores son funciones que puede usar para metaprogramar y agregar funcionalidad a un valor sin cambiar su comportamiento externo. Trabajarán en lo siguiente.

1. Clases
2. Métodos de clase
3. Campos de clase
4. Accesores de clase
5. Accesos automáticos de clase

Después de llamar a un decorador en estos elementos, un decorador puede hacer lo siguiente:

1. Un decorador puede reemplazar un método con otro método o una clase con otra clase.
2. Los decoradores pueden proporcionar acceso al valor decorado a través de funciones de acceso.
3. Los decoradores pueden inicializar el valor que desea decorar.

Sintaxis de un decorador

La propuesta de Decorators se encuentra actualmente en la Etapa 3; sin embargo, usa la sintaxis de la Etapa 2. Por lo tanto, lo siguiente se aplica a la sintaxis de un decorador.

1. Sus expresiones están restringidas a una cadena de variables. Además, accede a la propiedad con notación de puntos y no con corchetes.

   Sin embargo, puede usar @(expresión) si desea una expresión arbitraria.

2. Puede decorar expresiones de clase y declaraciones de clase.

3. Los decoradores de clase vienen después de exportar y predeterminado.

la evaluación de un decorador

La evaluación de un decorador sigue los siguientes pasos.

1. Las expresiones de decorador se evalúan con nombres de propiedad calculados.
2. Los decoradores se denominan funciones durante la definición de clase. Esto sucede después de evaluar los métodos pero antes del prototipo y el constructor.
3. Los decoradores mutan el constructor y los prototipos a la vez.

Llamando a los decoradores

Cuando llamas a los decoradores, reciben dos parámetros. Estos parámetros son:

1. El valor que quieres decorar. Este valor es indefinido en el caso de campos de clase.
2. Un objeto de contexto que contiene información sobre el valor que se está decorando.

un ejemplo de decoradores

El siguiente es un código de muestra inspirado en un código similar de la propuesta de Decorator.

export function log(target) {
  if (typeof target.descriptor.value === 'function') {
    const original = target.descriptor.value;
    target.descriptor.value = function(...args) {
      console.log('arguments: ', args);
      const result = original.apply(this, args);
      console.log('result: ', result);
      return result;
    }
  }
  return target;
}

Posteriormente, el Decorador funcionará como tal:

import {log} from './decorators.js';

export default class DogSounds {
  @log
  barkSound() {
    console.log('woof');
  }

  @log
  say(to_say) {
    console.log(to_say)
    return 'The dog said ' + to_say
  }
}

Del código anterior, puede notar que la aplicación del decorador a través del símbolo @ es similar a la anotación de un lenguaje como Java.

1. ¿Podemos usar decoradores en JavaScript?

   No. Porque a partir de abril de 2022, sigue siendo una propuesta ECMA de Etapa 3.

2. ¿Cuándo podemos usar Decorators en JavaScript?

   Puede usar Decorators en JavaScript cuando la propuesta de Decorators llegue a la Etapa 4 y se incluya en la próxima edición de ECMAScript.