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

Question

我正在查看一些ES6代码，并且我不明白@符号放在变量前面时的作用。我能找到的最接近的事情与私人领域有关吗？

我正在从redux library：

查看代码

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

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

问题在于，目前还不清楚 是装饰器。给出的示例中的装饰器不仅仅是@符号，而是@connect函数。简单地说，@connect函数装饰 CounterApp类。

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

我没有对此进行太多调查，但这似乎是一种封装你的状态到道具和调度到道具映射的方法，因此它们可以伴随你的组件，而不是位于不同的文件中。

Answer 2

这是装饰者。将提案添加到ECMAScript中。在https://github.com/wycats/javascript-decorators

上有多个ES6和ES5等效示例

  

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

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

Answer 3

什么是@myDecorator()？

javascript中的@符号代表装饰器。 ES6中不存在装饰器，因此您与装饰器一起使用的in代码可能已转换为可以在任何浏览器中运行的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