Что такое геттеры и сеттеры в javascript
This, Getters и Setters в классах Javascript
Классы
Объектно-ориентированyное программирование в Javascript не является чем-то новым, но в то время как многие другие языки использовали синтаксис классов, Javascript все еще не использовал его. Это всегда было важной деталью, которая беспокоила некоторых разработчиков, потому что было немного сложнее легко мигрировать между технологиями.
Так, начиная с ECMAScript 2015 (ES6), классы стали частью языка. Это не изменило и не добавило функциональности, но внесло лучшую организацию в код, кроме того, вошло в стандарт других технологий.
Представьте, что вам нужно как-то изолировать или защитить элементы этих классов. Что для этого использовать?
Представьте, что вы объявляете класс учителей следующим образом:
И внутри этого класса вы захотели добавить метод – который является не более чем функцией, специфичной для него – под названием greeting, который будет печатать на консоли “Доброе утро” для этого учителя.
Для этого нам понадобится соединить свойства имя и фамилия во время печати приветствия. Вот тогда и появляется это. Это слово происходит от английского “this”, поэтому можно понять, что его использование направлено на то, чтобы направить эти свойства на сам класс. следующим образом:
Но тогда почему мы не можем использовать для этого само имя класса? Все просто, представьте, что есть глобальная переменная с таким же именем teacher. Если мы используем teacher.name внутри класса, это может привести к двусмысленному коду, что вызовет проблемы.
Getter
Геттер, с синтаксисом get, связан с функцией, которая будет вызвана при обращении к рассматриваемому свойству и динамическом запросе. Вы можете использовать его для возврата состояния внутренней переменной без явного использования методов. следующим образом:
В этом примере мы просто использовали геттер для возврата значения, которое уже было объявлено фиксированным образом. Что если мы хотим вернуть динамическое значение, как среднее значение других свойств? Мы можем сделать это следующим образом:
Некоторые важные моменты, на которые следует обратить внимание при использовании геттеров, следующие:
Однако как мы можем установить значение свойства с помощью параметра? Итак, у нас есть последний модификатор – сеттер.
Setter
Обычно используются в сочетании с геттерами, сеттеры используются для установки значений для определенного свойства.
Поэтому в данном случае мы можем вызвать сеттер, передав параметр для изменения значения свойства name студента.
При использовании сеттеров следует обратить внимание на следующие важные моменты:
Теперь мы можем как получать доступ к свойствам объекта (с помощью геттеров), так и изменять их значения (с помощью сеттеров).
Дескрипторы, геттеры и сеттеры свойств
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/object-properties.
В этой главе мы рассмотрим возможности, которые позволяют очень гибко и мощно управлять всеми свойствами объекта, включая их аспекты – изменяемость, видимость в цикле for..in и даже незаметно делать их функциями.
Они поддерживаются всеми современными браузерами, но не IE8-. Впрочем, даже IE8 их поддерживает, но только для DOM-объектов (используются при работе со страницей, это сейчас вне нашего рассмотрения).
Дескрипторы в примерах
Основной метод для управления свойствами – Object.defineProperty.
Он позволяет объявить свойство объекта и, что самое главное, тонко настроить его особые аспекты, которые никак иначе не изменить.
obj Объект, в котором объявляется свойство. prop Имя свойства, которое нужно объявить или модифицировать. descriptor Дескриптор – объект, который описывает поведение свойства.
В нём могут быть следующие поля:
Далее мы подробно разберём эти свойства на примерах.
Обычное свойство
Два таких вызова работают одинаково:
Оба вызова выше добавляют в объект user обычное (удаляемое, изменяемое, перечисляемое) свойство.
Свойство-константа
Для того, чтобы сделать свойство неизменяемым, изменим его флаги writable и configurable :
Свойство, скрытое для for…in
Мы бы хотели, чтобы поведение нашего метода toString было таким же, как и стандартного.
Свойство-функция
Например, добавим возможность присвоения user.fullName к примеру выше:
Указание get/set в литералах
Например, ниже объявлен геттер-сеттер fullName :
Да здравствуют get/set!
Конечно, в ряде случаев свойства выглядят короче, такое решение просто может быть красивым. Но основной бонус – это гибкость, возможность получить контроль над свойством в любой момент!
Например, в начале разработки мы используем обычные свойства, например у User будет имя name и возраст age :
С обычными свойствами в коде меньше букв, они удобны, причины использовать функции пока нет.
…Но рано или поздно могут произойти изменения. Например, в User может стать более целесообразно вместо возраста age хранить дату рождения birthday :
Можно, конечно, найти все места и поправить их, но это долго, а иногда и невозможно, скажем, если вы взаимодействуете со сторонней библиотекой, код в которой – чужой и влезать в него нежелательно.
Заметим, что pete.age снаружи как было свойством, так и осталось. То есть, переписывать внешний код на вызов функции pete.age() не нужно.
Таким образом, defineProperty позволяет нам начать с обычных свойств, а в будущем, при необходимости, можно в любой момент заменить их на функции, реализующие более сложную логику.
Другие методы работы со свойствами
Позволяет объявить несколько свойств сразу:
Возвращают массив – список свойств объекта.
Object.getOwnPropertyNames – возвращает все:
Полученный дескриптор можно изменить и использовать defineProperty для сохранения изменений, например:
…И несколько методов, которые используются очень редко:
Задачи
Добавить get/set-свойства
Имя и фамилия всегда разделяются пробелом.
Геттеры и сеттеры
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Для управляемого доступа к состоянию объекта используют специальные функции, так называемые «геттеры» и «сеттеры».
Геттер и сеттер для воды
На текущий момент количество воды в кофеварке является публичным свойством waterAmount :
Это немного опасно. Ведь в это свойство можно записать произвольное количество воды, хоть весь мировой океан.
Это ещё ничего, гораздо хуже, что можно наоборот – вылить больше, чем есть:
Так происходит потому, что свойство полностью доступно снаружи.
Чтобы не было таких казусов, нам нужно ограничить контроль над свойством со стороны внешнего кода.
Для лучшего контроля над свойством его делают приватным, а запись значения осуществляется через специальный метод, который называют «сеттер» (setter method).
Теперь waterAmount – внутреннее свойство, его можно записать (через сеттер), но, увы, нельзя прочитать.
Для того, чтобы дать возможность внешнему коду узнать его значение, создадим специальную функцию – «геттер» (getter method).
Единый геттер-сеттер
Для большего удобства иногда делают единый метод, который называется так же, как свойство и отвечает и за запись, и за чтение.
При вызове без параметров такой метод возвращает свойство, а при передаче параметра – назначает его.
Единый геттер-сеттер используется реже, чем две отдельные функции, но в некоторых JavaScript-библиотеках, например jQuery и D3, подобный подход принят на уровне концепта.
Итого
Также можно организовать геттеры/сеттеры для свойства, не меняя структуры кода, через дескрипторы свойств.
Задачи
Написать объект с геттерами и сеттерами
Напишите конструктор User для создания объектов:
Должен работать так:
Обратим внимание, что для «геттера» getFullName нет соответствующего свойства объекта, он конструирует ответ «на лету». Это нормально. Одна из целей существования геттеров/сеттеров – как раз и есть изоляция внутренних свойств объекта, чтобы можно было их как угодно менять, генерировать «на лету», а внешний интерфейс оставался тем же.
Добавить геттер для power
Обратим внимание, что ситуация, когда у свойства power есть геттер, но нет сеттера – вполне обычна.
Здесь это означает, что мощность power можно указать лишь при создании кофеварки и в дальнейшем её можно прочитать, но нельзя изменить.
Добавить публичный метод кофеварке
При этом, конечно же, должны происходить все необходимые проверки – на положительность и превышение ёмкости.
Геттеры и сеттеры в Javascript
Javascript — очень изящный язык с кучей интересных возможностей. Большинство из этих возможностей скрыты одним неприятным фактором — Internet Explorer’ом и другим дерьмом, с которым нам приходится работать. Тем не менее, с приходом мобильных телефонов с актуальными браузерами и серверного JavaScript с нормальными движками эти возможности уже можно и нужно использовать прям сейчас. Но по привычке, даже при программировании для node.js мы стараемся писать так, чтобы оно работало в IE6+.
В этой статье я расскажу про интересный и не секретный способ указывать изящные геттеры и сеттеры и немножко покопаемся в исходниках Mootools. Частично это информация взята из статьи John Resig, частично лично мой опыт и эксперименты.
Стандартные геттеры
Что такое Геттеры и Сеттеры, надеюсь знают все. Обычно и кроссбраузерно это выглядит так:
Можно пойти дальше и написать более изящный вариант:
Нативные геттеры/сеттеры
Но есть более удобный способ, который работает во всех серверных движках и современных браузерах, а именно Firefox, Chrome, Safari3+, Opera9.5+ — задание сеттера и геттера для свойства так, чтобы продолжать обращатся к свойству, как свойству. У такого подхода есть несколько преимуществ:
1. Более изящная запись. Представим ORM:
2. Если апи, которое базируется на свойствах уже есть и его нельзя менять (а очень нужно).
Есть два способа задать такой геттер/сеттер:
Через объект:
Через методы __defineGetter__ и __defineSetter__:
Определяем поддержку браузером
Из этого можно получить лёгкий способ определения, поддерживает ли браузер геттеры или не поддерживает:
Как быть с наследованием?
Таким образом нашему target передадутся не значения родительского source, а функции-геттеры/сеттеры.
Что следует помнить
MooTools
Мутулз не поддерживает по-умолчанию такую возможность. И, хотя я уже предложил патч, мы можем с лёгкостью (слегка изменив исходники) заставить его понимать геттеры и сеттеры.
Итак, какая наша цель?
Более того, в классах унаследованных через Implements и Extends тоже должны работать геттеры и сеттеры родительского класса. Все наши действия будут происходить в файле [name: Class] внутри анонимной функции.
Во-первых, внутри функции, в самом верху, определим функцию, которая перезаписывает только геттеры и сеттеры. И хотя мы отказалась от устаревших браузеров — стоит застраховаться.
Конечно, если наш скрипт с такими геттерами попадёт в устаревший браузер, то он просто упадёт, но это страховка от того, чтобы кто-то случайно не взял этот файл и не прицепил его к себе на сайт, а потом недоумевал, что такое с ишаком.
Мы видим, что если __lookupGetter__ не поддерживается, то функция просто ничего не сделает.
Теперь заставляем работать getterы и setterы во время создания класса и наследования (Extends). Для этого:
Отдельным движением надо реализовать наследование геттеров и сеттеров от примесей (Implements). Для этого надо найти встроенные Мутаторы и добавить всего одну строку:
Все, теперь сеттеры и геттеры реализуются и мы с лёгкостью можем их наследовать и использовать. Наслаждайтесь)
Getters & Setters в Javascript
Очевидное
Шаг 2: прячем данные в замыкании конструктора
Конечно, пока всё просто.
Шаг 3: in more JavaScript way
function MyObject(newVal) <
var _secretProperty = newVal;
Есть параметр, значит setter. Нет параметра — getter. Главное — описать это в аннотации JSDoc 🙂
И вот на таком способе можно уже и остановиться. Да, он хорош, но мы пойдём дальше!
Legacy syntax
// Вторые два проверяют наличие getter’ов и setter’ов:
alert(obj.__lookupGetter__( ‘a’ )) // some function-getter for ‘a’
alert(obj.__lookupGetter__( ‘b’ )) // undefined
alert(obj.__lookupSetter__( ‘a’ )) // some function-setter for ‘a’
Данный код прекрасно работает в:
FF 1.0+, Chrome 0.2+, Safari 3.0+, Opera 9.5+
И не работает в:
IE — все версии, включая 8.0
get/set
// Примеры
alert(obj.real_a); // 1
obj.a = 9; // setter в действии
alert(obj.real_a); // 4.5
alert(obj.a); // 9; getter в действии
Данный код прекрасно работает в:
FF 1.0+, Chrome 0.2+, Safari 3.0+, Opera 9.5+
И не работает в:
IE — все версии, включая 8.0
Я повторил предыдущий пример (из legacy syntax, см. выше), но во сколько раз уменьшился объём кода! Это замечательно (казалось бы)!
Но нет. В тех браузерах, где конструкции get/set не поддерживаются, такой код вызовет синтаксическую ошибку. Поэтому я бы пока воздержался от использования (ну или запихивать в try-catch, что не очень).
В целом же — запись через get/set полностью аналогична записи через legacy syntax.
Firefox way
FF пошёл в getter’ах и setter’ах дальше (не знаю, кстати, зачем) и создал +2 велосипеда 🙂
По сути, мы можем задавать именованные функции-обработчики. Вот и всё. Не знаю, зачем это кому-то понадобится.
var obj = <
a getter: function b() < /**/ >,
a setter: function (v) < /**/ >,
‘^_^’ getter: magicGetter
>;
alert(obj.__lookupGetter__( ‘a’ )) // function b()
alert(obj.__lookupSetter__( ‘a’ )) // function(v)
alert(obj.__lookupGetter__( ‘^_^’ )) // function magicGetter()
Данный код прекрасно работает исключительно в:
FF 1.0+
Тут тоже можно задавать именованные функции-обработчики, но есть 2 преимущества перед предидущим: задание внешней функции-обработчика и задание getter’ов/setter’ов для аттрибутов с недопустимыми (для записи через «.») символами.
Хотя всё это можно сделать и через __defineGetter__/__defineSetter__. Потому и велосипеды.
Да, использование любого из этих двух способов приведёт к SyntaxError везде, кроме FF. Помним! 🙂
IE way
Internet Explorer, как всегда, сказал «мне с вами не по пути» и сделал getter’ы и setter’ы своим собственным способом.
IE 8.0+
Остаются справедливыми правила: а) одноимённый аттрибут затирается; б) один getter не добавляет setter автоматически (и vice versa).
Если всё же захочется применить этот механизм к не-DOM-элементам, то придётся изворачиваться и делать подмену вашего объекта на DOM-элемент.
IE 5.0+
Выводы, или пока всё
Я оставлю возможность реализовать небольшой кросс-браузерный фреймворк — вам, товарищи 🙂 Но скажу, что сделать его — реально. Хотя для IE это будет непросто.
Справка
В статье я указал, в каких наиболее популярных браузерах работают те или иные механизмы getter’ов и setter’ов. Но ведь это далеко не все браузеры. Поэтому уточню:
Firefox 0.9+ | Engine: Gecko 1.7+ (JS engine: SpiderMonkey/TraceMonkey)
Chrome 0.2+ | Engine: WebKit 522+ (JS engine: V8)
Safari 3.0+ | Engine: WebKit 522+ (JS engine: JavaScriptCore)
Opera 9.5+ | Engine: Presto 2.1+ (JS engine: Futhark)
IE 5.0 — IE 7.0 | Engine: Trident (unversioned) (JS engine: JScript 5.0 — JScript 5.7)
IE 8.0+ | Engine: Trident 4.0+ (JS engine: JScript 5.8+)
Внимательно посмотрите на Engine/JS engine. Если я позабыл упомянуть ваш браузер, но он использует один из перечисленных движков (важна версия движка), то и работать в нём всё будет так же, как и в упомянутом браузере.