¿Qué hace el símbolo at ( @ ) en javascript ES6? (ECMAScript 2015)
Estoy viendo algún código ES6 y no entiendo lo que hace el símbolo @ cuando se coloca delante de una variable. ¿Lo más parecido que pude encontrar tiene algo que ver con campos privados?
Código que estaba mirando de 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 entrada de blog que encontré sobre el tema: https://github.com/zenparsing/es-private-fields
En esta entrada de blog todos los ejemplos están en el contexto de una clase - ¿qué significa cuando el símbolo es utilizado dentro de un módulo?
2 answers
Es un decorador . Es una propuesta para ser agregada a ECMAScript. Hay varios ejemplos equivalentes a ES6 y ES5 en: https://github.com/wycats/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 utilizan comúnmente para controlar el acceso, registro, anotación.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-05 02:29:34
Encontré que la respuesta aceptada no era suficiente para ayudarme a resolver esto, así 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
es decorando la clase CounterApp
.
Y qué está haciendo en este caso? Es conectando el valor state.counter
a los apoyos de la clase. Recuerde que en redux la función connect
toma dos argumentos: mapStateToProps
y mapDispatchToProps
. En este ejemplo, está tomando solo un argumento - mapStateToProps
.
No he investigado esto demasiado, pero esto parece ser una manera de encapsular sus asignaciones de estado a props y de despacho a props para que acompañen a sus componentes en lugar de estar ubicados en un archivo diferente.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-24 14:49:27