0

В C# можно определить индексатор для какого-то объекта:

public DataRow this[Int32 Index] {
    get {
        return list[Index];
    }
}

В JS есть что-то подобное?
К объекту мы же можем обратиться и как _object.id и как _object["id"]. Можно ли сделать так для класса в JS?

2
  • 1
    в яваскрипте нельзя перегрузить то, что будет выполняться при обращении к свойству с помощью bracket notation. Можно воспользоваться Proxy но тогда надо будет делать это для каждого объекта отдельно
    – Grundy
    17 ноя 2019 в 18:01
  • Интересно, а зачем вам это понадобилось? 18 ноя 2019 в 5:18

1 ответ 1

1

На данный момент индексаторы в Java Script не существуют.

Но в ES6 (2015) был добавлен класс Proxy, с помощью которого можно что-то подобное реализовать:

Как это все реализовать?

Для начала создадим некий класс Entity в котором попробуем определить индексатор. Предупреждаю, что индексатором будет являться не экземпляр класса, а какое-то его свойство к примеру data.

class Entity {
    data = [];
}

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

class Entity {
    #data = [];
    get data() {
        return this.#data;
    }
}

Теперь надо применить свойства Proxy. Экземпляр класса Proxy ("Заместитель") будет заменять наше свойство копируя его параметры, функции и все остальное и при этом зафиксировать доступ к любым свойствам или методам. Вот как это выглядит:

class Entity {
    #data = [];
    get data() {
        return new Proxy(this.#data, {
            get(target, property, receiver) {
                // При чтении Proxy выполнит эту функцию
            },
            set(target, property, value, receiver) {
                // При записи Proxy выполнит эту функцию
            }
        });
    }
}

Поскольку мы определили функции Proxy.get() и Proxy.set() при запросе к какому-нибудь свойству у нас будут срабатывать они вместо "заводских", соответственно мы должны написать метод записи и чтения в них.

class Entity {
    #data = [];
    get data() {
        return new Proxy(this.#data, {
            get(target, property, receiver) {
                const result = Reflect.get(target, property, receiver);
                // действия при чтени
                return result;
            },
            set(target, property, value, receiver) {
                const result = Reflect.set(target, property, value, receiver);
                // действия при записи
                return result;
            }
        });
    }
}

Да, Proxy.set() так же возвращяет Boolean значение исходя из того удачно ли прошел запись или нет, а Reflect.set нам и будет дать это Boolean значение. Подробнее про Reflect.

Немного оптимизации

Чтобы каждый раз при обращении к свойству не создавалось новый "Заместитель", можно переместить все это в тело класса:

class Entity {
    #data = [];
    #dataProxy = new Proxy(this.#data, {
        get(target, property, receiver) {
            const result = Reflect.get(target, property, receiver);
            // действия при чтени
            return result;
        },
        set(target, property, value, receiver) {
            const result = Reflect.set(target, property, value, receiver);
            // действия при записи
            return result;
        }
    });
    get data() {
        return this.#dataProxy;
    }
}

Дефекты

В таком индексаторе мы можем отслеживать изменения, но не сможем определить именно к какому элементу они относятся. В аргумент property мы будем получать как и ключи измененных элементов (к примеру "0") так и свойства массива (к примеру "length", Symbol.iterator) и методы.

Живой пример

Теперь посмотрим как все это работает.

class Entity {
    #data = [];
    #dataProxy = new Proxy(this.#data, {
        get(target, property, receiver) {
            const result = Reflect.get(target, property, receiver);
            console.warn(`Чтение '${property.toString()}'.`);
            return result;
        },
        set(target, property, value, receiver) {
            const result = Reflect.set(target, property, value, receiver);
            console.warn(`Запись '${property.toString()}' на ${value}.`);
            return result;
        }
    });
    get data() {
        return this.#dataProxy;
    }
}

const entity = new Entity();
entity.data[0] = 1;
entity.data[1] = entity.data[0];
entity.data.push(entity.data[0] + entity.data[1]);
for (const item of entity.data) {
    console.log(item);
}
div.as-console-wrapper {
  inset: 0;
  max-height: unset;
}

7
  • Я знаю, что вопрос 3-летней давности, но эта тема действительно нуждается в объяснении. Когда-то, когда сам изучал, искал на разных сайтах и особенно тут и не нашел ничего подобного.
    – eccs0103
    8 янв 2023 в 18:33
  • при использовании for of сначала выполняется чтение всех индексов, потом параметра length который не является числом. - что это значит?
    – Grundy
    8 янв 2023 в 18:46
  • @Grundy эта строка самому что-то не нравился. Перефразировал. Взгляните сейчас.
    – eccs0103
    8 янв 2023 в 18:50
  • плохо. чтение length - это особенность реализации итератора по массиву. В общем случае length не будет запрашиваться. Только сам итератор
    – Grundy
    8 янв 2023 в 18:56
  • и пример какой-то странный. Ты записываешь 0.5 ключ, но потом теряешь его
    – Grundy
    8 янв 2023 в 18:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.