Классы в JavaScript позволяют писать более чистый и читабельный код. Сегодняшняя статья продолжает тему классов в JavaScript, и в ней речь пойдет о таких понятиях, как поля классов, методы доступа геттеры и сеттеры. Это позволит вам улучшить свои навыки программирования и стать более продвинутым JavaScript разработчиком.
Предыдущая статья цикла: Ознакомление с классами в JavaScript (часть 1)
Вы помните конструктор класса из предыдущего урока? Хорошей новостью является то, что он больше не потребуется. Вместо этого мы будем использовать поля класса.
Целью полей классов, которые также называются свойствами классов, является обеспечение того, чтобы JavaScript разработчики могли создавать более простые конструкторы в классах JavaScript. Проще говоря, вам больше не придется объявлять свойства класса внутри конструктора. Вместо этого вы можете объявить их напрямую, вне конструктора и даже опустить сам конструктор.
Одна вещь, которую вы должны знать и помнить на будущее, — это то, что когда вы создаете эти поля, все они становятся «общедоступными» по умолчанию. Это означает, что все эти поля будут доступны как изнутри, так и снаружи класса. Вы сможете получить к ним доступ и изменить их, при желании. То же самое относится и к методам.
<script> class Vehicle { // Объявляем все свойства напрямую, как открытые по умолчанию name = 'Автомобиль'; condition = 'Б/у'; speed = 220; // Все методы ниже созданы как публичные по умолчанию vehicleName(name) { this.name = name; } vehicleCondition(condition) { this.condition = condition; } vehicleSpeed(speed) { this.speed = speed; } } </script>
Все свойства класса (или поля) по умолчанию являются открытыми. Таким образом, любой может получить к ним доступ и изменить их. Это может быть не желательно во всех ситуациях. Иногда вы можете захотеть сохранить некоторые свойства закрытыми или недоступными вне класса. Это именно то, что могут делать закрытые поля.
Когда вы объявляете какое-либо свойство класса как закрытое, вы можете получить к нему доступ только внутри этого класса. Итак, если вы хотите получить доступ к этому свойству и изменить его, вы можете создать методы внутри этого класса и использовать их для изменения этих свойств. Синтаксис для создания закрытых полей прост, достаточно указать перед именем свойства #
. Потом не забудьте использовать #
, когда вам нужно будет получить доступ к такому свойству.
Класс с открытыми и закрытыми свойствами
<script> class MyClass { // создаем открытое свойство foo = 'Это открытое свойство'; // Создаем закрытое свойство. Не забудьте начать с # #bar = 'Это закрытое свойство'; // Добавляем метод для доступа к публичному свойству foo getFoo() { return this.foo; } // Добавляем метод для доступа к закрытому свойству bar getBar() { // Не забудьте использовать полное имя свойства, включая # return this.#bar; } // Добавляем метод для изменения закрытого свойства bar changeBar(text) { // Не забудьте использовать полное имя свойства, включая # this.#bar = text; } } // Создаем экземпляр класса MyClass const classInstanceOne = new MyClass(); // Попробуем увидеть в логе открытое свойство foo с помощью метода getFoo() console.log(classInstanceOne.getFoo()); // Вывод: Это открытое свойство // Попробуем увидеть в логе закрытое свойство bar с помощью метода getBar() console.log(classInstanceOne.getBar()); // Вывод: Это закрытое свойство // Попробуем увидеть в логе открытое свойство foo напрямую console.log(classInstanceOne.foo); // Вывод: Это открытое свойство // Попробуем увидеть в логе закрытое свойство bar напрямую console.log(classInstanceOne.#bar); // Вывод: SyntaxError: Undefined private field undefined: must be declared in an enclosing class // Используем метод changeBar, чтобы изменить закрытое свойство bar classInstanceOne.changeBar('Это новый текст'); // Попробуем снова увидеть в логе закрытое свойство bar с методом getBar() console.log(classInstanceOne.getBar()); // Вывод: Это новый текст </script>
Подобно общедоступным методам, вы также можете создавать закрытые методы. Правила те же, что и для закрытых свойств (или полей). Эти методы видны только внутри класса. Вы не можете получить к ним доступ или использовать их извне. Здесь синтаксис такой же. Нужно указывать названием метода начиная с #
.
Открытые и закрытые свойства и методы – не единственное, что вы можете использовать в своем коде. Классы JavaScript также поддерживают статические свойства и методы. Одно из различий между открытыми, закрытыми и статическими свойствами и методами заключается в том, что статические свойства и методы можно вызывать для класса без создания нового экземпляра.
Вы можете вызывать из класса статические свойства и методы только один раз. Вы не можете вызывать статические свойства и методы из экземпляров классов. Синтаксис объявления свойства или метода как статического также прост. Все, что вам нужно сделать, это использовать ключевое слово static
перед именем свойства или метода.
<script> // Класс со статическим свойством и методом class MyClass { // Объявляем статическое свойство static foo = 'Статическое свойство'; // Объявляем статический метод static getFoo() { // Возвращаем значение статического свойства foo return MyClass.foo; } } // Попробуем получить доступ к статическому свойству foo непосредственно в MyClass console.log(MyClass.foo); // Вывод: Статическое свойство // Попробуем получить доступ к статическому свойству foo, используя статический метод getFoo() в MyClass console.log(MyClass.getFoo()); // Вывод: Статическое свойство // Создадим экземпляр класса MyClass const myClassInstance = new MyClass(); // Попробуем получить доступ к статическому свойству foo в myClassInstance console.log(myClassInstance.getFoo()); // Вывод: TypeError: myClassInstance.getFoo is not a function console.log(myClassInstance.foo); // Вывод: undefined </script>
Так как статические методы можно вызывать только в классах, разработчики часто используют их для своих приложений. Например, вы можете использовать их для некоторой очистки или обновления при создании новых экземпляров класса или уничтожении существующих. То же самое относится и к статическим свойствам. Например, вы можете использовать их для подсчета созданных вами экземпляров классов.
Другим относительно новым дополнением к классам JavaScript являются методы доступа getter (геттер) и setter (сеттер). Они были введены в ECMAScript 5 и они, на самом деле, очень просты для понимания и использования.
Проще говоря, геттеры и сеттеры – это методы, которые позволяют вам обрабатывать данные перед получением или установкой значений свойств. Вы используете сеттер методы, когда хотите установить или определить значения свойств. Например, вы можете использовать сеттер метод для проверки некоторого значения, прежде чем ваш код разрешит использовать его в качестве значения свойства.
Геттер методы – это методы, которые вы используете, когда хотите получить доступ и/или вернуть значение свойства. Например, если вы хотите получить доступ к некоторому значению свойства, вам не нужно просто возвращать (return
) это значение. Вместо этого вы можете использовать метод геттера, чтобы определить «пользовательский» вывод, такой как короткое сообщение, которое содержит значение этого свойства.
Когда вы хотите создать метод доступа к сеттеру, перед именем метода ставится префикс set
. Когда вы хотите создать метод доступа к геттеру, вы используете префикс get
.
<script> class User { constructor(username) { // Это вызовет сеттер this.username = username; } // Создаем геттер для свойства username get username() { console.log(`Ваш юзернейм ${this._username}.`); } // Создаем сеттер для свойства username set username(newUsername) { // Проверяем длину newUsername if (newUsername.length === 0) { // Показать сообщение, если имя пользователя слишком короткое console.log('Имя слишком короткое'); } // В противном случае присваиваем newUsername и используйте его в качестве значения для юзернейм this._username = newUsername; } } // Создаем экземпляр класса User const userOne = new User('Степан'); // Получаем доступ к свойству username пользователя userOne. Это автоматически вызовет геттер метод для свойства username userOne.username; // Вывод: Ваш юзернейм Степан // Попробуем создать экземпляр User без имени пользователя. Это автоматически вызовет сеттер метод для свойства username const userTwo = new User(''); // Имя слишком короткое </script>
В приведенном выше примере мы создали геттер и сеттер методы для свойства username
. Как видите, мы добавили перед свойством username
нижнее подчеркивание (_
). Без этого каждый раз, когда вызывается метод get
или set
, это вызывает переполнение стека. Это означает, что будет вызван get
, и он вызовет геттер снова и снова. Это создаст бесконечный цикл.
Две вещи о геттер и сеттер функциях, которые вы должны знать:
Вот почему в приведенном выше примере мы использовали username
в качестве имени для наших методов геттера и сеттера. Это, наряду с ключевыми словами get
и set
, сообщает JavaScript, что нужно делать, и с каким свойством это делать. Поэтому убедитесь, что имена методов setter и getter всегда совпадают с именами свойств.
Вот и все! На этом тема классов в JavaScript объявляется закрытой. Что дальше? Рекомендуем вам еще раз перечитать статьи этого цикла, и попробовать на практике рассмотренные примеры кода, с использованием собственных данных. Это поможет вам лучше усвоить материал.
Спасибо, что читаете нас!
Сегодняшний обзор посвящен людям, для которых важен вопрос конфиденциальности в Интернете и кто ценит свои…
Впервые о бренде Pro Plan услышали в 1986 году, когда он стал частью американской компании…
Страх наказания хуже самого наказания (В наказании есть нечто определенное, оно все же лучше, чем…
Если вы планируете разместить веб-сайт в Интернете, очень важно найти для него быстрый и надежный…
Учеба за границей уже давно ассоциируется с качественным образованием, новыми возможностями и множеством перспектив. Но…
Выбор мастера для ремонта и перетяжки мебели — задача, которая требует вдумчивого подхода. Ведь от…