Что делает символ (@) в ES6 javascript? (ECMAScript 2015)

Я смотрю на некоторый код ES6, и я не понимаю, что делает символ @, когда он помещен перед переменной. Самое близкое, что я мог найти, имеет какое-то отношение к частным полям?

Код, на который я смотрел редукционная библиотека:

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)} />
    );
  }
}

Вот сообщение в блоге, которое я нашел по теме: https://github.com/zenparsing/es-private-fields

В этом блоге все примеры относятся к классу - что это значит, когда символ используется в модуле?

Ответ 1

Это декоратор. Это предложение, которое будет добавлено в ECMAScript. Существует несколько эквивалентных примеров ES6 и ES5: javascript-decorators.

Декораторы динамически изменяют функциональность функции, метода или класса без необходимости непосредственного использования подклассов или изменения исходного кода декорируемой функции.

Они обычно используются для контроля доступа, регистрации, аннотаций.

Ответ 2

Я нашел, что принятый ответ был недостаточным, чтобы помочь мне разобраться в этом, поэтому я добавляю немного больше подробностей, чтобы помочь другим, кто находит это.

Проблема в том, что непонятно, что такое декоратор. Декоратор в приведенном примере - это не только символ @, это функция @connect. Проще говоря, функция @connect украшает класс CounterApp.

И что он делает в этом случае? Он соединяет значение state.counter с реквизитом класса. Помните, что в redux функция connect принимает два аргумента: mapStateToProps и mapDispatchToProps. В этом примере он принимает только один аргумент - mapStateToProps.

Я не слишком много исследовал это, но это, по-видимому, способ инкапсулировать ваши сопоставления между штатами и реквизитами, чтобы они сопровождали ваши компоненты, а не находились в другом файле.

Ответ 3

Что такое `@myDecorator()`?

Символ @ в javascript обозначает декоратор. Декораторы отсутствуют в ES6, поэтому код, с которым вы работаете с декоратором, вероятно, перенесен в версию javascript, которую можно запустить в любом браузере.

Что такое декоратор?

Декоратор динамически расширяет (т.е. декорирует) поведение объектов. Возможность добавления нового поведения во время выполнения осуществляется с помощью объекта Decorator, который оборачивается вокруг исходного объекта. Декоратор - это не просто концепция в javascript. Это шаблон проектирования, используемый во всех объектно-ориентированных языках программирования. Вот определение из Википедии:

В объектно-ориентированном программировании шаблон декоратора является дизайном шаблон, который позволяет добавить поведение к отдельному объекту, динамически, не влияя на поведение других объектов из тот же класс. Шаблон декоратора часто полезен для Принцип единой ответственности, поскольку он позволяет функциональности быть разделены между классами с уникальными проблемными областями

Зачем использовать декоратор?

Функциональные возможности объекта могут быть изменены во время выполнения при использовании декоратора. Например, в своем коде вы просто импортировали декоратор и добавили его в свой класс CounterApp. Теперь ваш CounterApp имеет динамически добавленную функциональность Не зная деталей реализации.

Пример:

// 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