수정자는 es6 또는 es7의 기능입니까?

수정자는 es7 기능입니다. Modifier는 ES7에서 도입된 클래스 관련 구문으로, 클래스와 클래스 메서드에 주석을 달거나 수정하는 데 사용됩니다. 이는 ES5의 "Object.defineProperty" 메서드에 의존하며 "@function name"으로 작성됩니다. 클래스, 메소드 및 속성 매개변수는 클래스, 속성, 메소드 및 매개변수의 기능을 확장하는 데 사용됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 7, Dell G3 컴퓨터.

데코레이터란 무엇입니까

Decorator는 ES7의 구문으로, 클래스와 클래스 메서드에 주석을 달거나 수정하는 데 사용되는 클래스 관련 구문입니다.

외관으로 두 가지 문제를 해결할 수 있습니다.

• 서로 다른 클래스 간 메서드 공유

• 컴파일 중 클래스 및 메서드 동작 변경

수정자 래퍼 함수는 @函数名로 작성됩니다. 클래스 및 클래스 메서드 정의 앞에 배치할 수 있으며 클래스, 속성 또는 함수에 추가 기능을 제공하는 데 사용할 수 있습니다.

@frozen class Foo {
  @configurable(false)
  @enumerable(true)
  method() {}
 
  @throttle(500)
  expensiveMethod() {}
}

위에서는 총 4개의 데코레이터가 사용되는데, 하나는 클래스 자체에 사용되고 나머지 3개는 클래스 메서드에 사용됩니다.

Decorator(데코레이터)는 새로운 개념이 아닙니다. Java, Python 등 다른 언어도 예전부터 ES7의 데코레이터(Decorator)는 다른 언어의 작성 방법을 차용해 왔습니다. ES5의 Object.defineProperty 메소드를 사용합니다.

클래스 수정

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

@testable은 MyTestableClass 클래스의 동작을 수정하고 정적 속성 isTestable을 추가하는 데코레이터입니다. 테스트 가능한 함수의 매개변수 대상은 MyTestableClass 클래스 자체입니다.

@decorator
class A {}

// 等同于

class A {}
A = decorator(A) || A;

즉, 데코레이터는 클래스를 처리하는 함수입니다. 데코레이터 함수의 첫 번째 매개변수는 데코레이션할 대상 클래스입니다.

여러 매개변수를 추가하려면 데코레이터 외부에 함수 레이어를 캡슐화할 수 있습니다.

function testable(name) {
    return function(target) {
      target.name = name;
    }
  }

@testable('MyTestableClass')
class MyTestableClass {}
MyTestableClass.name // MyTestableClass

@testable('MyClass')
class MyClass {}
MyClass.isTestable // MyClassf

위의 예는 클래스에 정적 속성을 추가하는 것입니다.
인스턴스 속성을 추가하려면 대상 클래스의 Prototype 객체를 통해 작업하면 됩니다.

export function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list)
  }
}

// main.js
import { mixins } from './mixins'

const Foo = {
  foo() { console.log('foo') }
};

@mixins(Foo)
class MyClass {}

let obj = new MyClass();
obj.foo() // 'foo'

실제 개발에서 React를 Redux 라이브러리와 함께 사용하게 되면 아래와 같이 작성해야 하는 경우가 종종 있습니다.

class MyreactComponent extends React.Component {};

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

데코레이터를 사용하면 위 코드를 다시 작성할 수 있습니다.

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {};

데코레이터는 클래스의 동작을 변경한다는 점에 유의하세요. 이는 런타임이 아닌 코드가 컴파일될 때 발생합니다. 이는 데코레이터가 컴파일 중에 코드를 실행할 수 있음을 의미합니다. 즉, 데코레이터는 본질적으로 컴파일 타임에 실행되는 함수입니다.

메서드 수정

class Person {
  // 用来装饰”类“的 name 方法
  @readonly
  name() { return `${this.first} ${this.last}` }
}

데코레이터 함수 읽기 전용은 총 3개의 매개변수를 허용할 수 있습니다.

function readonly(target, name, descriptor){
  // descriptor对象原来的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // };
  descriptor.writable = false;
  return descriptor;
}

readonly(Person.prototype, 'name', descriptor);
// 类似于
Object.defineProperty(Person.prototype, 'name', descriptor);

• 데코레이터의 첫 번째 매개변수는 클래스의 프로토타입 객체입니다. 위의 예는 Person.prototype입니다. 데코레이터의 원래 의도는 클래스의 인스턴스를 "장식"하는 것이지만 인스턴스가 생성되지 않았습니다. (이것은 클래스 장식과 다르며, 이 경우 대상 매개변수는 클래스 자체를 나타냅니다.)
• 두 번째 매개변수는 장식할 속성의 이름입니다.
• 세 번째 매개변수입니다. 매개변수는 속성의 설명 객체입니다

데코레이터에도 주석 기능이 있습니다. 예를 들어 위의 name 메소드는 읽기 전용임을 한눈에 알 수 있습니다.

주석 외에도 데코레이터를 유형 검사에 사용할 수도 있습니다. 그래서 수업에 있어서 이 기능은 상당히 유용합니다. 장기적으로 이는 JavaScript 코드의 정적 분석을 위한 중요한 도구가 될 것입니다. TypeScript에서 실험적인 기능으로 지원됩니다.

데코레이터를 함수에 사용할 수 없는 이유

데코레이터는 함수 호이스팅 때문에 함수가 아닌 클래스와 클래스의 메서드에만 사용할 수 있습니다.

var counter = 0;

var add = function () {
  counter++;
};

@add
function foo() {}

위 코드는 실행 후 카운터가 1이 되도록 의도했지만 실제 결과는 카운터가 0이 되는 것입니다. 함수 승격으로 인해 실제 실행되는 코드는 다음과 같습니다.

@add
function foo() {
}

var counter;
var add;

counter = 0;

add = function () {
  counter++;
};

간단히 말하면 함수 호이스팅이 존재하기 때문에 데코레이터를 함수에 사용할 수 없습니다. 수업은 진행되지 않으니 이 점에 대해서는 문제가 없습니다.

core- decorators.js

[core- decorators.js]()는 여러 공통 데코레이터를 제공하는 타사 모듈입니다.

• @autobind: 메서드의 this 개체를 원본 개체에 바인딩합니다.
• @readonly: 속성이나 메서드를 쓸 수 없게 만듭니다.
• @override: 하위 클래스의 메서드가 상위 클래스의 동일한 이름의 메서드를 올바르게 재정의하는지 확인합니다. 잘못된 경우 오류가 보고됩니다.
• @deprecate(별칭 @deprecated): 메서드가 더 이상 사용되지 않음을 나타내는 경고를 콘솔에 표시합니다.

【관련 추천: javascript 비디오 튜토리얼, web front-end】

위 내용은 수정자는 es6 또는 es7의 기능입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!