Короткое введение в ООП на JavaScript
Объекты в JavaScript, как и во многих других языках программирования, можно сравнить с объектами в реальной жизни. Автомобиль является примером объекта реального мира. Автомобиль имеет свойства, используемые для определения характеристики объекта, такие как имя или цвет, и такие методы, как accelerate (ускорить) или brake (сломаться).
Объекты группируют вместе набор свойств и методов для создания модели. В JavaScript свойства можно рассматривать как переменные внутри объекта, а методы - как функции этого объекта.
Создание объекта
При создании объекта в JavaScript используется так называемый литерал объекта. Это упрощенное обозначение чаще используется при создании отдельного объекта. Конструктор объекта может быть использован для создания нескольких объектов. Свойства и методы объекта хранятся в переменной, они связаны с ней и используются для идентификации объекта.
В примере ниже создадим объект с именем hotel, и он будет содержать ряд свойств (properties) со своими значениями (values): имя отеля (name), количество комнат, или номеров (rooms) и количество забронированных номеров (booked):
1 2 3 4 5 |
var hotel = { name: "The Grand Hotel", rooms: 104, booked: 98 }; |
Свойства объекта можно получить с помощью точечной нотации, т.е. обращение к свойствам происходит так: имя_объекта.свойство. Можно также использовать квадратные скобки для обращения к свойству:
имя_объекта["свойство"].
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var hotel = { name: "The Grand Hotel", rooms: 104, booked: 98 }; // Название отеля var hotelName = hotel.name; // Количество комнат (номеров) var hotelRooms = hotel.rooms; // Можно использовать квадратные скобки, если вам так больше нравится var hotelRooms = hotel['rooms']; |
Свойства в пределах объекта также могут быть изменены или удалены из объекта c использованием точечной нотации или с помощью квадратных скобок, аналогично тому, как мы получаем доступ к свойствам объекта.
1 2 3 4 5 6 7 8 9 10 11 |
var hotel = { name: "The Grand Hotel", rooms: 104, booked: 98 }; // Название отеля var hotelName = hotel.name; // Измените название отеля hotelName = "Park Hotel" |
Мы можем также удалить свойство или очистить значение свойства из нашего объекта hotel, как показано ниже:
1 2 3 4 5 |
// Удаление свойства с помощью ключевого слова delete delete hotel.name; // Очистка значения свойства hotel.name = ''; |
Давайте создадим в объекте hotel метод для проверки наличия номеров внутри отеля. Метод использует ключевое слово this, чтобы показать, что он работает с текущими значениями свойств rooms и booked:
1 2 3 4 5 6 7 8 9 10 |
var hotel = { name: "The Grand Hotel", rooms: 104, booked: 98, // Метод для проверки наличия свободных номеров checkAvailable: function() { return this.rooms - this.booked; } }; |
Метод внутри объекта можно получить с помощью точечной нотации подобно тому, как мы получаем доступ к свойствам объекта.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var hotel = { name: "The Grand Hotel", rooms: 104, booked: 98, // Проверяем наличие свободных номеров checkAvailable: function() { return this.rooms - this.booked; } }; // вызываем метод объекта hotel var roomsAvailable = hotel.checkAvailable(); |
Создание объектов с помощью конструктора
Наш предыдущий объект был создан с помощью литерала, и этот способ прекрасно подойдет, если вам нужен всего один объект, но не тогда, когда объектов должно быть несколько. Создание объектов с помощью конструктора позволяет сделать шаблон для создания нескольких объектов. Экземпляры (Instances ) объекта могут быть созданы с помощью специального ключевого слова new с последующим вызовом функции, которая и создает новый объект.
Имя функции-конструктора обычно начинается с заглавной буквы, как в примере ниже:
1 2 3 4 5 6 7 8 9 10 |
function Hotel(name, rooms, booked) { this.name = name; this.rooms = rooms; this.booked = booked; // Проверка наличия свободных номеров this.checkAvailable = function() { return this.rooms - this.booked; }; } |
Экземпляр этого объекта теперь может быть создан, чтобы создать две гостиницы - 2 объекта типа Hotel, которые наследуют свойства и методы объекта Hotel. Значения для каждого свойства отеля будут передаваться в объект с помощью аргументов. Ключевое слово this используется вместо имени объекта - Hotel - чтобы указать, что свойства и методы принадлежат тому объекту, который создан с помощью этой функции.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function Hotel(name, rooms, booked) { this.name = name; this.rooms = rooms; this.booked = booked; // Проверка наличия свободных номеров this.checkAvailable = function() { return this.rooms - this.booked; }; } // Создаем один или несколько экземпляров объекта Hotel var grandHotel = new Hotel("The Grand Hotel", 104, 98); var parkHotel = new Hotel("Park Hotel", 98, 94); |
В этом примере один объект Hotel будет иметь название "The Grand Hotel" с общим количеством номеров - 104, из которых заняты 98, а второй объект Hotel будет иметь название "Park Hotel", но номеров в нем 98, а заняты из них 94.
Каждый раз, когда функция вызывается - с помощью конструктора new Hotel - значения изменяются, как если бы они передавались как параметры функции, а затем присваивались свойствам объекта. Оба объекта могут затем использовать метод checkAvailable, определенный как функция.
Мы можем получить доступ к свойствам и методам обоих объектов, используя точечную нотацию, как и ранее:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function Hotel(name, rooms, booked) { this.name = name; this.rooms = rooms; this.booked = booked; // Проверка наличия свободных номеров this.checkAvailable = function() { return this.rooms - this.booked; }; } // Создаем один или несколько экземпляров объекта Hotel var grandHotel = new Hotel("The Grand Hotel", 104, 98); var parkHotel = new Hotel("Park Hotel", 98, 94); // Свойства The Grand Hotel var hotelOneName = grandHotel.name; var hotelOneRooms = grandHotel.rooms; // Метод для The Grand Hotel для проверки наличия свободных номеров var hotelOneAvailability = grandHotel.checkAvailable(); |
Теперь пришло время, чтобы сложить все вместе. Начнем с создания простой HTML-страницы с именем index.html со следующим кодом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Данные отелей</title> </head> <body> <!-- Отображает данные отелей из JavaScript-файла js/hotels.js --> <div id="hotel-name"></div> <div id="hotel-rooms"></div> <div id="hotel-available-rooms"></div> <script src="js/hotels.js"></script> </body> </html> |
Нам теперь требуется код JavaScript, чтобы добавить функциональности нашей странице. Создайте в той же папке, где расположен файл index.html еще одну папку с именем js. А в ней - новый файл с именем hotels.js. Этот файл должен содержать код JavaScript, приведенный ниже. Обновите HTML-страницу (F5), чтобы увидеть результат.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// js/hotels.js function Hotel(name, rooms, booked) { this.name = name; this.rooms = rooms; this.booked = booked; // Method to check room availability this.checkAvailable = function() { return this.rooms - this.booked; }; } // Создаем экземпляры объекта Hotel var grandHotel = new Hotel("The Grand Hotel", 104, 98); var parkHotel = new Hotel("Park Hotel", 98, 94); // Свойства The Grand Hotel var hotelOneName = grandHotel.name; // Hotel name var hotelOneRooms = grandHotel.rooms; // Hotel rooms // Метод для The Grand Hotel дляпроверки свободных номеров var hotelOneAvailability = grandHotel.checkAvailable(); // Доступ к HTML элементам по ID и отображение значений свойств объекта document.getElementById("hotel-name").innerHTML = hotelOneName; document.getElementById("hotel-rooms").innerHTML = hotelOneRooms; document.getElementById("hotel-available-rooms").innerHTML = hotelOneAvailability; |
Это было очень простое и короткое введение в объектно-ориентированный JavaScript.
Автор оригинальной статьи Dan Jackson.
Вот статья, которая объясняет смысл написания скрипта. Начинающие программисты, изучив эту статью, вам будет легче вникнуть в глубинный смысл кодирования.
Очень интересно. И очень понятно.
Спасибо за перевод.