Мова javascript - об'єкти, методи і властивості

нові матеріали

Об'єкти, методи і властивості

Об'єкти і прототипи

Тепер, використовуючи типову для ООП ієрархічну модель успадкування, на мові Java можна створити дочірні об'єкти (класи), наприклад, для таких типів машин, як самоскид і автобус:

При цьому об'єкти Bus і Lorry успадковують всі властивості від батьківського об'єкта Automobile. В даному випадку вони отримають у спадок властивості vendor і model. Зверніть увагу на те, що при визначенні класів Java потрібно щоразу визначати метод, за назвою збігається з назвою класу. Цей метод називається конструктором, і викликається автоматично при створенні нової копії об'єкта. Відзначимо, що в об'єктно-орієнтованих мовах об'єкт спочатку повинен бути визначений, а потім - створений шляхом виклику конструктора.

Далі, створимо дочірні об'єкти, успадковують властивості класу Automobile:

function Lorry () Lorry.prototype = new Automobile; function Bus () Bus.prototype = new Automobile;

Видно, що створення нових об'єктів спочатку ніяк не узгоджується з батьком, що, знову-таки нетипово для ООП. Прив'язка до батьківського класу проводиться окремо, за допомогою ключового слова prototype, яке використовується для того, щоб вказати, що створюваний об'єкт грунтується на іншому об'єкті, званому прототипом.

Об'єкти та їх властивості

Щоб призначити властивості об'єкта будь-яке значення, досить його привласнити. Наприклад, якщо звернутися до наведеного вище прикладу з об'єктом-автомобілем, а вірніше, з вантажівкою, то для присвоєння значень всіх властивостей об'єкта Lorry необхідно написати наступне:

var MyTrack = new Lorry; // створюємо екземпляр на основі об'єкта Lorry MyTrack.vendor = "КамАЗ"; // визначаємо значення властивості vendor MyTrack.model = "6520"; // визначаємо значення властивості model MyTrack.carrying_tons = 20; // визначаємо значення властивості carrying_tons

Оскільки змінна MyTrack є повноцінним об'єктом, то можна використовувати оператор with для того, щоб зробити запис більш компактною:

MyTrack [ "vendor"] = "КамАЗ"; MyTrack [ "model"] = "6520"; MyTrack [ "carrying_tons"] = 20;

Тепер, коли ми розібралися з привласненням значень властивостей об'єктів, давайте створимо функцію, яка буде повертати все властивості об'єкта разом з їх значеннями. Для цього нам буде потрібно оператор for-in, за допомогою якого можна організувати цикл, перебирають всі властивості об'єкта. В результаті ми отримаємо приблизно таку функцію:

Результатом роботи такої функції буде висновок всіх властивостей об'єкта зі значеннями:

carrying_tons = 20 vendor = КамАЗ model = 6520

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

function show_props (obj, obj_name)

Тепер цей аргумент треба задіяти. Для цього зробимо зміни в рядку, «збирає» результат:

result + = obj_name + "." + I + "=" + obj [i] + "\ n";

Якщо тепер викликати таку функцію, використавши її як аргумент для методу document.write, що виводить текст безпосередньо в HTML-документ, то у вікні браузера можна буде побачити приблизно наступне:

MyTrack.carrying_tons = 20 MyTrack.vendor = КамАЗ MyTrack.model = 6520

Повний приклад можна подивитися у файлі objects \ automobile.html.

Створення нових об'єктів

Таким чином, вже в момент створення нового екземпляра об'єкта типу car можна відразу ж вказувати значення для всіх його властивостей:

Таким чином, наш об'єкт, що описує автомобіль, можна написати так:

При цьому попереднього визначення функції-конструктора вже не потрібно, оскільки відразу ж створюється змінна, яка є екземпляром об'єкта. Власне, в цьому і криється головний недолік такого підходу: якщо вам потрібно створити ще один подібний екземпляр, доведеться знову перераховувати всі його властивості.

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

Тепер спробуємо створити такий об'єкт і привласнити значення всім його властивостями. Якщо з першими трьома властивостями питань не виникає, то як бути з останнім, що є об'єктом? Перш за все, нам потрібно створити екземпляр такого об'єкта, і тільки коли він уже визначений, можна створити екземпляр об'єкта car:

Зрозуміло, створити подібний об'єкт можна і з використанням ініціалізатор. Для цього всередині визначення одного об'єкта в якості властивості вказують визначення ще одного об'єкта. Виглядати це буде так:

В обох випадках ми відразу ж призначали значення всіх властивостей. Однак у нас поки що залишається відкритим питання зміни значення властивостей-об'єктів. А робиться це знову-таки за допомогою точкового нотації, тільки для того щоб дістатися до параметрів двигуна, нам доведеться використовувати точку двічі:

MyCar.engine.volume = 1.3; MyCar.engine.cylinders = 4;

Якби одним з властивостей об'єкта engine так само був об'єкт, то довелося б використовувати точку тричі, і т.д. Приклад можна подивитися у файлі car_object.html.

методи об'єктів

Щоб створити метод, слід, перш за все, написати функцію, яка буде його реалізовувати, а потім вказати його в конструкторі об'єкту. Припустимо, нам не завадить функція, яка виводить у вигляді таблиці всі властивості автомобіля (вірніше, об'єкта car). У такому випадку спочатку напишемо таку функцію:

Ця функція спочатку створює строкову змінну str, в яку вносить все властивості об'єкта разом з HTML-розміткою, а потім виводить цей рядок у вікно браузера. Зверніть увагу, що до властивостей об'єкта функція звертається за допомогою покажчика this - такий синтаксис має на увазі, що дана функція буде методом об'єкта.

Тепер, коли у нас є функція, залишається визначити метод в самому об'єкті. Для цього досить додати назву функції до його опису:

Тепер, створивши об'єкт типу car, можна просто скористатися його власним методом для того, щоб вивести всі параметри у вигляді таблиці:

Мал. 4.3. Результат роботи методу displayCar () об'єкта car

Повністю приклад з працюючим методом displayCar (), причому відразу для декількох об'єктів типу car можна подивитися у файлі methods.html.

Деякі методи об'єктів window і document

Перш за все, це методи alert, prompt і confirm, що належать об'єкту window, причому з методом alert, що викликає модальне діалогове вікно з текстом, ми вже знайомі:

Решта 2 методу так само створюють модальні діалогові вікна, проте вони відрізняються тим, що очікують від користувача будь-якого певного дії. Так, метод confirm дозволяє вибрати один з двох варіантів відповіді:

В результаті виконання такої команди браузер покаже вікно з зазначеним текстом і пропонує зробити вибір на користь одного з 2 варіантів відповіді (рис. 4.4).

Мал. 4.4. Вибір з двох варіантів відповіді - перший крок до інтерактивності

Для використання цього методу, який повертає брехня або істину в залежності від того, яку кнопку натисне користувач, слід вдаватися до умовного оператору. Наприклад, щоб виводити таблицю з інформацією про машину тільки в тому випадку, якщо користувач погодиться, можна змінити код наступним чином:

if (confirm ( "Ввивесті інформацію про машину?")) MyCar.displayCar (); else alert ( "Сам відмовився!");

Тепер на початку завантаження документа буде показано діалогове вікно з вказаним нами питанням і кнопками «ОК» і «Скасувати». Якщо натиснути ОК, то буде виведена таблиця з характеристиками автомобіля, в іншому випадку здасться нове вікно зі словами «Сам відмовився!».

Ще більш цікавим є метод prompt, який дозволяє користувачеві ввести свої значення в якості відповідей на поставлені за допомогою цього методу питання. Наприклад, можна запитати у користувача, як його звуть:

var Name = prompt ( "Як вас звуть?");

Результатом виконання цієї функції буде вікно, що містить текст питання і рядок для відповіді (рис. 4.5). Те, що повертається цим методом значення так само треба якось використовувати (наприклад, присвоївши змінної Name), не повинно викликати питань, адже метод prompt, як і confirm, є функцією, що повертає значення.

Мал. 4.5. Діалогове вікно, яке викликається методом prompt

Оскільки в вікні запиту, що викликається методом prompt, так само є 2 кнопки, то слід враховувати, що якщо користувач замість того, щоб ввести текст і натиснути ОК, натисне «Скасування», повертається значенням буде null. Якщо ж користувач натисне ОК, залишивши поле порожнім, то повертається значенням буде порожній рядок. Але на відміну від alert і confirm, для методу prompt, насправді, передбачений ще один параметр, який визначає відповідь на питання за замовчуванням. Наприклад, можна вказати будь-яке узагальнююче ім'я в якості універсальної відповіді:

var Name = prompt ( "Як вас звуть?", "Мандрівник");

ПРИМІТКА
Браузер MSIE при виклику методу prompt без додаткового параметра в якості значення за замовчуванням підставляє рядок undefined. Тому, щоб не вводити користувача в замішання і не змушувати його прати цей напис, завжди використовуйте додатковий параметр, хоча б вказуючи порожній рядок в якості його значення.

З використанням методу prompt можна зробити приклад з класом автомобіля більш цікавим, надавши можливість ввести (або відредагувати) параметри машини шляхом послідовного виведення декількох вікон із запитами. Модернізований таким чином приклад ви можете подивитися у файлі confirm.html.

Для створення немодального вікон (тобто звичайних вікон браузера, здатних відображати вміст HTML-документів), використовується метод open:

var NewWindow = window.open ( "readme.html", "readme"); NewWindow.close ();

Тут створюється нове вікно браузера, в яке завантажується файл readme.html, відразу після чого воно закривається за допомогою іншого методу - close.

Як параметри вікна можна вказувати його розміри, а так само задавати наявність або відсутність елементів управління (зокрема, панелі інструментів). Наприклад, щоб створити вікно шириною 400 і висотою 300 пікселів, і при цьому не має панелі інструментів, слід викликати метод open з наступними параметрами:

var NewWindow = window.open ( "", "", "toolbar = 0, height = 300, width = 400");

Якщо об'єкт window відповідає за вікно браузера, то об'єкт document посилається безпосередньо за його вміст. Так, для об'єкта document теж існує метод open, але він не створює нове вікно, а завантажує документ в наявне:

document.write ( "Текст, який буде записаний в документ"); document.writeln ( "Текст, який теж буде записаний в документ");

Різниця між write () і writeln () складається тільки в тому, що останній додає в кінець символ «перенесення рядка» (\ n). По завершенню виведення тексту в документ корисно скористатися методом close:

Тут ми, перш за все, створюємо нове вікно (NewWindow). Спочатку воно буде порожнім, однак ми цілком можемо вивести в нього який-небудь текст, відкривши його для запису і скориставшись методом writeln.

Більш повний приклад, який ілюструє роботу методів document і window, можна знайти в файлі window.html.


SNK GSCP - нова бібліотека для PHP 5!
Web Studio і Visual Workshop Бібліотека:
Стандарти на web-технології
Монополія v. 2.0.2 Завантаження:
скачати програми Продукція:
програми і книги

Схожі статті