在符号（@）在ES6的JavaScript做什么？ （ECMAScript 2015）

我正在查看一些ES6代码，我不明白@符号放在variables前面的作用。 我能find的最接近的东西与私人领域有什么关系？

我正在从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的博客文章

在这个博客文章中，所有的例子都在一个类的上下文中 – 当这个符号在模块中被使用时，这意味着什么？

Answer 1

这是一个装饰者 。 这是一个添加到ECMAScript的build议。 有多个ES6和ES5的等价例子： https ： //github.com/wycats/javascript-decorators

装饰器dynamic地改变函数，方法或类的function，而不必直接使用子类或更改被装饰的函数的源代码。

它们通常用于控制访问，注册，注释。

Answer 2

我发现接受的答案不足以帮助我解决这个问题，所以我添加了一些更多的细节来帮助其他人find答案。

问题是，目前还不清楚装饰者到底是什么 。 在给出的示例中，装饰器不仅仅是@符号，它是@connect函数。 简单地说，@ @connect函数正在装饰 CounterApp类。

在这种情况下做什么？ 它将state.counter值连接到类的道具。 请记住，在redux中， connect函数有两个参数： mapStateToProps和mapDispatchToProps 。 在这个例子中，它只接受一个参数 – mapStateToProps 。

我没有太多的调查，但这似乎是一种封装你的状态到道具和派遣到道具的映射，使他们陪同你的组件，而不是位于不同的文件。