符号(@)在ES6 javascript中做什么?(ECMAScript 2015)

What does the at symbol (@) do in ES6 javascript? (ECMAScript 2015)

本文关键字：什么 ECMAScript 2015 javascript ES6 符号      更新时间：2023-09-26

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

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

这是我找到的一篇关于这个话题的博客文章:https://github.com/zenparsing/es-private-fields

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

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

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

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

我还没有对此进行过多的研究，但这似乎是一种封装状态到道具和调度到道具映射的方法，因此它们伴随着组件而不是位于另一个文件中。

这是装饰符。这是一个要添加到ECMAScript中的提案。javascript-decorators上有多个ES6和ES5的等效示例。

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

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

什么是@myDecorator() ?

javascript中的@符号代表一个装饰器。在ES6中不存在装饰器，所以你正在使用装饰器的代码可能会被翻译成可以在任何浏览器中运行的javascript版本。

什么是decorator?

装饰器动态扩展(即装饰)对象的行为。在运行时添加新行为的能力是由Decorator对象完成的，该对象将自己"包装"在原始对象周围。装饰器在javascript中不仅仅是一个概念。它是一个在所有面向对象编程语言中使用的设计模式。以下是维基百科上的定义:

在面向对象编程中，装饰器模式是一个设计pattern允许将行为添加到单个对象;，而不影响其他对象的行为相同的类。装饰器模式对于遵循单一职责原则，因为它允许功能划分为具有独特关注区域的类

为什么要使用装饰器?

对象的功能可以在运行时使用装饰器时修改。例如，在您的代码中，您只需导入装饰器并将其添加到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
相关文章：