Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Что это</a></li>

2 <li><a>Определение в коде</a><ul><li><a>Инициализация</a></li>

3 </ul></li>

4 <li><a>Поля</a><ul><li><a>Приватные поля</a></li>

5 <li><a>Публичные поля</a></li>

6 </ul></li>

7 <li><a>Методы</a><ul><li><a>Методы экземпляра</a><ul><li><a>Геттер и сеттер</a></li>

8 </ul></li>

9 <li><a>Статичные методы</a></li>

10 </ul></li>

11 <li><a>Наследование</a><ul><li><a>Родитель: конструктор и класс</a></li>

12 </ul></li>

13 </ul><p>JavaScript - удобный и очень популярный язык программирования. Он ориентирован преимущественно на веб-разработку. Базируется на создании программного обеспечения с использованием сценариев (скриптов).</p>

14 <p>Среди пользователей, которые только начинают погружение в создание софта, является достаточно распространенным языком. Java Script выделяется простым и понятным синтаксисом, высокой читаемостью исходного кода, функциональностью.</p>

15 <p>Для того, чтобы можно было создавать качественное ПО на JS, нужно изучить некоторые ключевые функции и возможности ЯП. Пример - классы и его элементы. В данной статье речь зайдет именно о них.</p>

16 <h2>Что это</h2>

17 <p>В JS классы несколько отличаются от "общепринятых" понятий в объектно-ориентированном программировании. Здесь реализация соответствующих элементов отсутствует.</p>

18 <p>Класс в JavaScript:</p>

19 <ul><li>абстракция;</li>

20 <li>надстройка над прототипным наследованием, которая имитирует класс;</li>

21 <li>функция.</li>

22 </ul><p>С ES2015 работать с соответствующими компонентами в JS стало намного проще, так как он добавил специальное ключевое слово, отвечающее за вызов интересующей функции. Речь идет о синтаксическом сахаре над прототипным наследованием.</p>

23 <h2>Определение в коде</h2>

24 <p>Добавить класс в программный код позволяет специальное ключевое слово. Речь идет о "class" (без кавычек). Оно добавляет новый класс. После ключевого слова необходимо задать имя соответствующего элемента кода. Далее - открыть фигурные скобки. Они отвечают за определение тела класса.</p>

25 <p>Указывать название класса не обязательно. Через его выражение можно назначить рассматриваемых элемент переменной или провести экспорт в качестве части модуля ES2015.</p>

26 <p>Класс становится полезным тогда, когда программист создает экземпляр класса. Это - объект, содержащий информацию и поведение, описанные при помощи соответствующих classes. Для создания экземпляра класса нужно использовать оператор new.</p>

27 <h3>Инициализация</h3>

28 <p>При инициализации экземпляра класса будет срабатывать специальная функция. Она носит название "constructor". Ее добавление происходит непосредственно в классе. Это - специальный метод, отвечающий за инициализацию classes. Тут можно устанавливать изначальные значения для полей, а также выполнять любые настройки элементов (объектов).</p>

29 <p>Здесь:</p>

30 <ol><li>Функция-конструктор принимает аргумент name.</li>

31 <li>Name используется для определения свойства name в классе.</li>

32 <li>Аргумент необходимо передать при создании экземпляра класса:</li>

33 <li>Внутри конструктора происходит ссылка на новый экземпляр.</li>

34 </ol><p>Если конструктор в рассматриваемом элементе кода не описывается, функция constructor все равно будет создана. Она окажется пустой.</p>

35 <h2>Поля</h2>

36 <p>Добавить в код класс - не самая трудная задача для программиста в JS. Это базовый навык, который должен освоить каждый. Из-за того, что экземпляр class в JS - это объект, то у него есть свойства. Они носят название полей.</p>

37 <p>В рассматриваемом элементе кода можно увидеть несколько типов полей:</p>

38 <ul><li>экземпляра;</li>

39 <li>самого класса.</li>

40 </ul><p>Каждый из них бывает публичным и приватным. Первый доступен в пределах всего исходного кода, второй - внутри class, в котором он определен.</p>

41 <h3>Приватные поля</h3>

42 <p>Доступ к публичным полям экземпляра предоставляется в теле класса. Чтобы добавить "приватность", нужно перед именем поля поставить символ "решетка" (#):</p>

43 <p>Тут приватное поле - name. У метода getName в теле рассматриваемого элемента есть доступ к нему. А вот напрямую воспользоваться им не получится.</p>

44 <p>Если пользователю необходимо задать статичное приватное поле (которое относится к самому class), сделать это можно при помощи ранее предложенного примера:</p>

45 <h3>Публичные поля</h3>

46 <p>Это - самый распространенный элемент кода. Доступ к нему предоставляется по всему исходному коду:</p>

47 <p>Комментарии тут можно дать следующие:</p>

48 <ol><li>Name - это публичное поле экземпляра.</li>

49 <li>Для того, чтобы было удобнее работать с рассматриваемым элементом, можно декларировать поля не в конструкторе, а в теле classes.</li>

50 <li>Декларация в теле особо удобна, если нужно присвоить свойствам дефолтные значения. Это ситуация, при которой передача аргументов в конструктор не является обязательной.</li>

51 </ol><p>Статичные поля (classes) - свойства, принадлежащие самому классу. Данный момент удобен, если нужно сохранять константы или информацию, актуальную для всех без исключения элементов class.</p>

52 <p>Здесь публичных переменных две - TYPE_ADMIN и TYPE_REGULAR. Так как строки кода указывают на статичность и принадлежность к рассматриваемому "главному" элементу, для обращения к ним нужно использовать имя User.Type_Admin. Если попытаться обратиться через экземпляр, код возвращает undefined.</p>

53 <h2>Методы</h2>

54 <p>Добавить классы в код - не самая трудная задача. Она требует хранения информации, которая будет использоваться приложением. На помощь приходят методы. Это - функции, которые выполняют те или иные операции с имеющимися данными. Могут быть как "экземплярными", так и статичными.</p>

55 <h3>Методы экземпляра</h3>

56 <p>Они имеют доступ к данным класса. Могут вызывать другие методы:</p>

57 <p>Здесь есть класс User. У него - метод getName. Как и в функции constructor this внутри метода ссылается на созданный "элемент" classes. А вот метод, который вызывает "себеподобный":</p>

58 <p>Методы, как и поля, бывают приватными.</p>

59 <h4><em>Геттер и сеттер</em></h4>

60 <p>Геттеры и сеттеры - специальные методы, срабатывающие автоматически при обращении к полям для получения или корректировки имеющихся значений. Они имитируют обычное поле, но с большим контролем доступа:</p>

61 <ul><li>getter - выполняется, когда происходит попытка получения значения полей;</li>

62 <li>setter - работает при установлении значения.</li>

63 </ul><p>Выше - пример проверки на факт того, что name не является пустым элементом программного кода.</p>

64 <h3>Статичные методы</h3>

65 <p>Относятся непосредственно к классу. В них должна просматриваться логика, актуальная для всех будущих экземпляров. Необходимо помнить следующие принципы:</p>

66 <ul><li>статичные методы обладают доступом к статичным полям;</li>

67 <li>не имеют доступа к полям экземпляра.</li>

68 </ul><p>Встречаются как "публичные", так и приватные вариации. Составляются точно так же, как и при работе со статичными приватными свойствами.</p>

69 <h2>Наследование</h2>

70 <p>Еще один важный элемент написания программы - это наследование. Задается в JS при помощи ключевого слова extends. Надпись class Child extend Parent указывает на то, что элемент Child выступает наследником от class Parent. Происходит передача функции-конструктора, полей, методов.</p>

71 <p>Здесь Admin унаследовал функцию-конструктор, метод getName() и поле name. У него имеется и собственный элемент status, выступающий в качестве свойства.</p>

72 <h3>Родитель: конструктор и класс</h3>

73 <p>Если добавить в код класс наследник, то для инициализации потребуется вызвать функцию super(). Она отвечает за вызов конструктора класса-родителя.</p>

74 <p>Также в JS дочерние classes могут использовать ключевое слово super. Оно дает возможность вызова метода родителя:</p>

75 <p>Выше - пример того, как это выглядит в редакторе. Есть class User, а у него метод - renderProperties. Последний получает в виде аргумента элемент Node-дерева, а потом рендерит в него все поля. Наследник выглядит в этом случае так.</p>

76 <a></a>