ES6 javascript 中的 at 符号 (@) 有啥作用? (ECMAScript 2015)

Posted

技术标签:

【中文标题】ES6 javascript 中的 at 符号 (@) 有啥作用? (ECMAScript 2015)【英文标题】:What does the at symbol (@) do in ES6 javascript? (ECMAScript 2015)ES6 javascript 中的 at 符号 (@) 有什么作用? (ECMAScript 2015) 【发布时间】:2015-10-27 13:18:56 【问题描述】:

我正在查看一些 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

在这篇博文中,所有示例都在类的上下文中 - 在模块中使用符号时意味着什么?

【问题讨论】:

那些叫做注解。 那些不是 ES6,而是一些实验性的转译器。您链接的文章是 ES7提案 您能否在标题中添加@ 以便在搜索@ javascript 时显示? @adc17 做到了。好主意。 【参考方案1】:

这是一个装饰器。这是一个要添加到 ECMAScript 中的建议。有多个 ES6 和 ES5 等效示例:javascript-decorators。

装饰器可以动态改变函数、方法或类的功能,而无需直接使用子类或更改被装饰函数的源代码。

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

【讨论】:

【参考方案2】:

什么是@myDecorator()

javascript 中的@ 符号代表装饰器。 ES6 中不存在装饰器,因此您使用装饰器的 in 代码可能已转译为可在任何浏览器中运行的 javascript 版本。

什么是装饰器?

装饰器动态扩展(即装饰)对象的行为。在运行时添加新行为的能力是通过一个装饰器对象来实现的,该对象将自己“包裹”在原始对象周围。装饰器不仅仅是 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

【讨论】:

那么connect(...)@connect(...)有什么区别?【参考方案3】:

我发现接受的答案不足以帮助我解决这个问题,所以我添加了更多细节来帮助其他发现这个问题的人。

问题在于不清楚 什么 是装饰器。给出的示例中的装饰器不仅仅是@ 符号,它是@connect 函数。简单地说,@connect 函数是装饰CounterApp 类。

在这种情况下它在做什么?它连接 state.counter 值到类的道具。请记住,在 redux 中,connect 函数有两个参数:mapStateToPropsmapDispatchToProps。在这个例子中,它只接受一个参数 - mapStateToProps

我没有对此进行过多调查,但这似乎是一种封装 state-to-props 和 dispatch-to-props 映射的方法,以便它们伴随您的组件而不是位于不同的文件中。

【讨论】:

@connect 确实做到了,但是,一般来说,但我会说 *有了装饰器,我们只是在飞行中添加功能 *我看到了 @injectIntl()(用于 react-intl), @reduxForm(用于 redux-form)和许多其他类似的用法。

以上是关于ES6 javascript 中的 at 符号 (@) 有啥作用? (ECMAScript 2015)的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Javascript/Lodash/ES6 中同时搜索父对象和子对象?

为啥隐式符号到字符串的转换会导致 JavaScript 中的 TypeError?

脚本链接中的 @ (at) 符号导致异常

PL/SQL 中的双“at”符号含义

如何检查数组中的@(at),并在检查后删除此符号[重复]

ES6 类中的受保护属性(使用符号?)