Accessor Decorator

An accessor decorator is a function that intercepts and modifies the definition of class getters and setters during the class evaluation phase. Under the ECMAScript Stage 3 Decorators specification, it allows developers to replace the original accessor function, observe its metadata, or inject initialization logic before the class is fully constructed.

Decorator Signature

When applied to a standard get or set method, the decorator function receives two arguments: the original accessor function and a context object.

function accessorDecorator(value, context) {
  // Evaluation logic here
}

1. The value Parameter

For standard accessors, value is the original getter or setter function defined in the class.

2. The context Parameter

The context object provides metadata about the accessor being decorated and utility functions for the class lifecycle:

• kind: A string literal, either "getter" or "setter".
• name: A string or symbol representing the identifier of the accessor.
• static: A boolean indicating if the accessor is static.
• private: A boolean indicating if the accessor is a private class member.
• access: An object containing a get method (for getters) or a set method (for setters) that allows bypassing private boundaries to access the value on an instance.
• addInitializer(fn): A method that registers a callback function to run during object instantiation (for instance accessors) or class initialization (for static accessors).

Return Value Mechanics

An accessor decorator can return:

• A new function: This completely replaces the original getter or setter on the class prototype (or the class itself, if static). The new function is invoked with the this binding of the current instance.
• undefined (or no return): The original accessor remains unmodified.

function modifyGetter(originalGetter, context) {
  if (context.kind === 'getter') {
    // Return a replacement getter function
    return function() {
      const originalValue = originalGetter.call(this);
      return typeof originalValue === 'string' 
        ? originalValue.toUpperCase() 
        : originalValue;
    };
  }
}

class User {
  #name = "alice";

  @modifyGetter
  get name() {
    return this.#name;
  }
}

Auto-Accessors

The ECMAScript specification introduces the accessor keyword, which automatically generates a backing private field alongside a getter and setter. Decorating an auto-accessor alters the decorator signature and expected return type.

class Data {
  @autoAccessorDecorator
  accessor count = 0;
}

When decorating an auto-accessor:

• value: Instead of a single function, value is an object containing both { get, set } functions that interact with the hidden backing field.
• context.kind: The kind is strictly "accessor".
• Return Value: The decorator can return an object containing { get, set, init }.
  • get replaces the generated getter.
  • set replaces the generated setter.
  • init is a function that receives the initial field value (e.g., 0 in the example above) and returns a new value to initialize the backing field.

function autoAccessorDecorator(value, context) {
  if (context.kind === 'accessor') {
    return {
      get() {
        return value.get.call(this);
      },
      set(newValue) {
        value.set.call(this, newValue);
      },
      init(initialValue) {
        // Modifies the initial assignment of the backing field
        return initialValue; 
      }
    };
  }
}

Master JavaScript with Deep Grasping Methodology!

Learn More