在 ES6 javascript 中 at 符号 (@) 有什么作用？（ECMAScript 2015）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31821084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does the at symbol (@) do in ES6 javascript? (ECMAScript 2015)
提问by Kevin Wu
I'm looking at some ES6 code and I don't understand what the @ symbol does when it is placed in front of a variable. The closest thing I could find has something to do with private fields?
我正在查看一些 ES6 代码，但我不明白 @ 符号放在变量前面时的作用。我能找到的最接近的东西与私人领域有关？
Code I was looking at from the redux library:
我从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)} />
);
}
}
Here is a blog post I found on the topic: https://github.com/zenparsing/es-private-fields
这是我在该主题上找到的博客文章：https: //github.com/zenparsing/es-private-fields
In this blog post all the examples are in the context of a class - what does it mean when the symbol is used within a module?
在这篇博文中，所有示例都在类的上下文中 - 在模块中使用符号是什么意思？
采纳答案by Kit Sunde
It's a decorator. It's a proposalto be added to ECMAScript. There are multiple ES6 and ES5 equivalent examples on: javascript-decorators.
这是一个装饰器。这是一个被添加到 ECMAScript的提议。有多个 ES6 和 ES5 等效示例：javascript-decorators。
Decorators dynamically alter the functionality of a function, method, or class without having to directly use subclasses or change the source code of the function being decorated.
装饰器动态地改变函数、方法或类的功能，而无需直接使用子类或更改被装饰函数的源代码。
They are commonly used to control access, registration, annotation.
它们通常用于控制访问、注册、注释。
回答by Kryten
I found the accepted answer was not enough to help me sort this out, so I'm adding a little more detail to help others who find this.
我发现接受的答案不足以帮助我解决这个问题，所以我添加了更多细节来帮助其他人找到这个。
The problem is that it's unclear exactly whatis the decorator. The decorator in the example given is not just the @symbol, it's the @connectfunction. Simply put, the @connectfunction is decoratingthe CounterAppclass.
问题是不清楚究竟什么是装饰器。给定示例中的装饰器不仅仅是@符号，而是@connect函数。简单地说，该@connect功能被装饰的CounterApp类。
And what is it doing in this case? It's connectingthe state.countervalue to the props of the class. Remember that in redux the connectfunction takes two arguments: mapStateToPropsand mapDispatchToProps. In this example, it's taking only one argument - mapStateToProps.
在这种情况下它在做什么？它连接的state.counter价值类的道具。请记住，在 redux 中，该connect函数有两个参数：mapStateToProps和mapDispatchToProps。在这个例子中，它只接受一个参数 - mapStateToProps。
I haven't investigated this too much, but this appears to be a way to encapsulate your state-to-props and dispatch-to-props mappings so they accompany your components rather than being located in a different file.
我没有对此进行过多调查，但这似乎是一种封装 state-to-props 和 dispatch-to-props 映射的方法，因此它们伴随您的组件而不是位于不同的文件中。
回答by Willem van der Veen
What is @myDecorator()?
什么是@myDecorator()？
The @symbol in javascript stands for a decorator. Decorators are not present in ES6so the in code you are working with the decorator is probably transpiled to an version of javascript which can be run in any browser.
@javascript 中的符号代表装饰器。装饰器不存在，ES6因此您正在使用装饰器的代码可能会转换为可以在任何浏览器中运行的 javascript 版本。
What is a decorator?
什么是装饰器？
A decorator extends (i.e. decorates) an object's behavior dynamically. The ability to add new behavior at runtime is accomplished by a Decorator object which ‘wraps itself' around the original object. A decorator is not just a concept in javascript. It is a design patternused in all object oriented programming languages. Here is a definition from wikipedia:
装饰器动态扩展（即装饰）对象的行为。在运行时添加新行为的能力是由一个装饰器对象实现的，该装饰器对象将自己包裹在原始对象周围。装饰器不仅仅是 javascript 中的一个概念。它是所有面向对象编程语言中使用的设计模式。这是维基百科的定义：
In object-oriented programming, the decorator patternis a design patternthat allows behavior to be added to an individual object, dynamically, without affecting the behavior of other objects from the same class. The decorator pattern is often useful for adhering to the Single Responsibility Principle, as it allows functionality to be divided between classes with unique areas of concern
在面向对象的编程中，装饰器模式是一种设计模式，它允许将行为动态地添加到单个对象中，而不会影响来自同一类的其他对象的行为。装饰器模式对于遵守单一职责原则通常很有用，因为它允许在具有独特关注领域的类之间划分功能
Why use a decorator?
为什么要使用装饰器？
The functionality of an object can be modified at runtime when using a decorator. For example, in your code you simply imported the decorator and added it to your CounterAppclass. Now your CounterApphas dynamically added functionality Without you knowing the implementation details.
使用装饰器时，可以在运行时修改对象的功能。例如，在您的代码中，您只需导入装饰器并将其添加到您的CounterApp类中。现在您 CounterApp已经动态添加了功能，而您不知道实现细节。
Example:
例子：
// 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
