如何在JavaScript ES6类中实现通用型动态Getter与Setter

Got it, let's figure out how to create generic dynamic getters and setters for ES6 class properties—no need to write repetitive accessors for every single property! Here are two practical approaches you can use:

Dynamic Accessors via Object.defineProperty in Constructor #

If you know the properties you want to handle upfront (or can pass them during instantiation), you can loop through them in the class constructor and dynamically define getters/setters for each. This way, all properties share your generic accessor logic.

class DynamicAccessorClass {
  constructor(properties) {
    // Private storage to avoid infinite recursion in accessors
    this._data = {};

    // Loop through properties to add generic getters/setters
    for (const prop of properties) {
      Object.defineProperty(this, prop, {
        get() {
          // Generic getter logic: add logging, validation, etc.
          console.log(`Fetching value for ${prop}`);
          return this._data[prop];
        },
        set(value) {
          // Generic setter logic: add type checks, transformations, etc.
          console.log(`Updating ${prop} to:`, value);
          // Example: Ensure string values are trimmed
          this._data[prop] = typeof value === 'string' ? value.trim() : value;
        },
        enumerable: true,
        configurable: true
      });
    }
  }
}

// Usage example
const user = new DynamicAccessorClass(['username', 'bio']);
user.username = '  dev_joe  '; // Logs: Updating username to:   dev_joe  
console.log(user.username); // Logs: Fetching value for username → Output: dev_joe

Pros: Fits naturally with ES6 class patterns, easy to debug since accessors are directly on the instance.
Cons: Only handles properties passed during instantiation—new properties added later won't use the generic logic.

Generic Accessors with Proxy #

If you need to handle all properties (including ones added dynamically after instantiation), Proxy is the way to go. It intercepts every property read/write operation, so you can apply your generic logic universally.

class DynamicProxyClass {
  constructor() {
    this._data = {};

    // Return a Proxy to intercept all property operations
    return new Proxy(this, {
      get(target, prop) {
        // Skip internal storage to avoid proxy loops
        if (prop === '_data') return target[prop];
        
        // Generic getter logic
        console.log(`Getting ${prop}`);
        return target._data[prop];
      },
      set(target, prop, value) {
        if (prop === '_data') {
          target[prop] = value;
          return true;
        }
        
        // Generic setter logic
        console.log(`Setting ${prop} to:`, value);
        // Example: Reject null/undefined values
        if (value == null) {
          throw new Error(`${prop} cannot be null or undefined!`);
        }
        target._data[prop] = value;
        return true; // Confirm successful assignment
      }
    });
  }
}

// Usage example
const product = new DynamicProxyClass();
product.name = 'Wireless Headphones'; // Logs: Setting name to: Wireless Headphones
// Dynamically add a new property later
product.price = 99.99; // Logs: Setting price to: 99.99
console.log(product.price); // Logs: Getting price → Output: 99.99
// product.price = null; // Throws error: price cannot be null or undefined!

Pros: Fully dynamic—every property (existing or new) uses your generic accessor logic.
Cons: The instance is a Proxy object, so you'll need to reference _data directly if you need to serialize it (e.g., JSON.stringify(product._data)).

Quick Tips #

• Always use a separate storage object (like _data) to store actual values—this prevents infinite recursion in your getters/setters.
• For better maintainability, extract your generic accessor logic into standalone functions:

  const genericGetter = (target, prop) => {
    console.log(`Accessing ${prop}`);
    return target._data[prop];
  };
  
  const genericSetter = (target, prop, value) => {
    console.log(`Updating ${prop}`);
    target._data[prop] = value;
    return true;
  };
  

  Then call these functions in Object.defineProperty or your Proxy handlers.

内容的提问来源于stack exchange，提问作者Deep Patel