수정자는 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);
데코레이터에도 주석 기능이 있습니다. 예를 들어 위의 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]()는 여러 공통 데코레이터를 제공하는 타사 모듈입니다.
【관련 추천: javascript 비디오 튜토리얼, web front-end】
위 내용은 수정자는 es6 또는 es7의 기능입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!