at 기호(@)는 ES6 javascript에서 무엇을 하는가? (ECMAScript 2015)

at 기호(@)는 ES6 javascript에서 무엇을 하는가? (ECMAScript 2015)

ES6 코드 몇 개를 보고 있는데 @ 기호가 변수 앞에 놓이면 어떻게 되는지 이해가 안 가.내가 찾을 수 있는 가장 가까운 것이 사적인 분야와 관련이 있다고?

Redex 라이브러리에서 보고 있던 코드:

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기능을 발휘하다간단히 말해서, The는@connect함수는 장식을 하고 있다.CounterApp계급

그리고 이 사건에서 그것은 무엇을 하고 있는가?그것은 연결되고 있다.state.counter학급의 소품을 중시하다기억하세요, 환원하면connect함수는 두 가지 인수를 사용한다.mapStateToProps그리고mapDispatchToProps이 예에서는 단 한 가지 논쟁만 하고 있다.mapStateToProps.

나는 이것을 너무 많이 조사하지는 않았지만, 이것은 당신의 상태-프로포즈 및 디스패치-프로포즈 매핑을 캡슐화하여 그들이 다른 파일에 위치하기 보다는 당신의 구성요소와 함께 동행하도록 하는 방법으로 보인다.

실내 장식가야.그것은 ECMAScript에 추가될 제안이다.에 여러 가지 ES6 및 ES5 동등한 예가 있다: javascript 디코더.

장식자는 하위 클래스를 직접 사용하거나 장식 중인 기능의 소스 코드를 변경할 필요 없이 기능, 방법 또는 클래스의 기능을 동적으로 변경한다.

그것들은 일반적으로 접근, 등록, 주석을 제어하기 위해 사용된다.

뭐가@myDecorator()?

그@자바스크립트의 상징은 장식가를 의미한다.실내 장식가가 없다.ES6그래서 당신이 장식가와 함께 작업하고 있는 코드들은 아마도 어떤 브라우저에서 실행될 수 있는 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

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