JS 데코레이터 함수 사용에 대한 자세한 설명

이번에는 JS 데코레이터 함수 사용에 대한 자세한 설명을 가져왔습니다. JS 데코레이터 함수 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

ES6에서는 클래스 객체(예: 클래스 및 확장)의 관련 정의 및 작업이 추가되어 여러 다른 클래스 간에 일부 메서드나 동작을 공유하거나 확장할 때 그다지 우아하지 않게 됩니다. 현재 이러한 작업을 수행하는 데 도움이 되는 보다 우아한 방법이 필요합니다.

데코레이터란 무엇인가요

Python의 데코레이터

객체 지향(OOP)의 디자인 패턴에서는 데코레이터를 데코레이션 패턴이라고 합니다. OOP의 장식 모드는 상속과 조합을 통해 구현되어야 하며 Python은 OOP의 장식자를 지원하는 것 외에도 구문 수준에서 직접 장식자를 지원합니다.

파이썬에 익숙하신 분들이라면 익숙하실 겁니다. 그럼 먼저 Python의 데코레이터가 어떤 모습인지 살펴보겠습니다.

def decorator(f):
  print "my decorator"
  return f
@decorator
def myfunc():
  print "my function"
myfunc()
# my decorator
# my function

여기서 @designator는 우리가 데코레이터라고 부르는 것입니다. 위 코드에서는 대상 메서드를 실행하기 전에 데코레이터를 사용하여 텍스트 한 줄을 인쇄하고 원래 메서드를 수정하지 않습니다. 코드는 기본적으로 다음과 같습니다.

def decorator(f):
  def wrapper():
    print "my decorator"
    return f()
  return wrapper
def myfunc():
  print "my function"
myfunc = decorator(myfuc)

장식자가 우리가 장식한 대상 메서드인 매개 변수를 수신하는 것을 코드에서 보는 것은 어렵지 않습니다. 확장된 콘텐츠를 처리한 후 나중에 호출하기 위한 메서드를 반환합니다. 또한 원래 메서드 개체에 대한 액세스 권한도 잃게 됩니다. 함수에 장식을 적용할 때 실제로 장식된 메서드의 항목 참조를 변경하여 데코레이터가 반환한 메서드의 진입점을 다시 가리키도록 함으로써 원래 함수를 확장하고 수정할 수 있습니다.

ES7 데코레이터

ES7의 데코레이터도 이 구문을 사용하지만 ES5 Object.defineProperty 메서드를 사용합니다.

Object.defineProperty

Object.defineProperty() 메서드는 객체에 대한 새 속성을 직접 정의하거나 객체의 기존 속성을 수정하고 객체를 반환합니다.

이 방법을 사용하면 개체의 속성을 정확하게 추가하거나 수정할 수 있습니다. 할당에 의해 추가된 일반 속성은 속성 열거(for...in 또는 Object.keys 메서드) 중에 노출되는 속성을 생성하며 이러한 값은 변경되거나 삭제될 수 있습니다. 이 접근 방식을 사용하면 이러한 추가 세부 정보를 기본값에서 변경할 수 있습니다. 기본적으로 Object.defineProperty()를 사용하여 추가된 속성 값은 변경할 수 없습니다.

Syntax

Object.defineProperty(obj, prop, descriptor)

1. obj: 속성을 정의할 개체입니다.

2. prop: 정의하거나 수정할 속성의 이름입니다.

3. descriptor: 정의되거나 수정될 속성 설명자입니다.

4. 반환 값: 함수에 전달된 개체입니다.

ES6에서는 Symbol 타입의 특수성으로 인해 Symbol 타입의 값을 객체의 키로 사용하는 것이 기존의 정의나 수정과는 다르며, Object.defineProperty는 키가 Symbol인 속성입니다.

속성 설명자

현재 객체에 존재하는 속성 설명자에는 데이터 설명자와 액세스 설명자의 두 가지 주요 형태가 있습니다.

데이터 설명자는 쓰기 가능하거나 쓰기 불가능할 수 있는 값을 가진 속성입니다.

• 액세스 설명자는 getter-setter 함수 쌍으로 설명되는 속성입니다.

• 설명자는 동시에 두 가지 형식 중 하나여야 합니다.

데이터 설명자와 액세스 설명자 모두 다음과 같은 선택적 키 값을 갖습니다.

configurable

속성의 구성 가능 항목이 true인 경우에만 속성 설명자를 변경할 수 있으며 속성 설명자를 변경할 수 있습니다. 해당 개체에서도 속성을 삭제할 수 있습니다. 기본값은 거짓입니다.

enumerable

enumerable은 for...in 루프와 Object.keys()에서 객체의 속성을 열거할 수 있는지 여부를 정의합니다.

속성의 열거 가능 속성이 true인 경우에만 속성이 객체의 열거 속성에 나타날 수 있습니다. 기본값은 거짓입니다.
데이터 설명자에는 다음과 같은 선택적 키 값도 있습니다:

value

该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。

writable

当且仅当该属性的 writable 为 true 时，value 才能被赋值运算符改变。默认为 false。

存取描述符同时具有以下可选键值：

get

一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

set

一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。

如果一个描述符不具有value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。
用法

类的装饰

@testable
class MyTestableClass {
 // ...
}
function testable(target) {
 target.isTestable = true;
}
MyTestableClass.isTestable // true

上面代码中，@testable 就是一个装饰器。它修改了 MyTestableClass这 个类的行为，为它加上了静态属性isTestable。testable 函数的参数 target 是 MyTestableClass 类本身。

基本上，装饰器的行为就是下面这样。

@decorator
class A {}
// 等同于
class A {}
A = decorator(A) || A;

也就是说，装饰器是一个对类进行处理的函数。装饰器函数的第一个参数，就是所要装饰的目标类。

如果觉得一个参数不够用，可以在装饰器外面再封装一层函数。

function testable(isTestable) {
 return function(target) {
  target.isTestable = isTestable;
 }
}
@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true
@testable(false)
class MyClass {}
MyClass.isTestable // false

上面代码中，装饰器 testable 可以接受参数，这就等于可以修改装饰器的行为。

注意，装饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，装饰器能在编译阶段运行代码。也就是说，装饰器本质就是编译时执行的函数。

前面的例子是为类添加一个静态属性，如果想添加实例属性，可以通过目标类的 prototype 对象操作。

下面是另外一个例子。

// mixins.js
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'

上面代码通过装饰器 mixins，把Foo对象的方法添加到了 MyClass 的实例上面。

方法的装饰

装饰器不仅可以装饰类，还可以装饰类的属性。

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

上面代码中，装饰器 readonly 用来装饰“类”的name方法。

装饰器函数 readonly 一共可以接受三个参数。

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，装饰器的本意是要“装饰”类的实例，但是这个时候实例还没生成，所以只能去装饰原型（这不同于类的装饰，那种情况时target参数指的是类本身）；

• 第二个参数是 所要装饰的属性名

• 第三个参数是 该属性的描述对象

另外，上面代码说明，装饰器（readonly）会修改属性的 描述对象（descriptor），然后被修改的描述对象再用来定义属性。

函数方法的装饰

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

另一方面，如果一定要装饰函数，可以采用高阶函数的形式直接执行。

function doSomething(name) {
 console.log('Hello, ' + name);
}
function loggingDecorator(wrapped) {
 return function() {
  console.log('Starting');
  const result = wrapped.apply(this, arguments);
  console.log('Finished');
  return result;
 }
}
const wrapped = loggingDecorator(doSomething);

core-decorators.js

core-decorators.js是一个第三方模块，提供了几个常见的装饰器，通过它可以更好地理解装饰器。

@autobind

autobind 装饰器使得方法中的this对象，绑定原始对象。

@readonly

readonly 装饰器使得属性或方法不可写。

@override

override 装饰器检查子类的方法，是否正确覆盖了父类的同名方法，如果不正确会报错。

import { override } from 'core-decorators';
class Parent {
 speak(first, second) {}
}
class Child extends Parent {
 @override
 speak() {}
 // SyntaxError: Child#speak() does not properly override Parent#speak(first, second)
}
// or
class Child extends Parent {
 @override
 speaks() {}
 // SyntaxError: No descriptor matching Child#speaks() was found on the prototype chain.
 //
 //  Did you mean "speak"?
}

@deprecate (别名@deprecated)

deprecate 或 deprecated 装饰器在控制台显示一条警告，表示该方法将废除。

import { deprecate } from 'core-decorators';
class Person {
 @deprecate
 facepalm() {}
 @deprecate('We stopped facepalming')
 facepalmHard() {}
 @deprecate('We stopped facepalming', { url: 'http://knowyourmeme.com/memes/facepalm' })
 facepalmHarder() {}
}
let person = new Person();
person.facepalm();
// DEPRECATION Person#facepalm: This function will be removed in future versions.
person.facepalmHard();
// DEPRECATION Person#facepalmHard: We stopped facepalming
person.facepalmHarder();
// DEPRECATION Person#facepalmHarder: We stopped facepalming
//
//   See http://knowyourmeme.com/memes/facepalm for more details.
//

@suppressWarnings

suppressWarnings 装饰器抑制 deprecated 装饰器导致的 console.warn() 调用。但是，异步代码发出的调用除外。

使用场景

装饰器有注释的作用

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

有了装饰器，就可以改写上面的代码。装饰

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

相对来说，后一种写法看上去更容易理解。

新功能提醒或权限

菜单点击时，进行事件拦截，若该菜单有新功能更新，则弹窗显示。

/**
 * @description 在点击时，如果有新功能提醒，则弹窗显示
 * @param code 新功能的code
 * @returns {function(*, *, *)}
 */
 const checkRecommandFunc = (code) => (target, property, descriptor) => {
  let desF = descriptor.value; 
  descriptor.value = function (...args) {
   let recommandFuncModalData = SYSTEM.recommandFuncCodeMap[code];
   if (recommandFuncModalData && recommandFuncModalData.id) {
    setTimeout(() => {
     this.props.dispatch({type: 'global/setRecommandFuncModalData', recommandFuncModalData});
    }, 1000);
   }
   desF.apply(this, args);
  };
  return descriptor;
 };

loading

在 React 项目中，我们可能需要在向后台请求数据时，页面出现 loading 动画。这个时候，你就可以使用装饰器，优雅地实现功能。

@autobind
@loadingWrap(true)
async handleSelect(params) {
 await this.props.dispatch({
  type: 'product_list/setQuerypParams',
  querypParams: params
 });
}

loadingWrap 函数如下：、

export function loadingWrap(needHide) {
 const defaultLoading = (
  <p className="toast-loading">
   <Loading className="loading-icon"/>
   <p>加载中...</p>
  </p>
 );
 return function (target, property, descriptor) {
  const raw = descriptor.value;
  
  descriptor.value = function (...args) {
   Toast.info(text || defaultLoading, 0, null, true);
   const res = raw.apply(this, args);
   
   if (needHide) {
    if (get('finally')(res)) {
     res.finally(() => {
      Toast.hide();
     });
    } else {
     Toast.hide();
    }
   }
  };
  return descriptor;
 };
}

问题：这里大家可以想想看，如果我们不希望每次请求数据时都出现 loading，而是要求只要后台请求时间大于 300ms 时，才显示loading，这里需要怎么改？

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS获取用户当前位置

vue-cli项目中使用bootstrap步骤详解

위 내용은 JS 데코레이터 함수 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!