В некоторых современных объектно-ориентированных языках есть понятие идексаторов – свойств, позволяющих работать с экземпляром класса как с массивом, используя [] нотацию. В этой статье я хочу продемонстрировать как это сделать на современном JavaScript.
Приведу пример на C#:
class Colors {
private Dictionary<string, Color> inner = new Dictionary<string, Color>();
// реализуем индексатор
public Color this[string name] {
get => inner[name];
set => inner[name] = value;
}
}
class Program {
static void Main(string[] args) {
Colors c = new Colors();
// обращаемся к свойству используя [] нотацию
c["red"] = Color.Red;
c["yellow"] = Color.Yellow;
}
}
К сожалению, пока такой возможности современный ES6 напрямую не предлагает. Тем не менее, в ES6 есть механизмы позволяющие добиться подобного поведения, хоть это будет выглядеть и работать не так изящно, как в том же C#.
В ES6 есть особый класс Proxy, позволяющий перехватывать обращения к базовому классу. Таким образом, появляется возможность особым образом обрабатывать обращения к полям класса.
Давайте повторим наш C# пример на JS без каких-либо хитростей.
class Colors {
#colors = new Map();
getColor(key) {
// тут может быть сложная логика
return this.#colors.get(key);
}
setColor(key, value) {
// тут может быть сложная логика
this.#colors.set(key, value);
}
hasColor(key) {
return this.#colors.has(key);
}
}
const colors = new Colors();
colors.setColor('red', ...);
colors.setColor('yellow', ...);
colors.hasColor(‘red’); => true
Чтобы добавить цвет в набор мы вместо нотации [] используем метод setColor(). Исправим это дело добавив магию Proxy. Для этого объявим в классе Colors конструктор и будем вместо экземпляра Colors возвращать его Proxy обертку с обработчиками get и set.
constructor() {
return new Proxy(this, {
// перекрывает получение Colors.name
get(target, name) {
if (name in target) {
const result = target[name];
return typeof result === 'function' ? result.bind(target) : result;
}
return target.getColor(name);
},
// перекрывает установку Colors.name
set(target, name, value) {
if (name in target)
target[name] = value;
else
target.setColor(name, value);
return true;
}
});
}
Тут необходимо дополнительно пояснить некоторый код обработчика get:
if (name in target) {…}
Этот фрагмент нужен чтобы дать доступ к свойствам и методам класса (например, hasColor), и только если такого свойства или метода в классе нет, то вызов пойдет в getColor().
return typeof result === 'function' ? result.bind(target) : result;
Тут функции биндятся к target (т.е. к экземпляру Color), так как иначе внутри они получат this = Proxy.
После создания такого конструктора нам становится доступен требуемый синтаксис:
const colors = new Colors();
colors['red'] = …;
colors['yellow'] = …;
colors.has('red'); // true
console.log(colors['yellow']);
Несмотря на то, что мы добились требуемого результата, код на JS выглядит скорее как костыль и использовать его я бы рекомендовал только если вы переносите существующий код с другого языка (C#, Delphi), где такие свойства активно использовались.
В свою очередь, мне было бы интересно узнать, есть ли еще способы реализовать [] нотацию для вызова геттера/сеттера без использования Proxy.
habr.com
Приведу пример на C#:
class Colors {
private Dictionary<string, Color> inner = new Dictionary<string, Color>();
// реализуем индексатор
public Color this[string name] {
get => inner[name];
set => inner[name] = value;
}
}
class Program {
static void Main(string[] args) {
Colors c = new Colors();
// обращаемся к свойству используя [] нотацию
c["red"] = Color.Red;
c["yellow"] = Color.Yellow;
}
}
К сожалению, пока такой возможности современный ES6 напрямую не предлагает. Тем не менее, в ES6 есть механизмы позволяющие добиться подобного поведения, хоть это будет выглядеть и работать не так изящно, как в том же C#.
В ES6 есть особый класс Proxy, позволяющий перехватывать обращения к базовому классу. Таким образом, появляется возможность особым образом обрабатывать обращения к полям класса.
Давайте повторим наш C# пример на JS без каких-либо хитростей.
class Colors {
#colors = new Map();
getColor(key) {
// тут может быть сложная логика
return this.#colors.get(key);
}
setColor(key, value) {
// тут может быть сложная логика
this.#colors.set(key, value);
}
hasColor(key) {
return this.#colors.has(key);
}
}
const colors = new Colors();
colors.setColor('red', ...);
colors.setColor('yellow', ...);
colors.hasColor(‘red’); => true
Чтобы добавить цвет в набор мы вместо нотации [] используем метод setColor(). Исправим это дело добавив магию Proxy. Для этого объявим в классе Colors конструктор и будем вместо экземпляра Colors возвращать его Proxy обертку с обработчиками get и set.
constructor() {
return new Proxy(this, {
// перекрывает получение Colors.name
get(target, name) {
if (name in target) {
const result = target[name];
return typeof result === 'function' ? result.bind(target) : result;
}
return target.getColor(name);
},
// перекрывает установку Colors.name
set(target, name, value) {
if (name in target)
target[name] = value;
else
target.setColor(name, value);
return true;
}
});
}
Тут необходимо дополнительно пояснить некоторый код обработчика get:
if (name in target) {…}
Этот фрагмент нужен чтобы дать доступ к свойствам и методам класса (например, hasColor), и только если такого свойства или метода в классе нет, то вызов пойдет в getColor().
return typeof result === 'function' ? result.bind(target) : result;
Тут функции биндятся к target (т.е. к экземпляру Color), так как иначе внутри они получат this = Proxy.
После создания такого конструктора нам становится доступен требуемый синтаксис:
const colors = new Colors();
colors['red'] = …;
colors['yellow'] = …;
colors.has('red'); // true
console.log(colors['yellow']);
Несмотря на то, что мы добились требуемого результата, код на JS выглядит скорее как костыль и использовать его я бы рекомендовал только если вы переносите существующий код с другого языка (C#, Delphi), где такие свойства активно использовались.
В свою очередь, мне было бы интересно узнать, есть ли еще способы реализовать [] нотацию для вызова геттера/сеттера без использования Proxy.
Индексаторы (Indexers) в JavaScript
В некоторых современных объектно-ориентированных языках есть понятие идексаторов – свойств, позволяющих работать с экземпляром класса как с массивом, используя [] нотацию. В этой статье я хочу...
habr.com