es6의 데코레이터란 무엇입니까?

es6에서 데코레이터는 클래스와 클래스 메서드에 주석을 달거나 수정하는 데 사용되는 클래스 관련 구문입니다. 데코레이터는 실제로 컴파일 중에 실행되는 함수이며 일반적으로 정의 앞에 배치되는 "@function name" 구문을 사용합니다. 클래스와 클래스 메소드. 데코레이터에는 클래스 데코레이터와 클래스 메서드 데코레이터라는 두 가지 유형이 있습니다.

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

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

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

ES6 Decorator

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

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

데코레이터에 의한 클래스 동작 변경은 런타임이 아닌 코드가 컴파일될 때 발생합니다. 데코레이터의 본질은 컴파일 타임에 실행되는 함수입니다.

데코레이터를 사용하면 클래스 전체를 장식할 수 있습니다

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

在上面的代码中使用了两个装饰器，其中 @decorateClass() 装饰器用在类本身，用于增加或修改类的功能；@decorateMethods() 装饰器用在类的方法，用于注释或修改类方法。

两种类型装饰器

装饰器只能用于类和类的方法，不能用于函数，因为存在函数提升。

装饰器只能用于类和类的方法，下面我们分别看下两种类型的装饰器的使用

1、类装饰器

类装饰器用来装饰整个类

类装饰器的参数

target: 类本身，也相当于是 类的构造函数：Class.prototype.constructor。

@decorateClass
class Example {
    //...
}

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

如上面代码中，装饰器 @decorateClass 修改了 Example 整个类的行为，为 Example 类添加了静态属性 isTestClass。装饰器就是一个函数，decorateClass 函数中的参数 target 就是 Example 类本身，也相当于是类的构造函数 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 {}

2、类方法装饰器

类方法装饰器用来装饰类的方法

类方法装饰器的参数

• target：

• 装饰器修饰的类方法是静态方法：target 为类的构造函数

• 装饰器修饰的类方法是实例方法：target 为类的原型对象

• method：被修饰的类方法的名称

• descriptor：被修饰成员的属性描述符

// 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 和 静态方法 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('decoratorClass evaluated', id);

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

        // process.nextTick((() => {
            target.abc = 123
            console.log('method target',target)
        // }))
        console.log('decoratorMethods executed', 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前端】

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