ES6 자바 펼쳐에서 기호 (@)는 무엇을 소유하고 있습니까?

ES6 자바 펼쳐에서 기호 (@)는 무엇을 소유하고 있습니까? (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

이 블로그 게시물에서 모든 예제는 클래스가 있습니다. 이 모듈에서 사용하는 것은 무엇입니까?

---

그것은 A의 장식 입니다. 그것은의 제안 인 ECMAScript를에 추가 할. javascript-decorators 에 ES6 및 ES5에 해당하는 여러 예제가 있습니다.

데코레이터는 서브 클래스를 직접 사용하거나 데코 레이팅되는 함수의 소스 코드를 변경하지 않는 함수, 메서드 또는 클래스의 기능을 동적으로 변경합니다.

일반적으로 액세스, 등록, 주석을 제어하는 ​​데 사용됩니다.

---

받아 들여진 대답 이이 문제를 해결하고 해결하는 데 충분하지 않습니다. 조금 더 세부 사항을 추가하고 있습니다.

문제는 데코레이터가 정확히 무엇 인지 명확하지 않다는 것 입니다. 주어진 예제의 데코레이터는 단순한 @기호 가 아니라 @connect기능입니다. 간단히 말해서 , @connect함수는 클래스를 꾸미는 것 CounterApp입니다.

이 경우에는 무엇을하고 있습니까? 그건 연결state.counter클래스의 소품에 대한 값입니다. redux에서 connect함수는 두 개의 인수를 취합니다 : mapStateToProps및 mapDispatchToProps. 이 예에서는 하나의 인수 만 사용 mapStateToProps합니다.

나는 이것을 너무 많이 조사하지 않고 당신의 state-to-props와 dispatch-to-props 매핑을 캡슐화하여 다른 파일에 위치하지 않고 구성 요소를 동반하는 방법으로 나열합니다.

---

무엇입니까 @myDecorator()?

@자바 펼쳐 의 기호는 데코레이터를 나타냅니다. 데코레이터는 존재하지 않는 데코레이터로 ES6모든 브라우저에서 작업하는 코드는 모든 브라우저에서 사용할 수있는 자바 언어 변환 것입니다.

데코레이터 란?

데코레이터는 확장의 동작을 동적으로 (예 : 데코레이션)합니다. 구현에 새로운 비헤이비어를 추가하는 기능은 생성됩니다. 데코레이터는 자바 펼쳐의 개념이 아닙니다. 그것은 디자인 패턴 모든 객체 지향 프로그래밍 언어에 사용됩니다. 다음은 wikipedia의 정의입니다.

객체 지향 프로그래밍에서 데코레이터 패턴 은 객체 클래스의 다른 객체 동작에 영향을주지 않고 동적으로 객체 생성에 동작을 추가 할 수 있는 디자인 입니다. 데코레이터 패턴은 고유 한 관심 영역이있는 클래스간에 기능을 나눌 수 있기 때문에 단일 책임 원칙을 준수하는 데 종종 유용합니다.

데코레이터를 사용하는 이유는 무엇입니까?

데코레이터를 사용할 때 사용할 수 있습니다. 예를 들어 코드에서 데코레이터를 가져 오기 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

참조 URL : https://stackoverflow.com/questions/31821084/what-does-the-at-symbol-do-in-es6-javascript-ecmascript-2015