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

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

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

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

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

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

В приведенном ниже примере создается объект с именем hotel, содержащий ряд свойств, содержащих значения.

var hotel = {
    name: "The Grand Hotel",
    rooms: 104,
    booked: 98
};

Доступ к свойствам объекта можно получить, используя точечную нотацию. Этоиспользует имя объекта, за которым следует точка — оператор-член — за которым следует имя свойства.

var hotel = {
    name: "The Grand Hotel",
    rooms: 104,
    booked: 98
};
// The name of the hotel
var hotelName = hotel.name;
// The number of rooms
var hotelRooms = hotel.rooms;
// OR square brackets can be used should you prefer
var hotelRooms = hotel['rooms']; 

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

var hotel = {
    name: "The Grand Hotel",
    rooms: 104,
    booked: 98
};
// The name of the hotel
var hotelName = hotel.name;
// Change the name of the hotel
hotelName = "Park Hotel"

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

// Delete the property using the delete keyword
delete hotel.name;
// Clear the value of the property
hotel.name = '';

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

var hotel = {
    name: "The Grand Hotel",
    rooms: 104,
    booked: 98,
    // Method to check room availability
    checkAvailable: function() {
        return this.rooms - this.booked;    
    }
};

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

var hotel = {
    name: "The Grand Hotel",
    rooms: 104,
    booked: 98,
    // Method to check room availability
    checkAvailable: function() {
        return this.rooms - this.booked;    
    }
};
// Call the method within the hotel object
var roomsAvailable = hotel.checkAvailable();

Объекты — нотация конструктора

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

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

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. Значения для каждого свойства отеля будут переданы в объект в аргументах. Ключевое слово this используется вместо имени объекта — Hotel — для указания того, что свойства и методы принадлежат объекту, созданному из этой функции.

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;
    };
}
// Create instance/instances of the Hotel object
var grandHotel = new Hotel("The Grand Hotel", 104, 98);
var parkHotel = new Hotel("Park Hotel", 98, 94); 

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

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

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;
    };
}
// Create instance/instances of the Hotel object
var grandHotel = new Hotel("The Grand Hotel", 104, 98);
var parkHotel = new Hotel("Park Hotel", 98, 94);
// Properties of The Grand Hotel
var hotelOneName = grandHotel.name;
var hotelOneRooms = grandHotel.rooms;
// Method of the The Grand Hotel to check room availability
var hotelOneAvailability = grandHotel.checkAvailable();

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

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Hotels example page</title>
</head>
<body>
<!-- Display hotel values from the js/hotels.js JavaScript file -->
<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, чтобы увидеть результат.

// 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;
    };
}
// Create instance/instances of the Hotel object
var grandHotel = new Hotel("The Grand Hotel", 104, 98);
var parkHotel = new Hotel("Park Hotel", 98, 94);
// Properties of The Grand Hotel
var hotelOneName = grandHotel.name;  // Hotel name
var hotelOneRooms = grandHotel.rooms; // Hotel rooms
// Method of the The Grand Hotel to check room availability
var hotelOneAvailability = grandHotel.checkAvailable();
// Access the ID attribute of HTML elements and to display values
document.getElementById("hotel-name").innerHTML = hotelOneName;
document.getElementById("hotel-rooms").innerHTML = hotelOneRooms;
document.getElementById("hotel-available-rooms").innerHTML = hotelOneAvailability;

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

Удачного кодирования :)