es6 데코레이터를 이해하는 방법

es6에서 데코레이터 패턴은 원래 클래스를 변경하지 않고 상속을 사용하지 않고 객체의 기능을 동적으로 확장하는 설계 이론입니다. 데코레이터의 본질은 클래스 속성과 클래스 메서드를 확장하는 데 사용되는 일반적인 함수입니다. 데코레이터 사용의 장점: 1. 코드는 더 읽기 쉬워지고 데코레이터 이름은 주석과 동일합니다. 2. 원래 코드를 변경하지 않고도 원래 기능을 확장할 수 있습니다.

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

ES6의 Decorator를 어떻게 이해하나요?

이름에서 데코레이터 패턴을 쉽게 연상시키는 데코레이터

간단히 말하면 데코레이터 패턴은 원래 클래스를 변경하지 않고 기능적 디자인 이론을 사용하지 않고 객체를 동적으로 확장하는 방법입니다.

ES6의 Decorator 함수도 마찬가지입니다. 그 본질은 고급 구조가 아니라 클래스 속성과 클래스 메서드를 확장하는 데 사용되는 일반적인 함수일 뿐입니다.

여기에는 군인이 정의되어 있으며 장비가 없습니다. 이때

class soldier{ 
}

AK 장비, 즉 데코레이터를 얻는 함수를 정의합니다

function strong(target){
    target.AK = true
}

데코레이터를 사용하여 병사를 강화합니다

@strong
class soldier{
}

군인은 이제 무기를 갖게 됩니다

soldier.AK // true

위의 코드는 간단하지만 데코레이터(장식) 사용을 명확하게 확인하세요. 두 가지 주요 이점:

• 코드의 가독성이 높아지고 데코레이터 이름 지정이 주석과 동일해집니다.

• 원래 코드를 변경하지 않고 원래 기능을 확장

decororation 도구의 사용법

도코레이터 수정 된 객체는 다음 두 가지 유형입니다.

• 클래스 장식

• 클래스 속성 장식

클래스 장식

클래스 자체를 장식 할 때, It. 하나의 매개변수, 즉 클래스 자체를 받아들일 수 있습니다

데코레이터 동작을 분해하면 모두가 더 깊이 이해할 수 있습니다

@decorator
class A {}

// 等同于

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

다음

은 데코레이터이고 대상은 추가를 구현하는 들어오는 클래스인 MyTestableClass입니다. 정적 속성을 클래스에@testable

@testable
class MyTestableClass {
  // ...
}

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

MyTestableClass.isTestable // true

매개변수를 전달하려면 데코레이터 외부에 함수 레이어를 캡슐화할 수 있습니다

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

@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true

@testable(false)
class MyClass {}
MyClass.isTestable // false

클래스 속성 장식

클래스 속성을 장식할 때 다음 세 가지 매개변수를 사용할 수 있습니다.

• 클래스의 프로토타입 객체

• 데코레이션이 필요한 속성 이름

• 데코레이션된 속성 이름의 설명 객체

먼저 읽기 전용 데코레이터를 정의합니다

function readonly(target, name, descriptor){
  descriptor.writable = false; // 将可写属性设为false
  return descriptor;
}

readonly를 사용하여 이름 메소드를 데코레이션합니다. of the class

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

다음 호출과 동일합니다

readonly(Person.prototype, 'name', descriptor);

메소드에 데코레이터가 여러 개 있으면 양파처럼 외부에서 내부로 먼저 들어간 다음 내부에서 외부로 실행됩니다

function dec(id){
    console.log('evaluated', id);
    return (target, property, descriptor) =>console.log('executed', id);
}

class Example {
    @dec(1)
    @dec(2)
    method(){}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1

외부 데코레이터 @dec(1)가 먼저 들어가고 내부 레이어 데코레이터 @dec(2)가 먼저 실행됩니다

Note

함수에 변수 선언이 있기 때문에 데코레이터를 사용하여 함수를 장식할 수 없습니다.

var counter = 0;

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

@add
function foo() {
}

컴파일 단계에서는 다음과 같이 됩니다

var counter;
var add;

@add
function foo() {
}

counter = 0;

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

실행 후 카운터가 1이 되도록 의도했지만 실제 결과는 카운터가 0이 됩니다.

데코레이터의 사용 시나리오

Based Decorator의 강력한 역할을 통해 다양한 시나리오의 요구 사항을 충족할 수 있습니다. 데코레이터를 사용하면 훨씬 간단해집니다

class MyReactComponent extends React.Component {}

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

Mixins도 데코레이터로 작성하여 더 간결하게 사용할 수 있습니다

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

core- decorators.js의 몇 가지 일반적인 데코레이터에 대해 이야기해 보겠습니다.js

@antobind

autobind 데코레이터는 this 개체를 만듭니다. 메소드에서 원래 객체를 바인드합니다

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

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

@mixins(Foo)
class MyClass {}

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

@readonly

readonly 데코레이터는 속성 또는 메소드를 쓸 수 없습니다

import { autobind } from 'core-decorators';

class Person {
  @autobind
  getPerson() {
    return this;
  }
}

let person = new Person();
let getPerson = person.getPerson;

getPerson() === person;
// true

@deprecate

더 이상 사용되지 않거나 더 이상 사용되지 않는 데코레이터는 콘솔에 경고를 표시합니다. 메서드는 더 이상 사용되지 않습니다

import { readonly } from 'core-decorators';

class Meal {
  @readonly
  entree = 'steak';
}

var dinner = new Meal();
dinner.entree = 'salmon';
// Cannot assign to read only property 'entree' of [object Object]

[관련 권장 사항: javascript 비디오 튜토리얼,

웹 프론트 엔드

]

위 내용은 es6 데코레이터를 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!