at符号（@）在ES6 javascript中的作用是什么？（ECMAScript 2015）

我正在看一些ES6代码，我不理解@符号放在变量前面时的作用。我能找到的最接近的东西与私人领域有关

我在看的代码来自：

import React，{Component}来自'React'；
从“redux”导入{bindActionCreators}；
从'redux/react'导入{connect}；
从“../components/Counter”导入计数器；
导入*作为来自“../actions/antractions”的抵消；
@连接（状态=>({
计数器：state.counter
}))
导出默认类CounterApp扩展组件{
render（）{
const{counter，dispatch}=this.props；
返回(
);
}
}

以下是我在这个主题上找到的一篇博文：

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

它是一个装饰器。这是一个添加到ECMAScript中的建议。上有多个ES6和ES5等效示例：

装饰器动态地改变函数、方法或类的功能，而不必直接使用子类或更改被装饰函数的源代码

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

它是一个装饰器。这是一个添加到ECMAScript中的建议。上有多个ES6和ES5等效示例：

装饰器动态地改变函数、方法或类的功能，而不必直接使用子类或更改被装饰函数的源代码

---

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

我发现接受的答案不足以帮助我解决这个问题，所以我添加了更多的细节，以帮助其他人找到它

问题是不清楚到底什么是装饰师。示例中的装饰器不仅仅是

@

符号，它是

@connect

函数。简单地说，

@connect

函数是装饰

CounterApp

类

在这种情况下它在做什么？它将

state.counter

值连接到类的道具。请记住，在redux中，

connect

函数有两个参数：

mapstatetrops

和

mapsdispatchtoprops

。在本例中，它只接受一个参数-

mapstatetops

---

我没有对此进行过太多的研究，但这似乎是一种将您的状态封装到props并发送到props映射的方法，这样它们就可以与您的组件一起使用，而不是位于不同的文件中。

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

问题是不清楚到底什么是装饰师。示例中的装饰器不仅仅是

@

符号，它是

@connect

函数。简单地说，

@connect

函数是装饰

CounterApp

类

在这种情况下它在做什么？它将

state.counter

值连接到类的道具。请记住，在redux中，

connect

函数有两个参数：

mapstatetrops

和

mapsdispatchtoprops

。在本例中，它只接受一个参数-

mapstatetops

我没有对此进行过太多的研究，但这似乎是一种将您的状态封装到props并分派到props映射的方法，这样它们就可以与您的组件一起使用，而不是位于不同的文件中。

什么是

@myDecorator（）

？ javascript中的

@

符号表示装饰器。

ES6

中没有decorator，因此使用decorator的in代码可能会被传输到可以在任何浏览器中运行的javascript版本

什么是装饰师？ 装饰器动态扩展（即装饰）对象的行为。在运行时添加新行为的能力是由一个装饰器对象完成的，该对象围绕原始对象“包装自己”。装饰器不仅仅是javascript中的一个概念。它是所有面向对象编程语言中使用的设计模式。以下是维基百科的定义：

在面向对象编程中，装饰器模式是一种设计 允许将行为添加到单个对象的模式， 动态地，而不影响来自 同一班。decorator模式通常有助于遵守 单一责任原则，因为它允许 分为具有独特关注领域的类别

为什么要用装饰工？ 使用装饰器时，可以在运行时修改对象的功能。例如，在代码中，您只需导入decorator并将其添加到

CounterApp

类中。现在，您的

CounterApp

动态添加了功能，而您不知道实现细节。

例子： 什么是

@myDecorator（）

？ javascript中的

@

符号表示装饰器。

ES6

中没有decorator，因此使用decorator的in代码可能会被传输到可以在任何浏览器中运行的javascript版本

什么是装饰师？ 装饰器动态扩展（即装饰）对象的行为。在运行时添加新行为的能力是由一个装饰器对象完成的，该对象围绕原始对象“包装自己”。装饰器不仅仅是javascript中的一个概念。它是所有面向对象编程语言中使用的设计模式。以下是维基百科的定义：

在面向对象编程中

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

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