example - tipos de datos en javascript ejemplos

¿Qué hace el símbolo at(@) en javascript ES6?(ECMAScript 2015)

Question

Estoy mirando un código ES6 y no entiendo qué hace el símbolo @ cuando se coloca frente a una variable. ¿Lo más cercano que pude encontrar tiene algo que ver con los campos privados?

Código que estaba mirando desde la biblioteca redux :

import React, { Component } from ''react'';
import { bindActionCreators } from ''redux'';
import { connect } from ''redux/react'';
import Counter from ''../components/Counter'';
import * as CounterActions from ''../actions/CounterActions'';
@connect(state => ({
counter: state.counter
}))
export default class CounterApp extends Component {
render() {
const { counter, dispatch } = this.props;
return (
<Counter counter={counter}
{...bindActionCreators(CounterActions, dispatch)} />
);
}
}

Aquí hay una publicación de blog que encontré sobre el tema: https://github.com/zenparsing/es-private-fields

En esta publicación de blog, todos los ejemplos están en el contexto de una clase: ¿qué significa cuando el símbolo se usa dentro de un módulo?

Answer 1

¿Qué es @myDecorator() ?

El símbolo @ en javascript representa un decorador. Los decoradores no están presentes en ES6 por lo que el código de entrada que está trabajando con el decorador probablemente se transpuso a una versión de JavaScript que se puede ejecutar en cualquier navegador.

¿Qué es un decorador?

Un decorador extiende (es decir, decora) el comportamiento de un objeto dinámicamente. La capacidad de agregar un nuevo comportamiento en tiempo de ejecución se logra mediante un objeto Decorator que se "envuelve" alrededor del objeto original. Un decorador no es solo un concepto en javascript. Es un patrón de diseño utilizado en todos los lenguajes de programación orientados a objetos. Aquí hay una definición de wikipedia:

En la programación orientada a objetos, el patrón decorador es un patrón de diseño que permite agregar comportamiento a un objeto individual, dinámicamente, sin afectar el comportamiento de otros objetos de la misma clase. El patrón de decorador a menudo es útil para cumplir con el Principio de responsabilidad única, ya que permite que la funcionalidad se divida entre clases con áreas de preocupación únicas.

¿Por qué usar un decorador?

La funcionalidad de un objeto se puede modificar en tiempo de ejecución cuando se usa un decorador. Por ejemplo, en su código simplemente importó el decorador y lo agregó a su clase CounterApp . Ahora su CounterApp ha agregado dinámicamente funcionalidad sin que usted conozca los detalles de implementación.

Ejemplo:

// decorator lights is a function which receives the class as an argument
let lights = function(tree) {
// The behaviour of the class is modified here
tree.treeLights = ''Christmas lights''
}
@lights // the decorator is applied here
class ChristmasTree {}
console.log(ChristmasTree.treeLights); // logs Christmas lights

Answer 2

Descubrí que la respuesta aceptada no era suficiente para ayudarme a resolver esto, por lo que estoy agregando un poco más de detalle para ayudar a otros que encuentren esto.

El problema es que no está claro exactamente qué es el decorador. El decorador en el ejemplo dado no es solo el símbolo @ , es la función @connect . En pocas palabras, la función @connect está decorando la clase CounterApp .

¿Y qué está haciendo en este caso? Está conectando el valor state.counter con los accesorios de la clase. Recuerde que en redux la función de connect toma dos argumentos: mapStateToProps y mapDispatchToProps . En este ejemplo, solo toma un argumento: mapStateToProps .

No he investigado demasiado esto, pero parece ser una forma de encapsular sus asignaciones de estado a accesorios y despacho a accesorios para que acompañen sus componentes en lugar de ubicarse en un archivo diferente.

Answer 3

Es un decorador . Es una propuesta que se agregará a ECMAScript. Hay varios ejemplos equivalentes de ES6 y ES5 en: javascript-decorators .

Los decoradores alteran dinámicamente la funcionalidad de una función, método o clase sin tener que usar directamente subclases o cambiar el código fuente de la función que se está decorando.

Se usan comúnmente para controlar el acceso, el registro, la anotación.