at 符号 (@) 在 ES6 javascript 中有什么作用？ （ECMAScript 2015）
What does the at symbol (@) do in ES6 javascript? (ECMAScript 2015)
我正在查看一些 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)} />
);
}
}
这是一篇博客 post 我发现的主题是：https://github.com/zenparsing/es-private-fields
在此博客中 post 所有示例都在 class 的上下文中 - 在模块中使用该符号是什么意思？
这是一个装饰器。 提议 添加到 ECMAScript。 javascript-decorators 上有多个 ES6 和 ES5 等效示例。
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.
它们通常用于控制访问、注册、注释。
我发现接受的答案不足以帮助我解决这个问题，所以我添加了更多细节来帮助找到这个问题的其他人。
问题是不清楚 装饰器到底是什么。给定示例中的装饰器不仅仅是 @ 符号，它是 @connect 函数。简单的说，@connect函数就是装饰CounterAppclass.
在这种情况下它在做什么？它 将 state.counter 值连接到 class 的属性。请记住，在 redux 中，connect 函数有两个参数：mapStateToProps 和 mapDispatchToProps。在此示例中，它仅采用一个参数 - mapStateToProps.
我没有对此进行太多调查，但这似乎是一种封装状态到道具和调度到道具映射的方法，因此它们伴随着您的组件，而不是位于不同的文件中。
什么是 @myDecorator()？
javascript中的@符号代表装饰器。 ES6 中不存在装饰器，因此您使用装饰器的代码可能被转换为 javascript 的版本，在任何浏览器中都可以是 运行。
什么是装饰器？
装饰器动态扩展（即装饰）对象的行为。在 运行 时间添加新行为的能力是由 Decorator 对象实现的，它“将自身包裹”在原始对象周围。装饰器不仅仅是 javascript 中的一个概念。它是所有面向对象编程语言中使用的设计模式。这是来自维基百科的定义：
In object-oriented programming, the decorator pattern is a design
pattern that 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
为什么要使用装饰器？
使用装饰器时，可以在 运行 时修改对象的功能。例如，在您的代码中，您只需导入装饰器并将其添加到您的 CounterApp class。现在您的 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
我正在查看一些 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)} />
);
}
}
这是一篇博客 post 我发现的主题是：https://github.com/zenparsing/es-private-fields
在此博客中 post 所有示例都在 class 的上下文中 - 在模块中使用该符号是什么意思？
这是一个装饰器。 提议 添加到 ECMAScript。 javascript-decorators 上有多个 ES6 和 ES5 等效示例。
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.
它们通常用于控制访问、注册、注释。
我发现接受的答案不足以帮助我解决这个问题，所以我添加了更多细节来帮助找到这个问题的其他人。
问题是不清楚 装饰器到底是什么。给定示例中的装饰器不仅仅是 @ 符号，它是 @connect 函数。简单的说，@connect函数就是装饰CounterAppclass.
在这种情况下它在做什么？它 将 state.counter 值连接到 class 的属性。请记住，在 redux 中，connect 函数有两个参数：mapStateToProps 和 mapDispatchToProps。在此示例中，它仅采用一个参数 - mapStateToProps.
我没有对此进行太多调查，但这似乎是一种封装状态到道具和调度到道具映射的方法，因此它们伴随着您的组件，而不是位于不同的文件中。
什么是 @myDecorator()？
javascript中的@符号代表装饰器。 ES6 中不存在装饰器，因此您使用装饰器的代码可能被转换为 javascript 的版本，在任何浏览器中都可以是 运行。
什么是装饰器？
装饰器动态扩展（即装饰）对象的行为。在 运行 时间添加新行为的能力是由 Decorator 对象实现的，它“将自身包裹”在原始对象周围。装饰器不仅仅是 javascript 中的一个概念。它是所有面向对象编程语言中使用的设计模式。这是来自维基百科的定义：
In object-oriented programming, the decorator pattern is a design pattern that 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
为什么要使用装饰器？
使用装饰器时，可以在 运行 时修改对象的功能。例如，在您的代码中，您只需导入装饰器并将其添加到您的 CounterApp class。现在您的 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