Javascript Object: створення об 'єктів і робота

Javascript Object: створення об 'єктів і робота

Відвідування веб-ресурсу - це конкретний URI в адресному рядку браузера. Відвідувач вказує адресу сторінки, і вона розбирається браузером на елементи дерева DOM - Document Object Model. Будь-яке посилання на цій сторінці вказує переглядачу розібрати іншу сторінку і побудувати інше дерево об 'єктів.

Браузер дозволяє відвідувачеві повернутися назад або пройти вперед по ланцюжку сторінок, які вже були переглянуті в поточному сеансі роботи.


Фактично дії користувача - це переміщення між системами об 'єктів, що утворюються в процесі відвідування сторінок. Кожна сторінка - це власне дерево DOM і, крім того, JavaScript object 's - це об' єкти синтаксису самої мови і користувацьких описів.

DOM: завантаження, оновлення і зміна

Є три основні варіанти, які формують об 'єкти сторінки веб-ресурсу, як на рівні DOM і самої мови JavaScript, що виконав конструкції створення змінних, так і на підставі описів, зроблених розробником:

  • завантаження - відвідувач прийшов на сторінку сайту;
  • оновлення - відвідувач оновив сторінку (кнопка браузера або Ctrl-F5);
  • зміна елемента сторінки, наприклад (AJAX, скрипт, подія,...).

Всі три процеси кардинально розрізняються, але відрізняти особливості перших двох особливо важливо. Важко заборонити відвідувачеві оновлювати сторінку - це невикоренима "згубна" звичка відвідувача, яку розробнику слід мати на увазі.

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

Зміна сторінки без перезавантаження на рівні окремого її елемента (наприклад, AJAX) - це звичайне рішення для динамічних сторінок. Як правило, це використовується для переходів за елементами сторінки, зміни її об 'єктів, управління діалогом з відвідувачем.

Фундаментальні об 'єкти JavaScript

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


Все, що не є "рядком", "числом", "true, false, null або undefined, є об 'єктом. У рамках синтаксису мови цьому можна не надавати значення, розуміючи під об 'єктами тільки елементи DOM і власні описи JavaScript Object' s. Фундаментальна будова мови в більшості випадків для розробника не має суттєвого практичного значення.

Наприклад, математичні функції представлені об 'єктом Math. Це зручно в рамках концепції мови, але для розробника - це просто зручний синтаксис використання необхідного арсеналу математичних операцій.

Важливо правильно працювати з DOM і коректно описувати власні об 'єкти. Синтаксис JavaScript object function 's і виразів для їх застосування - це форма запису логіки необхідного алгоритму.

Рядки, масиви та об 'єкти

В основі всіх об 'єктів JavaScript лежить правило: "властивість" "=" "значення" "і поняття асоціативного масиву. У найпростішому випадку object JavaScript - це сукупність пар "" властивість "" = "" значення "". При цьому "значення" "не завжди може бути числом, а властивість не завжди записана без лапок.

Не слід зловживати іменуванням властивостей. Ідеально, коли імена властивостей містять тільки символи латинського алфавіту, задовольняють вимогам до іменування змінних і не є ключовими (в т. ч. зарезервованими) словами мови.

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

Ініціалізувати масив властивостей означає одночасно:


  • створення масиву;
  • створення об 'єкта.

У конкретному контексті застосування можна розглядати JavaScript object - як асоціативний масив, а в іншому місці алгоритму - як об 'єкт, призначати йому потрібні методи, змінювати значення його елементів.

Оскільки імена властивостей та їх значення під час створення або зміни повинні задаватися у форматі рядків, рекомендується використовувати рядкову нотацію та лапки.

Доступ до властивостей об "єкта

Отримати та змінити значення властивостей об 'єкта можна конструкцією Object.keys: JavaScript формує масив усіх властивостей об 'єкта. Коли об 'єкти створюються динамічно, ця конструкція дуже зручна, оскільки автоматично формує список всіх наявних в об' єкті властивостей.

У цьому прикладі описано два масиви різним чином. У застосуванні обидва масиви еквівалентні, оскільки містять однойменні властивості та їх значення. У циклі перебираються всі властивості другого масиву і формується рядок всіх значень.

Аналогічного ефекту можна досягти в точковій нотації або дужковій:


  • NameLast;
  • x1_Obj['NameFirst'].

Обидві конструкції допустимі і дають потрібний результат. У наведеному прикладі при завданні масиву через фігурні дужки "" {} "" може бути допущена помилка у вигляді символу "", "в кінці перерахування (зазначено в прикладі червоним кружечком). Зазвичай браузери ігнорують зайвий символ у перерахуванні, але краще цього не робити.

Видалення властивостей об 'єкта

Оскільки об 'єкт - це асоціативний масив, операція JavaScript delete object виконується на рівні поточного об' єкта (при спадкуванні - це має значення) і розглядається на збірці властивостей цього об 'єкта.

У контексті наведеного прикладу можна використовувати такі конструкції:

  • delete x1_Obj.NameLast;
  • delete x2_Obj['NameFirst'];

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

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

Синтаксис JavaScript object properties і functions (методи) аналогічний загальним канонам синтаксису і семантики мови. По суті, справа йде якраз навпаки.


Властивості та методи об 'єкта є варіантом опису інформації та можливих дій через об' єктно-орієнтовану парадигму JavaScript.

У цьому прикладі описано об 'єкт x3_Obj, який має лише дві властивості: item и pos. Потім було додано метод hello () у вигляді функції. У результаті інтерпретації цього опису в контексті значень властивостей JavaScript object values зробить так, як показано в віконці результату, тобто помістить тіло функції (1) як значення.

При прямому виклику властивості Hello () воно інтерпретується як метод (функція) і результатом (2) буде виконання коду цього методу.

Ключове слово this в об 'єкті

Для орієнтації в просторі властивостей об 'єкта розробник може використовувати ключове слово this і посилатися через нього на описані ним властивості для отримання або зміни їх значень.

Це тільки початок опису об 'єкта з тілом тільки конструктора. У цьому прикладі виконано опис об 'єкта для роботи з куками. Об 'єкт ініціалізується в момент завантаження сторінки конструкцією:


  • var oCookie = new scCookies(cOwnerCode);
  • Init();

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

  • GetCookie = function(cName) { ... };
  • SetCookie = function(cName, cValue) { ... }.

Так описано методи об "єкта для читання куки за її назвою та запису значення куки з певною назвою.

  • GetCookie('cOwner');
  • SetCookie('cOwner', cOwner);

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

Приклад об 'єкта для роботи з куками

Можна обговорити, що таке JavaScript Object 's і парадигма об' єктно-орієнтованого підходу мови, що працює в середовищі браузера. Це цікаво, але в реальності потрібна практика, а не теорія. Обслуговувати DOM сторінки, надавати інструментарій для маніпулювання об 'єктами і переміщення по системах об' єктів - це сильна сторона JavaScript.

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

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

Фактично об 'єкт куки виникає відразу після того, як браузер побудує DOM і доповнює систему об' єктів JavaScript новим функціоналом: прочитати і створити (змінити) куки.

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

При такому підході розробник забезпечує створення системи унікальних об 'єктів достатніх для опису та обслуговування вирішуваного завдання.

Події сторінки та об 'єктів

Важливий елемент функціонування DOM і JavaScript: object event 's - дозволяє отримати інформацію про подію в його обробнику. Практично кожному елементу сторінки можна призначити власний обробник на одну або декілька подій.

Фактично розробник JavaScript створює не один великий "шматок" коду, а безліч описів функцій, об 'єктів, структур даних і призначає конкретним елементам сторінки обробники подій.

Object event - це інформація про подію, яка викликала обробник і можливість виконання цим обробником адекватної реакції на цю подію. Кожна подія відрізняється не тільки ім 'ям і місцем виникнення, а й безліччю інших параметрів.

Зокрема, події клавіатури - це один набір параметрів, події мишки - зовсім інший спектр даних, а відповідь сервера через AJAX зовсім планує сам розробник.

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

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

Браузер "" трансформує "URI, адреса веб-ресурсу, вказана відвідувачем, у дерево DOM - систему об 'єктів сторінки цього веб-ресурсу. Під час переміщення відвідувача за посиланнями сторінки браузер переходить на відповідні дерева інших сторінок.

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

  • робота з куками;
  • прийом/передача даних (AJAX);
  • спливаючі підказки;
  • внутрішні повідомлення (чат сайту);
  • інші завдання;

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

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