Відмінності між версіями «ООП в JavaScript»
(→Створення об'єктів за допомогою конструктора) |
(→Створення об'єктів за допомогою конструктора) |
||
Рядок 87: | Рядок 87: | ||
</ol> | </ol> | ||
Наприклад, конструктор для об'єкта MyObj з попереднього прикладу може мати наступний вигляд: | Наприклад, конструктор для об'єкта MyObj з попереднього прикладу може мати наступний вигляд: | ||
− | function MyObj(name, value) { | + | <font color="#008000">function MyObj(name, value) |
+ | { | ||
this.name = name; | this.name = name; | ||
this.value = value; | this.value = value; | ||
− | } | + | }</font> |
Зверніть увагу на використання операції <b>this</b> для доступу до властивостей об'єкта. Його особливості будуть розглянуті далі. | Зверніть увагу на використання операції <b>this</b> для доступу до властивостей об'єкта. Його особливості будуть розглянуті далі. | ||
Тепер для створення нових об'єктів <b>MyObj</b> достатньо викликати цей конструктор в операції <b>new</b>, наприклад: | Тепер для створення нових об'єктів <b>MyObj</b> достатньо викликати цей конструктор в операції <b>new</b>, наприклад: | ||
− | var myObjL = new MyObj("Indigo", 132); | + | <font color="#008000">var myObjL = new MyObj("Indigo", 132);</font> |
Продемонструємо на прикладі об'єкт, який буде складатися з іншого об'єкту та ініціалізовуватиметься за допомогою конструктору: | Продемонструємо на прикладі об'єкт, який буде складатися з іншого об'єкту та ініціалізовуватиметься за допомогою конструктору: | ||
− | function myOpt(enbl, vud) | + | <font color="#008000">function myOpt(enbl, vud) |
{ | { | ||
this.enabled = enbl; | this.enabled = enbl; | ||
this.vud = vud; | this.vud = vud; | ||
− | } | + | }</font> |
− | function MyObj(name, value, options) | + | <font color="#008000">function MyObj(name, value, options) |
{ | { | ||
this.name = name; | this.name = name; | ||
this.value = value; | this.value = value; | ||
this.options = options; | this.options = options; | ||
− | } | + | }</font> |
− | var myOpt = new myOpt(true, false); | + | <font color="#008000">var myOpt = new myOpt(true, false); |
− | var myObjL = new MyObj("Indigo", 132, myOpt); | + | var myObjL = new MyObj("Indigo", 132, myOpt);</font> |
== Створення методів == | == Створення методів == |
Версія за 20:09, 13 травня 2010
Теоретичний опис принципів ООП в JavaScript може заняти дуже багато часу, і викликати багато суперечок навколо питання чи взагалі існують класи в JavaScript. Я не буду на цьому зупинятися, а відразу дам відповідь: Класів в JavaScript НЕМАЄ
Зміст
Загальний Опис
JavaScript -- це мова програмування, яка базується на об`єктах. Всі об'єкти поділяються на 3 групи:
- вбудовані об'єкти виконуючої системи
- об'єкти середовища, в якому виконується сценарій
- користувацькі об'єкти
об'єкт JavaScript -- це неупорядкований набір властивостей.
Метод -- це властивість, що є функцією. Приклад синтаксису доступу до властивості об'єкту:
імя_об'єкта.імя_властивості
або
імя_об'єкта["імя_властивості"]
Останній синтаксис використовується оператором for ... in. Кожне властивість складається з назви, значення і набору наступних атрибутів:
Атрибут |
Опис Атрибуту |
DontEnum |
Чи повинна властивість попадати в перелічення при обході оператором for..in |
DontDelete |
Заборона видалення даної властивості. Спроба програмно видалити дану властивість буде проигноровано. |
ReadOnly |
Заборона зміни цієї властивості. Спроба програмно змінити дану властивість буде проигноровано. |
Нова властивість об'єкту створюється просто присвоюванням йому значення. Нехай, наприклад, ми вже створили об'єкт MyObj. Задамо йому ім'я, та, наприклад, якесь значення:
MyObj.name = "Мій Об'єкт";
MyObj.value = 256;
Тепер наш об'єкт має 2 властивості: name та value. У таких властивостей, створених користувачем, всі перераховані вище атрибути скинуті в false. Надалі ми можемо змінювати значення цих властивостей або переглядати.
Створення об'єкта
Існує два способи створення нових об'єктів у JavaScript, а саме:
- Використання ініціалізатора об'єкта.
- Використання конструктора об'єктів.
Створення об'єктів за допомогою ініціалізатора
Цей спосіб дозволяє одночасно створити об'єкт і привласнити значення всіх або частини його властивостей. Він застосовується в тих випадках, коли ми створюємо об'єкт з унікальним набором властивостей. Ініціалізатор об'єкта має вигляд:
(Властивість: значення [, властивість: значення])
Властивість - ідентифікатор, що задає ім'я властивості; значення - вираз, що задає значення цієї властивості.
Наприклад, об'єкт MyObj з попереднього прикладу може бути створений так:
var MyObj = {name: "Dead", value: "256"};
Можливо конструювати об'єкт в об'єкті. Додамо ще одну властивість об'єкта MyObj, яка називається options і сама є об'єктом:
var MyObj = {name: "Dead", value: "256", options: {enabled: true, vud: false}};
Створення об'єктів за допомогою конструктора
Цей спосіб застосовується в тих випадках, коли ми хочемо створити "клас"(реально функцію конструктор) об'єктів з певним набором властивостей, а потім створювати нові об'єкти, просто вказуючи, до якого класу вони повинні належати. Для цього потрібно спочатку створити конструктор об'єктів, який є функцією спеціального виду, а саме:
- Ім'я функції задає ім'я створюваного "класу" об'єктів;
- Тіло функції повинно містити присвоювання початкових значень властивостям і методам створюваного об'єкту.
Наприклад, конструктор для об'єкта MyObj з попереднього прикладу може мати наступний вигляд:
function MyObj(name, value) { this.name = name; this.value = value; }
Зверніть увагу на використання операції this для доступу до властивостей об'єкта. Його особливості будуть розглянуті далі.
Тепер для створення нових об'єктів MyObj достатньо викликати цей конструктор в операції new, наприклад:
var myObjL = new MyObj("Indigo", 132);
Продемонструємо на прикладі об'єкт, який буде складатися з іншого об'єкту та ініціалізовуватиметься за допомогою конструктору:
function myOpt(enbl, vud) { this.enabled = enbl; this.vud = vud; }
function MyObj(name, value, options) { this.name = name; this.value = value; this.options = options; }
var myOpt = new myOpt(true, false); var myObjL = new MyObj("Indigo", 132, myOpt);