Назад Вперед Зміст

Об'єктно-орієнтоване програмування в JavaScript

Класи

У об'єктно-орієнтованому програмуванні клас – це шаблон коду, що розширюється, для створення об'єктів, який встановлює в них початкові значення (властивості) і реалізацію поведінки (методи).

Базовий синтаксис виглядає так: 


class MyClass {
  // методы класса
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

Часта помилка розробників-початківців – ставити кому між методами класу, що призводить до синтаксичної помилки.

У JavaScript клас – це різновид функції. Ось що насправді робить конструкція class User {...}: 

class User {
  constructor(name) { this.name = name; }
  sayHi() { alert(this.name); }
}

// Доказ: User - це функція
alert(typeof User); // Function

  1. Створює функцію з ім'ям User, яка стає результатом оголошення класу. Код функції береться з методу конструктора (вона буде порожньою, якщо такого методу немає).

  2. Зберігає всі методи, такі як sayHi, в User.prototype.

  3. При викликі методу об'єкта new User його буде взято з прототипу. Таким чином, об'єкти new User мають доступ до методів класу.

По-перше, функція, створена за допомогою class, позначена спеціальною внутрішньою властивістю [[FunctionKind]]:"classConstructor". Тому це не зовсім те саме, що створювати її вручну.

На відміну від звичайних функцій конструктор класу не може бути викликаний без new.

Bо-друге,методи класу є непереліченими. Визначення класу встановлює прапор numerable в false для всіх методів "prototype".

І це добре, тому що якщо ми проходимося циклом for..in по об'єкту, то зазвичай ми не хочемо при цьому отримувати методи класу.

По-третє, класи завжди використовують use strict. Весь код всередині класу автоматично знаходиться в строгому режимі. Як і функції, класи можна визначати всередині іншого виразу, передавати, повертати, надавати і т.д.

Приклад 2

Розмітка сторінки містить блок, в якому відображатиметься робота скрипту та малюнок об'єкта, який ми будемо створювати. По клацанню на картинці має бути видана інформація про об'єкт.

Створюємо клас Animal.

Створюємо клас Hen(курка). Але ми хочемо, щоб Hen розширював Animal. Інакше кажучи, курки мають походити від тварин, тобто. мати доступ до методів Animal та розширювати функціональність Animal своїми методами.

Для того, щоб успадкувати клас від іншого, ми повинні використовувати ключове слово extends і вказати назву батьківського класу перед {..}.

Ключове слово extends працює за допомогою прототипів. Він встановлює Hen.prototype.[[Prototype]] в Animal.prototype. Отже, якщо метод не знайдено в Hen.prototype, JavaScript бере його з Animal.prototype.

Відпрацювання програми.

Перевизначення методів

Давайте перевизначимо метод. Зараз Hen успадковує від Animal метод stop, який встановлює this.speed = 0.Якщо ми визначимо свій метод stop у класі Hen, то він використовуватиметься замість батьківського:

Як і в літеральних об'єктах, у класах можна оголошувати обчислювані властивості, гетери/сетери і т.д.

Ось приклад animal.name, реалізованого з використанням get/set:

Прості завдання на класи

  1. Створити клас Car та Driver (водій). Клас Driver містить поля - ПІБ, стаж водіння. Клас Engine (мотор) містить поля – потужність, виробник. Клас Car містить поля – марка автомобіля, клас автомобіля, вага, водій типу Driver, мотор типу Engine. Методи start(), stop(), turnRight(), turnLeft(), які виводять на друк: "Поїхали", "Зупиняємося", "Поворот праворуч" або "Поворот ліворуч". А також метод printInfo(), який виводить повну інформацію про автомобіль, її водія і двигуна. Створити похідний від Car клас - Lorry (вантажівка), що характеризується також вантажопідйомністю кузова. Створити похідний від Car клас - SportCar, який також характеризується граничною швидкістю.
  2. Створити клас Person, який містить:
  3. Клас Phone.
  4. Створити клас Animal та розширюючі його класи Dog, Cat, Horse. Клас Animal містить змінні food, location і методи makeNoise, eat, sleep. Метод makeNoise, наприклад, може виводити на консоль "Така тварина спить". Dog, Cat, Horse перевизначають методи makeNoise, eat. Додайте змінні до класів Dog, Cat, Horse, що характеризують лише цих тварин. Створіть клас Ветеринар, у якому визначте метод void treatAnimal(Animal animal). Нехай цей метод роздруковує food і location тварини, що прийшла на прийом. У методі main створіть масив типу Animal, в який запишіть тварин всіх типів, що є у вас. У циклі надсилайте їх на прийом до ветеринара.
  5. Реалізуйте клас MyString, який буде мати такі методи: метод reverse(), який параметром приймає рядок, а повертає його в перевернутому вигляді, метод ucFirst(), який параметром приймає рядок, а повертає цей же рядок, зробивши його першу літеру заголовком і метод ucWords, який приймає рядок і робить заголовною першу літеру кожного слова цього рядка.
  6. Реалізуйте клас Worker (Працівник), який матиме такі властивості: name (ім'я), surname (прізвище), rate (ставка за день роботи), days (кількість відпрацьованих днів). Також клас повинен мати метод getSalary(), який виводитиме зарплату працівника. Зарплата - це добуток (множення) ставки rate на кількість відпрацьованих днів days. За допомогою нашого класу створіть двох робітників і знайдіть суму їхніх зарплат.
  7. Реалізуйте клас Tram (трамвай), який успадковуватиметься від класу Transport, подібно до того, як це зроблено в теоретичній частині уроку. Цей клас повинен мати такі властивості: номер (номер, успадковується від Transport), typetram (швидкісний чи ні, успадковується від Transport), year (рік створення). Клас повинен мати метод getFullInfo() (успадковується від Transport), за допомогою якого можна вивести одночасно всю інформацію про транспортний засіб. Також клас повинен мати метод getAge(), який виводитиме поточний вік трамвая(обчислюється так: потрібно від поточного року відібрати рік створення). Поточний рік отримаєте самостійно.
  8. Реалізуйте клас Student (Студент), який успадковуватиметься від класу User, подібно до того, як це зроблено в теоретичній частині уроку. Цей клас повинен мати такі властивості: name (ім'я, успадковується від User), surname (прізвище, успадковується від User), year (рік вступу до вузу). Клас повинен мати метод getFullName() (успадковується від User), за допомогою якого можна вивести одночасно ім'я та прізвище студента. Також клас повинен мати метод getCourse(), який виводитиме поточний курс студента (від 1 до 5). Курс обчислюється так: потрібно від поточного року відібрати рік вступу до вузу. Поточний рік отримаєте самостійно.
  9. Реалізуйте клас Student та клас Aspirant(спадкоємець Student), аспірант відрізняється від студента наявністю якоїсь наукової роботи. Створити метод getScholarship() для класу Student, який повертає суму стипендії. Якщо середня оцінка студента дорівнює 5, то сума 100 грн., інакше 80. Перевизначити цей метод у класі Aspirant. Якщо середня оцінка аспіранта дорівнює 5, то сума 200 грн., інакше 180 грн.
  10. Визначити клас Reader(читач), який зберігає таку інформацію про користувача бібліотеки: ПІБ, номер квитка читача, факультет, дата народження, телефон. Методи takeBook(), returnBook().
  11. Створити клас Point, який описує точку на площині за двома її координатами і містить: Створити дочірній клас ColorPoint, що описує кольорову точку на площині та містить:
  12. Батьківський клас - папуга: Дочірній клас папуги: Створити об'єкт дочірнього класу. За допомогою успадкованого методу Q обчислити якість об'єкта. За допомогою власного методу Qp обчислити "Уточнену якість" об'єкта.
  13. Створити клас - комп'ютерна мережа: Дочірній клас корпоративної мережі: Створити об'єкт дочірнього класу. За допомогою успадкованого методу Q обчислити якість об'єкта. За допомогою власного методу Qp обчислити "Уточнену якість" об'єкта.
  14. Створити клас - телевізор:
  15. Дочірній клас-смарт телевізор:
  16. Створити клас "Вектор". Клас повинен мати такі поля:
  17. Створити клас "Матриця". Клас повинен мати такі поля:

Назад Вперед Зміст