Вы здесь: Главная » JavaScript » Объектно-ориентированный JavaScript

Объектно-ориентированный JavaScript

Короткое введение в ООП на JavaScript

Объекты в JavaScript, как и во многих других языках программирования, можно сравнить с объектами в реальной жизни. Автомобиль является примером объекта реального мира. Автомобиль имеет свойства, используемые для определения характеристики объекта, такие как имя или цвет, и такие методы, как accelerate (ускорить) или brake (сломаться).

Объекты группируют вместе набор свойств и методов для создания модели. В JavaScript свойства можно рассматривать как переменные внутри объекта, а методы - как функции этого объекта.

Создание объекта

При создании объекта в JavaScript используется  так называемый литерал объекта. Это упрощенное обозначение чаще используется при создании отдельного объекта. Конструктор объекта может быть использован для создания нескольких объектов. Свойства и методы объекта хранятся в переменной, они связаны с ней и используются для идентификации объекта.

В примере ниже создадим объект с именем hotel, и он будет содержать ряд свойств (properties) со своими значениями (values): имя отеля (name), количество комнат, или номеров (rooms) и количество забронированных номеров (booked):

Свойства объекта можно получить с помощью точечной нотации, т.е. обращение к свойствам происходит так: имя_объекта.свойство. Можно также использовать квадратные скобки для обращения к свойству:

имя_объекта["свойство"].

Свойства в пределах объекта также могут быть изменены или удалены из объекта c использованием точечной нотации или с помощью квадратных скобок, аналогично тому, как мы получаем доступ к свойствам объекта.

Мы можем также удалить свойство или очистить значение свойства из нашего объекта hotel, как показано ниже:

Давайте создадим в объекте hotel метод  для проверки наличия номеров внутри отеля. Метод использует ключевое слово this, чтобы показать, что он работает с текущими значениями  свойств rooms и booked:

Метод внутри объекта можно получить с помощью точечной нотации подобно тому, как мы получаем доступ к свойствам объекта.

Создание объектов с помощью конструктора

Наш предыдущий объект был создан с помощью литерала, и этот способ прекрасно подойдет, если вам нужен всего один объект, но не тогда, когда объектов должно быть несколько. Создание объектов с помощью конструктора  позволяет сделать шаблон для создания нескольких объектов. Экземпляры (Instances ) объекта могут быть созданы с помощью специального ключевого слова new  с последующим вызовом функции, которая и создает новый объект.

Имя функции-конструктора обычно начинается с заглавной буквы, как в примере ниже:

Экземпляр этого объекта теперь может быть создан, чтобы создать две гостиницы - 2 объекта типа Hotel, которые наследуют свойства и методы объекта Hotel. Значения для каждого свойства отеля будут передаваться в объект с помощью аргументов. Ключевое слово this используется вместо имени объекта - Hotel - чтобы указать, что свойства и методы принадлежат тому объекту, который создан с помощью этой функции.

В этом примере один объект Hotel будет иметь название "The Grand Hotel"  с общим количеством номеров - 104, из которых заняты 98, а второй объект Hotel будет иметь название "Park Hotel", но номеров в нем 98, а заняты из них 94.

Каждый раз, когда функция вызывается - с помощью конструктора new Hotel  - значения изменяются, как если бы они передавались как параметры функции, а затем присваивались свойствам объекта. Оба объекта могут затем использовать метод checkAvailable, определенный как функция.

Мы можем получить доступ к свойствам и методам обоих объектов, используя точечную нотацию, как и ранее:

Теперь пришло время, чтобы сложить все вместе. Начнем с создания простой HTML-страницы с именем index.html со следующим кодом:

Нам теперь требуется код JavaScript, чтобы добавить функциональности нашей странице. Создайте в той же папке, где расположен файл index.html  еще одну папку с именем js. А в ней -  новый файл с именем hotels.js. Этот файл должен содержать код JavaScript, приведенный ниже. Обновите HTML-страницу (F5), чтобы увидеть результат.

Это было очень простое и короткое  введение в объектно-ориентированный JavaScript.

Автор статьи Dan Jackson.

Перевод html-plus.in.uaсточник)

продажа алкоголя время узнать на нашем сайте

1 Комментарий

  1. Очень интересно. И очень понятно.
    Спасибо за перевод.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *