Реализация динамических геттеров и сеттеров в JavaScript: руководство

В традиционном JavaScript геттеры и сеттеры определяются для конкретных имен свойств. Однако можно создавать более гибкие динамические геттеры и сеттеры с использованием прокси, представленных в ES2015.

Динамические геттеры и сеттеры с прокси

Динамические геттеры и сеттеры позволяют получать доступ к свойствам и изменять их без явных определений. Вот как их реализовать с помощью прокси:

"use strict";
if (typeof Proxy == "undefined") {
    throw new Error("This browser doesn't support Proxy");
}
let original = {
    example: "value",
};
let proxy = new Proxy(original, {
    get(target, name, receiver) {
        if (Reflect.has(target, name)) {
            let rv = Reflect.get(target, name, receiver);
            // Modify the value here before returning
            return rv;
        }
        // Define default behavior for unknown properties
        return "missing";
      }
});

Пример использования

При наличии указанного выше прокси доступ к свойствам и их изменение могут выполняться динамически:

console.log(`proxy.example = ${proxy.example}`); // "proxy.example = VALUE"
console.log(`proxy.unknown = ${proxy.unknown}`); // "proxy.unknown = missing"

Кроссбраузерная совместимость

Прокси поддерживаются в современных браузерах, таких как Chrome, Firefox и Safari. Однако для старых браузеров, которые не поддерживают прокси, можно реализовать обходной путь с использованием динамического синтаксиса получения/установки без прокси.