Декораторите на JavaScript предоставят начин за добавяне на поведение към отделни обекти, без да засягат други обекти от същия клас. Те могат да бъдат мощен инструмент за писане на по-чист, по-модулен код. Тази публикация ще ви запознае с концепцията за декоратори в JavaScript и ще ви покаже как да ги използвате ефективно.

Разбиране на JavaScript декораторите

В JavaScript декораторите са шаблон за проектиране, използван за добавяне на ново поведение към обекти или класове. Декораторът е специален вид декларация, която може да бъде прикачена към декларация на клас, метод, инструмент за достъп, свойство или параметър. Декораторите използват формуляра @expression, където expression трябва да изчисли функция, която ще бъде извикана по време на изпълнение с информация за декорираната декларация.

Моля, имайте предвид, че към края на моите познания през септември 2021 г. декораторите са предложена функция за ECMAScript, но вече се използват широко благодарение на транспилатори като Babel.

Ето основен пример за декоратор:

function readOnly(target, key, descriptor) {
  descriptor.writable = false;  // Make the property read-only
  return descriptor;
}

class Person {
  @readOnly
  name = 'John Doe';
}

const john = new Person();
john.name = 'Jane Doe';  // This will fail silently
console.log(john.name);  // Outputs: 'John Doe'

В горния пример @readOnly е декоратор, който променя дескриптора на свойството на свойството name, за да го направи само за четене. Опитът да промените свойството name на екземпляр на Person няма да има ефект.

Използване на декоратори за по-чист код

Декораторите могат да помогнат за написването на по-чист и по-изразителен код чрез капсулиране на междусекторни проблеми. Ето пример за използване на декоратори за създаване на прост регистратор:

function log(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Arguments: ${JSON.stringify(args)}`);
    const result = original.apply(this, args);
    console.log(`Result: ${JSON.stringify(result)}`);
    return result;
  };
  return descriptor;
}

class Calculator {
  @log
  add(a, b) {
    return a + b;
  }
}

const calc = new Calculator();
console.log(calc.add(2, 3));  // Logs arguments and result before returning the result

В този пример декораторът @log регистрира аргументите и резултата от метода add. Това ни позволява да запазим логиката на регистриране отделно от бизнес логиката.

Не забравяйте, че JavaScript декораторите са мощен инструмент за писане на чист и изразителен код. Чрез разбиране и използване на декоратори можете да подобрите качеството на вашия код и да го направите по-поддържаем.