web-dev-qa-db-ja.com

ES6 javascriptでアットマーク（@）は何をしますか？ （ECMAScript 2015）

私はいくつかの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

このブログ投稿では、すべての例はクラスのコンテキスト内にあります-シンボルがモジュール内で使用されるとはどういう意味ですか？

javascriptreactjsecmascript-next
54
Kevin Wu

それはdecoratorです。 ECMAScriptに追加されるのはproposalです。 javascript-decorators には、複数のES6およびES5の同等の例があります。

デコレータは、サブクラスを直接使用したり、装飾されている関数のソースコードを変更したりすることなく、関数、メソッド、またはクラスの機能を動的に変更します。

これらは一般に、アクセス、登録、注釈を制御するために使用されます。

35
Kit Sunde

受け入れられた答えはこれを整理するのに十分ではないことがわかったので、これを見つける他の人を助けるためにもう少し詳細を追加しています。

問題は、それが正確に不明確であるということですwhatはデコレーターです。この例のデコレータは、@シンボルだけでなく、@connect関数でもあります。簡単に言えば、@connect関数は装飾CounterAppクラスです。

そして、この場合は何をしていますか？ 接続クラスの小道具へのstate.counter値です。 reduxでは、connect関数はmapStateToPropsとmapDispatchToPropsの2つの引数を取ることに注意してください。この例では、mapStateToPropsという1つの引数のみを取ります。

これについてはあまり調査していませんが、これは別のファイルに配置されるのではなく、コンポーネントに付随するように、状態からプロップへのマッピングとディスパッチからプロップへのマッピングをカプセル化する方法のようです。

75
Kryten

@myDecorator()とは何ですか？

JavaScriptの@記号は、デコレータを表します。デコレータはES6に存在しないため、デコレータで作業しているコードは、おそらくどのブラウザでも実行できるjavascriptのバージョンに変換されます。

デコレータとは何ですか？

デコレータは、オブジェクトの動作を動的に拡張（装飾）します。実行時に新しい動作を追加する機能は、元のオブジェクトを「ラップ」するデコレーターオブジェクトによって実現されます。デコレータは、javascriptの単なる概念ではありません。すべてのオブジェクト指向プログラミング言語で使用されるデザインパターンです。ウィキペディアの定義は次のとおりです。

オブジェクト指向プログラミングでは、decorator patternはdesign 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
7
Willem van der Veen