es6 수정자는 무엇에 사용됩니까?-프런트엔드 Q&A-php.cn

es6에서 데코레이터는 "@function name"으로 작성된 ES5의 "Object.defineProperty" 메서드를 사용하여 클래스 및 클래스 메서드에 주석을 달거나 수정하는 데 사용됩니다. 데코레이터는 실제로 함수이며 일반적으로 클래스 및 클래스 앞쪽에 배치됩니다. 방법의. 수정자를 클래스, 메소드 및 속성 매개변수에 삽입하여 클래스, 속성, 메소드 및 매개변수의 기능을 확장할 수 있습니다.

es6 수정자는 무엇에 사용됩니까?

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

데코레이터 패턴을 사용하면 구조를 변경하지 않고도 기존 개체에 새로운 기능을 추가할 수 있습니다. 이러한 유형의 디자인 패턴은 기존 클래스를 감싸는 래퍼 역할을 하는 구조적 패턴입니다.

이 패턴은 클래스 메서드 시그니처의 무결성을 유지하면서 원래 클래스를 래핑하고 추가 기능을 제공하는 데코레이션 클래스를 만듭니다.

ES6 데코레이터(Decorator)

ES6에서 데코레이터(Decorator)는 클래스와 클래스 메서드에 주석을 달거나 수정하는 데 사용되는 클래스 관련 구문입니다.

데코레이터는 실제로 함수이며 일반적으로 클래스 및 클래스 메서드 앞에 배치됩니다.

@decorateClass
class Example {
    @decorateMethods
    method(){}
}

로그인 후 복사

위 코드에서는 두 개의 데코레이터가 사용됩니다. @ decorateClass() 데코레이터는 클래스 자체에 사용되어 클래스의 기능을 추가하거나 수정합니다. 클래스. 클래스 메서드에 주석을 달거나 수정하는 데 사용되는 메서드입니다.

두 종류의 데코레이터 (데코레이터)

데코레이터는 함수 승격으로 인해 함수용이 아닌 클래스와 클래스 메서드에만 사용할 수 있습니다.

데코레이터는 클래스와 클래스 메서드에만 사용할 수 있습니다. 두 가지 유형의 데코레이터를 각각 사용하는 방법을 살펴보겠습니다.

클래스 데코레이터

클래스 데코레이터는 클래스 전체를 장식하는 데 사용됩니다.

클래스 데코레이터 매개변수

target: 클래스 자체도 클래스 생성자 Class.prototype.constructor와 동일합니다.

@decorateClass
class Example {
    //...
}

function decorateClass(target) {
    target.isTestClass = true
}

로그인 후 복사

위 코드에서처럼 데코레이터 @ decorateClass는 전체 예제 클래스의 동작을 수정하고 정적 속성 isTestClass를 예제 클래스에 추가합니다. Decorator는 함수입니다. Decorator는 클래스 생성자Example.prototype.constructor와 동일한 클래스 자체입니다. 데코레이터를 사용할 때 매개변수를 전달하려면 데코레이터 외부에 함수 레이어를 캡슐화하면 됩니다.

@decorateClass(true)
class Example {
    //...
}

function decorateClass(isTestClass) {
    return function(target) {
  target.isTestClass = isTestClass
  }
}

로그인 후 복사

위 코드에 구현된 데코레이터는 사용 시 매개변수를 전달할 수 있습니다. 즉, 데코레이터의 동작은 다양한 시나리오에 따라 수정될 수 있습니다.

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

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

로그인 후 복사

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

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

로그인 후 복사

클래스 메소드 데코레이터

클래스 메소드 데코레이터는 클래스의 메소드를 장식하는 데 사용됩니다.

클래스 메소드 데코레이터의 매개변수

대상:

// descriptor对象原来的值如下
{
  value: specifiedFunction,
  enumerable: false,
  configurable: true,
  writable: true
};

로그인 후 복사

class Example {
    @log
    instanceMethod() { }

    @log
    static staticMethod() { }
}

function log(target, methodName, descriptor) {
  const oldValue = descriptor.value;

  descriptor.value = function() {
    console.log(`Calling ${name} with`, arguments);
    return oldValue.apply(this, arguments);
  };

  return descriptor;
}

로그인 후 복사

위 코드와 마찬가지로 데코레이터 @log는 인스턴스 메소드인 instanceMethod와 static을 장식합니다. 방법 각각 staticMethod. @log 데코레이터의 기능은 원래 작업을 수행하기 전에 console.log를 실행하여 로그를 출력하는 것입니다.

클래스 메소드 데코레이터에 매개변수 전달

위에 구현된 데코레이터는 사용 시 매개변수에 전달될 수 없습니다. 데코레이터를 사용할 때 매개변수를 전달하려면 데코레이터 외부에 함수 레이어를 캡슐화할 수 있습니다.

class Example {
    @log(1)
    instanceMethod() { }

    @log(2)
    static staticMethod() { }
}

function log(id) {
    return (target, methodName, descriptor) => {
    const oldValue = descriptor.value;

    descriptor.value = function() {
      console.log(`Calling ${name} with`, arguments, `this id is ${id}`);
      return oldValue.apply(this, arguments);
    };

    return descriptor;
  }
}

로그인 후 복사

위 코드에 구현된 데코레이터는 사용 시 매개변수를 전달할 수 있으므로 다양한 시나리오에 따라 데코레이터의 동작을 수정할 수 있습니다.

클래스 데코레이터와 클래스 메서드 데코레이터의 실행 순서

클래스에서 클래스와 클래스 메서드를 동시에 장식하기 위해 데코레이터를 사용하는 경우 데코레이터의 실행 순서는 클래스 메서드 실행입니다. 데코레이터를 먼저 실행한 다음 클래스 데코레이터를 실행합니다.

동일한 클래스나 동일한 클래스 메소드에 여러 개의 데코레이터가 있는 경우 양파 껍질을 벗기는 것과 같이 먼저 외부에서 내부로 들어간 다음 내부에서 외부로 실행됩니다.

// 类装饰器
function decoratorClass(id){
    console.log(&#39;decoratorClass evaluated&#39;, id);

    return (target) => {
        // target 类的构造函数
        console.log(&#39;target 类的构造函数:&#39;,target)
        console.log(&#39;decoratorClass executed&#39;, id);
    }
}
// 方法装饰器
function decoratorMethods(id){
    console.log(&#39;decoratorMethods evaluated&#39;, id);
    return (target, property, descriptor) => {
        // target 代表

        // process.nextTick((() => {
            target.abc = 123
            console.log(&#39;method target&#39;,target)
        // }))
        console.log(&#39;decoratorMethods executed&#39;, id);

    }
}

@decoratorClass(1)
@decoratorClass(2)
class Example {
    @decoratorMethods(1)
    @decoratorMethods(2)
    method(){}
}

/** 输入日志 **/
// decoratorMethods evaluated 1
// decoratorMethods evaluated 2
// method target Example { abc: 123 }
// decoratorMethods executed 2
// method target Example { abc: 123 }
// decoratorMethods executed 1
// decoratorClass evaluated 1
// decoratorClass evaluated 2
// target 类的构造函数: [Function: Example]
// decoratorClass executed 2
// target 类的构造函数: [Function: Example]
// decoratorClass executed 1

로그인 후 복사

如上面代码中，会先执行类方法的装饰器 @decoratorMethods(1) 和 @decoratorMethods(2)，执行完后再执行类装饰器 @decoratorClass(1) 和 @decoratorClass(2)

上面代码中的类方法装饰器中，外层装饰器 @decoratorMethods(1) 先进入，但是内层装饰器 @decoratorMethods(2) 先执行。类装饰器同理。

利用装饰器实现AOP切面编程

function log(target, name, descriptor) {
    var oldValue = descriptor.value;

    descriptor.value = function () {
        console.log(`Calling "${name}" with`, arguments);
        return oldValue.apply(null, arguments);
    }
    return descriptor;
}

// 日志应用
class Maths {
    @log
    add(a, b) {
        return a + b;
    }
}
const math = new Maths();
// passed parameters should get logged now
math.add(2, 4);

로그인 후 복사

【相关推荐：javascript视频教程、web前端】