JavaScript-декораторы: что они и когда их используют

Подняв его на ступеньку выше, мы можем организовать для нашего декоратора некоторые аргументы. Например, давайте перепишем наш декоратор log

 function log(name) {
  return function decorator(t, n, descriptor) {
    const original = descriptor.value;
    if (typeof original === 'function') {
      descriptor.value = function(...args) {
        console.log(`Arguments for ${name}: ${args}`);
        try {
          const result = original.apply(this, args);
          console.log(`Result from ${name}: ${result}`);
          return result;
        } catch (e) {
          console.log(`Error from ${name}: ${e}`);
          throw e;
        }
      }
    }
    return descriptor;
  };
}

Сейчас это становится все сложнее, но когда мы разбиваем его, у нас есть это:

• Функция logname
• Затем эта функция возвращает функцию, которая сама является декоратором .

Это идентично более раннему декоратору logname

Это тогда используется следующим образом:

 class Example {
  @log('some tag')
  sum(a, b) {
    return a + b;
  }
}

const e = new Example();
e.sum(1, 2);
// Arguments for some tag: 1,2
// Result from some tag: 3

Сразу видно, что это позволяет нам различать разные строки журнала, используя тег, который мы сами предоставили.

Это работает, потому что вызов функции log('some tag')sum

Класс декораторов

Декораторы классов применяются ко всему определению класса за один раз. Функция декоратора вызывается с единственным параметром, который является декорируемой функцией конструктора.

Обратите внимание, что это применяется к функции конструктора, а не к каждому экземпляру создаваемого класса. Это означает, что если вы хотите манипулировать экземплярами, вам нужно сделать это самостоятельно, вернув упакованную версию конструктора.

В общем, они менее полезны, чем декораторы членов класса, потому что все, что вы можете здесь сделать, вы можете сделать простым вызовом функции точно таким же образом. Все, что вы делаете с этим, должно в конечном итоге возвращать новую функцию конструктора для замены конструктора класса.

Возвращаясь к нашему примеру регистрации, давайте напишем тот, который регистрирует параметры конструктора:

 function log(Class) {
  return (...args) => {
    console.log(args);
    return new Class(...args);
  };
}

Здесь мы принимаем класс в качестве аргумента и возвращаем новую функцию, которая будет действовать как конструктор. Это просто регистрирует аргументы и возвращает новый экземпляр класса, созданный с этими аргументами.

Например:

 @log
class Example {
  constructor(name, age) {
  }
}

const e = new Example('Graham', 34);
// [ 'Graham', 34 ]
console.log(e);
// Example {}

Мы можем видеть, что построение нашего класса Example выйдет из представленных аргументов и что построенное значение действительно является экземпляром Example Именно то, что мы хотели.

Передача параметров в декораторы классов работает точно так же, как и для членов класса:

 function log(name) {
  return function decorator(Class) {
    return (...args) => {
      console.log(`Arguments for ${name}: args`);
      return new Class(...args);
    };
  }
}

@log('Demo')
class Example {
  constructor(name, age) {}
}

const e = new Example('Graham', 34);
// Arguments for Demo: args
console.log(e);
// Example {}

Примеры из реального мира

Основные декораторы

Есть фантастическая библиотека под названием Core Decorators, которая предоставляет некоторые очень полезные распространенные декораторы, которые готовы к использованию прямо сейчас. Как правило, они обеспечивают очень полезную общую функциональность (например, синхронизацию вызовов методов, предупреждения об устаревании, обеспечение того, что значение доступно только для чтения), но с использованием гораздо более чистого синтаксиса декоратора.

реагировать

Библиотека React очень хорошо использует концепцию компонентов высшего порядка. Это просто компоненты React, которые написаны как функции и охватывают другой компонент.

Купите наш Премиум курс: React The ES6 Way

Они являются идеальным кандидатом для использования в качестве декоратора, потому что для этого вам мало что нужно изменить. Например, в библиотеке response-redux есть функция connect

В общем, это будет использоваться следующим образом:

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

Однако из-за того, как работает синтаксис декоратора, его можно заменить следующим кодом для достижения точно такой же функциональности:

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

MobX

В библиотеке MobX широко используются декораторы, позволяющие легко помечать поля как наблюдаемые или вычисляемые, а классы — как наблюдатели.

Резюме

Декораторы членов класса обеспечивают очень хороший способ обертывания кода внутри класса очень похоже на то, как вы уже можете сделать это для автономных функций. Это обеспечивает хороший способ написания некоторого простого вспомогательного кода, который может быть применен ко многим местам очень простым и понятным способом.

Единственным ограничением для использования такого объекта является ваше воображение!