2. Об’єктно-орієнтоване програмування – такий
підхід у програмуванні, в якому програма
розглядається як множина об’єктів, які взаємодіють
між собою. При цьому кожен з об’єктів є
екземпляром певного класу. Класи можуть
утворювати ієрархію успадкування.
Прикладами об’єктів можуть бути:
• меню;
• ігровий персонаж;
• галерея;
• елемент сторінки…
3. Об’єкти. Методи. this
У об’єктах може міститись інформація, яка подається у
вигляді набору пар ім‘я/значення, але об’єкти ще
можуть мати функції-методи.
Приклад:
var person = {
name: "Колобок",
age: 0.1,
talk: function () { alert("Я від діда
втік, я від баби втік..."); }
};
Виклик методу:
person.talk();
4. Методи можна додавати і видаляти.
Наприклад:
var animal = {
name: 'Заєць'
};
animal.talk = function() { // метод
призначається після створення об'єкта
alert('Колобок, колобок, я тебе з'їм!');
};
animal.talk(); // виклик методу
5. Для того, щоб метод мав доступ до свого
власного об’єкта, використовується ключове
слово this.
animal.sayHi = function() {
alert('Привіт, мене звати ' + this.name);
};
animal.sayHi();
6. this можна використати для оголошення
функції без об’єкта.
function sayHi() {
alert('Привіт, мене звати ' + this.name );
}
animal.hi = sayHi;
person.hi = sayHi;
animal.hi();
person.hi();
7. Можна застосувати інший підхід, де
використовується конструктор класу:
function Animal(name) { // конструктор класу Animal
this.sayHi = function() {
alert( "Привіт, мене звати " + name );
};
}
var zayets = new Animal("Заєць"); // створюємо нову
"тварину" (новий екземпляр класу)
zayets.sayHi(); // у нього вже є метод sayHi()
var vovk = new Animal("Вовк"); // створюємо ще одну
"тварину"
vovk.sayHi(); // який теж має метод sayHi()
8. Внутрішній і зовнішній інтерфейси об’єктів
• Внутрішній інтерфейс – це властивості і методи, доступ
до яких можливий тільки з інших методів цього об’єкта.
Це «приватні» властивості і методи.
• Зовнішній інтерфейс – це властивості і методи, доступні
зовні об’єкта. Це «публічні» властивості і методи.
9. Приклад:
function Animal(name) {
var legsNumber = 4; // кількість ніг
this.isHungry = true; // тварина голодна alert(
'Створено тварину. Тварину звати ' + name);
}
// створюємо тварину з іменем "Індик"
var animal = new Animal("Індик");
// змінити кількість ніг
animal.legsNumber = 2;
alert(animal); // неінформативно
alert(JSON.stringify(animal)); // значно наочніше
10. Приватними властивостями є локальні змінні і параметри
конструктора. У попредньому прикладі приватними
властивостями є name і legsNumber.
Властивості, записані в this, можна вважати публічними. В
прикладі – isHungry.
Додамо публічний метод sayToKolobok і приватний
swallow:
11. function Animal(name) {
var legsNumber = 4; // кількість ніг
this.isHungry = true; // тварина голодна
this.sayToKolobok = function() {
alert( "Колобок, колобок, я тебе з'їм!" );
}
function swallow() {
alert( 'Наївся!' );
}
}
var animal = new Animal("Індик");
animal.sayToKolobok();
animal.swallow(); // TypeError: animal.swallow
is not a function
12. Задача 86
1. Створіть клас Kolobok з параметром конструктора
health.
2. Створіть у класі публічний метод sing. Колобок
повинен співати "Я від діда втік, я від баби втік".
3. Створіть приватний метод increaseHealth, який буде
збільшувати “здоров’я” Колобка (health) на 1 пункт за 1
секунду, але не більше як до 100.
4. Створюйте колобка натисканням кнопки “Спекти колобка”.
При цьому він повинен “народитись” з health=50 і зразу
заспівати.
13. Розв’язок
<button onclick="makeKolobok()">Спекти колобка</button>
<div id=kolobokDiv></div>
<script>
function Kolobok(health) {
var timerId;
this.sing = function() { alert( "Я від діда втік, я від баби втік" ); }
timerId = setInterval(increaseHealth, 100);
function increaseHealth() {
if (health < 100) {
health++;
kolobokDiv.innerHTML = health;
} else {
alert( "Здоровий!" );
clearInterval(timerId);
}
}
};
function makeKolobok() {
var kolobok = new Kolobok(50);
kolobok.sing();
}
</script>
14. Ґеттери і сеттери
Додамо колобку публічну властивість
speed.
this.speed = 0;
Це потенційно небезпечно, бо будь-хто
може “копнути” колобка так, що його
швидкість перевищить швидкість світла.
Тому краще зробити цю властивість
приватною, а її зміну виконувати через
спеціальний метод, який називають
сеттером (setter).
15. function Kolobok(health, maxSpeed) {
var timerId;
var speed = 0;
this.setSpeed = function(s) {
if (s < 0) {
alert ("швидкість повинна бути додатною");
}
if (s > maxSpeed) {
alert ("не можна запустити колобка зі
швидкістю понад " + maxSpeed);
}
speed = s;
}
...
}
...
var kolobok = new Kolobok(50, 100);
kolobok.setSpeed(-60); // буде повідомлення
16. Але тепер speed – приватна властивість і ми її не
можемо прочитати.
alert( kolobok.speed ); // undefined
Щоб зовнішній код зміг прочитати значення швидкості,
створимо спеціальну функцію – ґеттер (getter).
function Kolobok(health, maxSpeed) {
this.setSpeed = function(s) {
...
speed = s;
}
this.getSpeed = function() {
return speed;
};
...
}
var kolobok = new Kolobok(50, 100);
kolobok.setSpeed(60);
alert( kolobok.getSpeed() ); // 60
17. Для зручності можна об’єднати ґеттер і сеттер в один метод,
який зазвичай називають так само, як відповідна властивість.
Якщо цей метод викликати з параметом, функція передає
параметр властивості, якщо без параметра – читає властивість.
function Kolobok(health, maxSpeed) {
var speed = 0;
this.speed = function(s) {
if (!arguments.length) return speed; // ґеттер
if (s < 0) { // сеттер
alert ("швидкість повинна бути додатною");
}
if (s > maxSpeed) {
alert ("не можна перевищити " + maxSpeed);
}
speed = s;
}
...
}
var kolobok = new Kolobok(50, 100);
kolobok.speed(70);
alert( kolobok.speed() );
18. Задача 87
1. Додайте Вашому колобку описаний вище ґеттер-сеттер
для швидкості. Протестуйте з різними значеннями швидкості
після створення колобка.
2. Додайте ґеттер для “здоров’я” колобка.
19. Розв’язок
function Kolobok(health, maxSpeed) {
var timerId;
var speed = 0;
this.speed = function(s) {
if (!arguments.length) return speed; // ґеттер
if (s < 0) { // сеттер
alert ("швидкість повинна бути додатною");
}
if (s > maxSpeed) {
alert ("не можна запустити колобка зі швидкістю понад " + maxSpeed);
}
speed = s;
}
this.getHealth = function() {
return health;
};
...
};
function makeKolobok() {
var kolobok = new Kolobok(50, 100);
kolobok.speed(70);
alert( kolobok.speed() );
alert( kolobok.getHealth() );
}
20. Задача 88
1. Напишіть конструктор Animal з
приватними властивостями name і
legsNumber (кількість ніг).
2. Створіть сеттери для цих властивостей.
3. Створіть ґеттер, який повертає зразу ім’я
і кількість ніг.
4. Створіть чотирилапого зайця і дволапого
індика.
