在 ES6 javascript 中 at 符号(@)做什么

我正在看一些 ES6代码，我不明白@符号放在变量前面是做什么的。我能找到的最接近私人领域的东西？

我刚才在看 还原库的代码:

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

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

27556 次浏览
小开
最佳答案

是 装潢师。这是要添加到 ECMAScript 的 建议书。在 Javascript 装饰器上有多个 ES6和 ES5等价的示例。

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

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

小开

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

问题是，它不清楚确切 什么是装饰。给出的例子中的修饰符不仅仅是 @符号，它还是 @connect函数。简单地说，@connect函数是 装饰，CounterApp类。

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

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

小开

什么是 @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

提交答案