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

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

Код, который я просматривал из библиотеки 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)} />
    );
  }
}

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

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


reactjs javascript ecmascript-next
person Kevin Wu    schedule 04.08.2015    source источник
comment
Это так называемые аннотации.   -  person Daniel A. White    schedule 05.08.2015
comment
Это не ES6, а какой-то экспериментальный транспилятор. Статья, на которую вы ссылаетесь, является предложением для ES7.   -  person Bergi    schedule 05.08.2015
comment
Можете ли вы добавить @ к заголовку, чтобы он отображался при поиске @ javascript?   -  person achalk    schedule 28.08.2017
comment
@ adc17 сделал это. Хорошая идея.   -  person baao    schedule 28.08.2017

Ответы (3)


arrow_upward
39
arrow_downward

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

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

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

person Kit Sunde    schedule 04.08.2015

arrow_upward
86
arrow_downward

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

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

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

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

person Kryten    schedule 24.05.2016
comment
@connect действительно делает это, но, вообще говоря, Но я бы сказал *С DECORATOR МЫ ПРОСТО ДОБАВЛЯЕМ ФУНКЦИЮ НА ЛЕТУ * Я видел @injectIntl() (для react-intl), @reduxForm (для redux-form) и многие другие используемые как это. - person Do-do-new; 15.07.2020

arrow_upward
17
arrow_downward

Что такое @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
person Willem van der Veen    schedule 16.10.2018
comment
Так в чем разница между connect(...) и @connect(...)? - person lmat - Reinstate Monica; 24.01.2020