Об'єкти JavaScript приклади

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

Доступ до властивостей

Мова надає дві запису для доступу до властивостей. Перший і найбільш поширений відомий як точкове позначення. При точкової нотації доступ до ресурсу можна отримати, вказавши ім'я об'єкта хоста, за яким слідує період і ім'я властивості. Наприклад, коли object.foo спочатку було присвоєно значення one, тоді його значення стане 2 після виконання оператора jаvascript об'єктів.


Альтернативний синтаксис для доступу відомий як запис у вигляді дужок. У нотації за іменем об'єкта слід набір квадратних дужок. У них ім'я властивості вказується як рядок: object["foo"]= object["foo"]+ 1. Вона більш виразна, ніж точкова нотація, оскільки дозволяє змінної вказувати всі або частину імені властивості. Це можливо тому, що інтерпретатор jаvascript об'єктів автоматично перетворює вираз в рядок і потім отримує відповідну властивість. Імена властивостей створюються «на льоту» шляхом конкатенації вмісту змінної f із рядком "oo": var f = "f"; object[f + "oo"]= "bar". Позначення дужок дозволяє імен властивостей містити символи, які заборонені точкової нотації. Наприклад, наступний оператор повністю легальний в дужках. Однак якщо користувач спробує створити одне і те ж ім'я властивості точкової нотації, він зіткнеться з синтаксичною помилкою:

object["!@#$% &*()."]= true. Доступ до властивостей вкладених jаvascript об'єктів можна отримати шляхом зв'язування точок і/або дужок. Наприклад, наступний об'єкт містить вкладений об'єкт з ім'ям baz, що містить інший об'єкт з ім'ям foo, який має властивість з ім'ям bar, що містить п'ять: var object = {baz: {foo: {bar: 5}}}. Наступні вирази отримують доступ до вкладеного властивості bar. У першому виразі використовується точкова нотація, в той час як другий вираз використовує квадратну нотацію. Третє вираз об'єднує обидві запису для досягнення одного і того ж результату: object.baz.foo.bar; object["baz"] ["foo"] ["bar"]; object["baz"].foo["bar"]. Вирази, подібні показаним в попередньому прикладі, можуть призвести до погіршення продуктивності при неправильному використанні і вивести об'єкт jаvascript з ладу. Оцінка кожного виразу точки або дужки вимагає часу. Якщо одне і те ж властивість використовується кілька разів, тоді має сенс отримати доступ до властивості один раз, а потім зберегти значення локальної змінної для всіх майбутніх цілей.

Функція, як метод

Коли функція використовується як властивість об'єкта, вона називається методом. Подібно властивостям, вони вказані в нотації об'єктних літералів. Наприклад: var object = {sum: function(foo bar) {return foo + bar;}}. Методи jаvascript-об'єкта можуть викликатися з використанням міток і дужок. Наступний приклад викликає sum() метод з попереднього прикладу, використовуючи обидві запису: object.sum(1 2); object["sum"](1 2). Позначення літерала об'єкта корисно для створення нових об'єктів, але воно не може додавати властивості або методи існуючих. На щастя, додавання нових даних так само просто, як створення оператора присвоювання. Створюється порожній об'єкт. Потім за допомогою операторів присвоювання додаються дві властивості, foo, а bar, також метод baz: var object = {}; object.foo = 1; object.bar = null; object.baz = function() {return "hello from baz()";}.

Інкапсуляція програм

Основна ідея об'єктно-орієнтованого програмування полягає в тому, щоб розділити програми на більш дрібні частини і кожну з них відповідальною за управління своїм власним станом. Таким чином, деякі знання про те, як працює частина програми, можуть бути локальними для цієї частини. Хто-то, хто працює над іншою частиною програми, не повинен пам'ятати або навіть знати про це. Всякий раз, коли ці локальні дані змінюються, необхідно оновлювати тільки код безпосередньо навколо нього. Різні частини такої програми взаємодіють один з одним через інтерфейси, обмежені набори функцій або прив'язок, які забезпечують корисну функціональність на більш абстрактному рівні, приховуючи їх точну реалізацію. Такі частини програми моделюються з використанням об'єктів. Їх інтерфейс складається з певного набору методів і властивостей. Властивості, які є частиною інтерфейсу, називаються загальнодоступними. Інші, які не повинні стосуватися зовнішнього коду, називаються приватними.
Багато мови надають можливість розрізняти публічні і приватні властивості і не дозволяють зовнішнім кодом отримати доступ до приватних. jаvascript, знову-таки взяв мінімалістський підхід, ще не досягнуто. В даний час ведеться робота по додавання цієї мови. Тому jаvascript-програмісти будуть успішно використовувати цю ідею. Як правило, доступний інтерфейс описаний в документації чи коментарях. Також прийнято поміщати символ підкреслення (_) на початку імен властивостей, щоб вказати, що ці властивості є приватними. Поділ інтерфейсу від реалізації - відмінна ідея. Її зазвичай називають инкапсуляцией.

Властивості

Об'єкт з дужками {} називається литералом об'єкта. Можна відразу помістити деякі властивості в такі дужки {}. Наприклад, пари «ключ: значення і так далі»: let user = {//an object name: "John", //by key "name" store value "John" age: 30 //by key "age" store value 30}. Властивість має ключ (також відомий як «ім'я» або «ідентифікатор») перед двокрапкою ":" і значення праворуч від нього. В user-об'єкті є дві властивості. Результуючий user jаvascript об'єкт з двома підписаними файлами з написом «ім'я» і «вік». Можна додавати, видаляти і читати файли з нього в будь-який час. Значення властивостей доступні з використанням точкової нотації. Воно може бути будь-якого типу. Можна додати логічне значення. Щоб видалити властивість, використовують delete в разі Error об'єкта jаvascript.

Всі об'єкти помилки jаvascript є нащадками Error об'єкта або успадкованим об'єктом: Syntax Error об'єкт успадковується від Error об'єкта. JSON Parse помилка певного типу Syntax Error об'єкта. Щоб ще глибше зануритись у розуміння того, як додатки мають справу з помилками jаvascript, краще ознайомитися з Airbrake jаvascript - інструментом відстеження помилок для сповіщень в реальному часі і миттєвим розумінням того, що пішло не так з кодом jаvascript. Повідомлення про помилки, які може отримає користувач перед тим як видалити jаvascript об'єкт: Поганий символ управління у строковому литерале. Поганий символ у строковому литерале. Поганий вихід Unicode. Поганий escape-символ. Unterminated string. Несподіваний не цифровий код. Відсутні цифри після десяткової крапки. Unterminated дробове число. Відсутні цифри після індикатора ступеня. Відсутні цифри після знака експонента. Експоненціальна частина не має числа. Несподіваний кінець даних. Несподіване ключове слово. Несподіваний символ. Кінець даних при читанні вмісту об'єкта. Очікуване ім'я властивості або '}'.

Обчислювальні властивості

Можна використовувати квадратні дужки в об'єктному литерале. Це називається обчисленими властивостями. Приклад наведено нижче.
Значення вичіслімой властивості просте:[fruit]означає, що ім'я властивості повинно бути взято з fruit. Отже, якщо відвідувач входить "apple", bag стане {apple: 5}. Можна використовувати більш складні вирази в квадратних дужках: let fruit = 'apple'; let bag = { [fruit + 'Computers']: 5 //bag.appleComputers = 5 }; Квадратні дужки набагато потужніше, ніж точкові позначення. Вони допускають імена та змінні властивостей. Але вони також більш громіздкі для написання. Тому бо?більшу частину часу, коли імена властивостей відомі і прості, використовується крапка. І якщо потрібно щось більш складне, то переключаються на квадратні дужки.

Резервування слів

Змінна не може мати ім'я, рівну одному із зарезервованих слів, таких як «за», «нехай», «повертати» і т. д. Але при сортуванні об'єктів jаvascript немає такого обмеження. В принципі, будь-яке ім'я дозволено, але є спеціальне: воно "__proto__" отримує спеціальне звернення з історичних причин. Наприклад, можна встановити його значення, відмінного від об'єкта: let obj = {}; obj.__proto__ = 5; alert(obj.__proto__); //[object Object], didn't work as intended Як видно з коду, призначення примітиву 5 ігнорується. Це може стати джерелом помилок і навіть вразливостей, якщо оператор має намір зберігати довільні пари ключ-значення в об'єкті і дозволяти відвідувачу вказувати ключі. У цьому випадку відвідувач може вибрати «proto» в якості ключа і додати в об'єкт jаvascript. Існує спосіб зробити об'єкти обробленими __proto__ як регулярним властивістю. Існує також інша карта структури даних, які підтримують довільні ключі.

Цілочисельні властивості

Термін «цілочисельне властивість» тут означає рядок, яка може бути перетворена з цілого без зміни. Отже, наприклад, «49» — це ціле ім'я властивості, бо коли воно перетворюється в ціле число і назад, воно все той же. Але «+49» і «1.2» не є такими. З іншого боку, якщо ключі не цілочисельні, то вони перераховуються у порядку створення. Приклад нижче. Щоб виправити проблему з допомогою телефонних кодів, можна «обдурити», зробивши коди нецілими. Додавання "+" (знак плюс) перед кожним кодом достатньо. Тепер він буде працювати призначенням. Відмінність об'єктів від примітивів полягає в тому, що вони зберігаються і копіюються «за посиланням». Примітивні значення присвоюються і копіюються «як ціле значення». Змінна зберігає «адреса в пам'яті», а не сам об'єкт або «посилання» на нього. Можна використовувати будь-яку змінну для доступу і зміни його вмісту. У наведеному вище прикладі показано, що існує тільки один об'єкт і admin, щоб увійти в нього. Потім, якщо пізніше буде використовувати інший ключ (user), користувач виявить зміни. Оператори рівності == і суворого рівності === для об'єктів працюють однаково. Два об'єкта рівні, тільки якщо вони є одним і тим же об'єктом. Для порівнянь, подібних obj1 > obj2 або для порівняння з примітивом obj == 5 об'єкти перетворюються у примітиви. Чесно кажучи, такі порівняння необхідні дуже рідко і зазвичай є результатом помилки кодування.

Перевірка об'єкта jаvascript

Об'єкти мають доступу до будь-якого властивості. Тим не менш, якщо воно взагалі не існує, це не буде помилкою. Тільки доступ до неіснуючого властивості повертає undefined. Він надає дуже поширений спосіб перевірити властивість і порівняти з невизначеним. Нижче наведено приклад. Використання «in» для властивостей, які зберігають undefined. Зазвичай сувора "=== undefined" перевірка порівняння працює нормально. Є особливий випадок, коли він зазнає невдачі, а "in" працює правильно. Це коли властивість об'єкта існує, але зберігає undefined. У наведеному вище коді властивість obj.test технічно існує. Тому in оператор працює правильно. Подібні ситуації трапляються дуже рідко, тому що undefined зазвичай не призначаються. В основному використовуються null «невідомі» або «порожні» значення. Таким чином, оператор in, фактично, є гостем в коді.

Цикл «forin»

Для того, щоб переміщатися по всіх ключів від об'єкта до об'єкта, існує спеціальна форма циклу: forin. Це зовсім інша річ із for(;;) конструкції. Нижче наведено приклад. Потрібно звернути увагу, що всі конструктори «for» дозволяють оголошувати змінну looping всередині циклу як let key. Крім того, замість цього можна використовувати інше ім'я змінної key. Наприклад, for(let prop in obj) також широко використовується. Існує альтернативна «квадратна дужка», яка працює з будь рядком. При цьому точка вимагає, щоб ключі jаvascript-об'єкта був допустимим ідентифікатором змінної, тобто немає пробілів та інших обмежень. Потрібно звертати увагу, щоб рядок всередині дужок була правильно процитована. Квадратні дужки також надають спосіб отримати ім'я властивості в результаті будь-якого вираження, на відміну від літеральной рядки — з змінної: let key = "likes birds"; //same as user["likes birds"]= true; user[key]= true. Тут змінна key може бути розрахована під час виконання і залежить від користувача введення, а потім буде використана для доступу до властивості. Це дає програмістам більшу гнучкість. Точкова нотація не може використовуватися аналогічним чином, так як буде перебір об'єкта jаvascript. Нижче наведено приклад.

Об'єкт Const

Оголошений об'єкт const може бути змінений. Приклад наведено нижче. Може здатися, що об'єкт jаvascript у рядку (*) викличе помилки, але це не так. Це тому, що const фіксує значення самого user. І тут user зберігає посилання на один і той же об'єкт весь час. Лінія (*) йде всередині об'єкта, вона не набуватиме user. Const дасть помилку, якщо спробувати встановити user і щось ще. Клонування та злиття, Object.assign створює ще одну посилання на той же об'єкт, якщо потрібно його дублювати. Це також здійснимо, але трохи складніше, тому що в jаvascript немає вбудованого методу. Насправді це необхідно рідко. Копіювання за посиланням застосовується в більшості випадків. Але якщо дійсно це потрібно, тоді необхідно створити jаvascript-об'єкт і копіювати структуру існуючого, копіюючи його властивості на примітивному рівні. Нижче наведено приклад. І також можна використовувати для цього метод Object.assign. Аргументи dest і src1 , srcN є об'єктами. Він копіює властивості всіх об'єктів src1 , srcNINTO dest. Іншими словами, властивості всіх аргументів, починаючи з другого, копіюються у 1-й. Потім він повертається dest. Наприклад, можна використовувати його для об'єднання декількох об'єктів в один. І також можна використовувати Object.assign для заміни циклу простого клонування. Він копіює всі властивості user в порожній об'єкт і повертає його, так само як цикл, але коротше. До цих пір передбачалося, що всі властивості user примітивні. Але властивості можуть бути посиланнями на інші об'єкти. Щоб виправити це, треба використовувати цикл клонування, який перевіряє кожне значення user[key]і, якщо це об'єкт, потім повторює його структуру. Це називається «глибоким клонуванням». Існує стандартний алгоритм глибокого клонування, який обробляє вищенаведений випадок і більш складні випадки, звані алгоритмом клонування Structured. Щоб не винаходити колесо, можна використовувати робочу реалізацію з бібліотеки lodash jаvascript, метод називається _.cloneDeep (obj).

Просунуті методи

Якщо програміст зациклюється над об'єктом і прагне отримати всі властивості у тому ж порядку, в якому вони були додані, він може покладатися на «впорядкування по-особливому», коли цілочисельні властивості сортуються, а інші формуються в порядку створення jаvascript-об'єкта. Просунуті методи об'єкта мають справу з концепціями, які рідко використовуються в jаvascripting. Це пов'язано з тим, що в звичайних ситуаціях ці потужні функції не потрібні. Деякі з цих методів можуть не працювати в старих браузерах, таких як ранні випуски Netscape 4. Використання прототипу могло бути застосоване для створення jаvascript-об'єктів і всіх методів mycircle, а не тільки нових. Це дає змішану навантаження на продуктивність. Вони не повинні зберігати окремі копії методів для кожного екземпляра об'єкта, тому для роботи може знадобитися менше пам'яті, але для їх пошуку браузер повинен шукати поточні та батьківські області. Це може призвести до граничної затримки. Як правило, користувач повинен використовувати те, що підходить для коду, а не засновувати це рішення на продуктивності, якщо тільки він не має справу з дуже певної контрольованим середовищем.

Повернення true

У деяких випадках може бути необхідно, щоб властивість об'єкта було прив'язане до самого об'єкта або десь в ланцюжку прототипу. В jаvascript всі об'єкти використовують метод hasOwnProperty, який повертає true, якщо це властивість прив'язане до примірника окремого об'єкта. В такому випадку з'являється можливість перевірити, чи має конструктор об'єкта одне і те ж властивість з тим же значенням, що і сам екземпляр об'єкта. Це може дати невірний результат, якщо існують окремі властивості об'єкта jаvascript з однаковим значенням як для екземпляра об'єкта, так і для прототипу ланцюга. Метод hasOwnProperty приймає єдиний параметр - ім'я властивості у вигляді рядка. Аналогічним чином можна створювати приватні методи. Це просто функція, яка створюється всередині функції конструктора. Комусь це може здатися заплутаним, але саме так все і працює. Приватна функція може бути викликана тільки самим конструктором або методами, які визначені у рядку. Вони можуть використовуватися як загальнодоступні методи, якщо призначені публічного конструктору і доступні з використанням відкритих методів об'єктів jаvascript. function myob() {function cantBeSeen() {alert(secretValue); } var secretValue = "; this.method1 = function () {secretValue = 'no surprises'; cantBeSeen(); }; this.method2 = cantBeSeen; } var oneOb = new myob(); oneOb.method1(); //alerts 'no surprises' oneOb.method2(); //alerts 'no surprises'.

Шаблон Command

Об'єкти Command допускають слабосвязанних системи, розділяючи ті, які видають запит від об'єктів і, фактично, обробляють запит. Ці запити називаються подіями, а код, обробляє запити, називається обробниками подій. Припустимо, створюються програми, що підтримує дії буфера обміну Cut, Copy і Paste. Ці дії можуть запускатися по-різному у всьому додатку: системою меню, контекстного меню, наприклад, клацанням правої кнопки миші по текстовому полю або поєднанням клавіш. Об'єкти Command дозволяють централізувати обробку цих дій, по одній для кожної операції, коли потрібна лише одна команда для обробки всіх запитів Cut, одна для всіх запитів на копіювання та одна для всіх запитів Paste. Оскільки команди централізують всю обробку, вони також часто беруть участь в обробці функцій скасування для всього програми. Значні поліпшення можуть бути досягнуті шляхом застосування сучасних методів jаvascript, призводять до створення більш ефективних, надійних і підтримуваних програм. Щоб дізнатися, як це зробити, можна використовувати шаблони jаvascript + jQuery. Цей унікальний пакет включає оптимізований jаvascript для всіх шаблонів GoF з використанням більш просунутих функцій, таких як простору імен, прототипи, модулі, функціональні об'єкти, закриття, анонімні функції та інше. Якщо користувачам потрібні новітні інструменти і методи шаблонів для jаvascript, шаблонів jQuery і архітектур шаблонів, тоді це найкращий варіант використання. Цей пакет містить цінну, актуальну інформацію для розробників jаvascript. Ось що в нього включено: jаvascript-оптимізовані шаблони GoF. Сучасні шаблони проектування jаvascript. Шаблони проектування Model-View. Шаблони дизайну jQuery. Архітектурні шаблони jаvascript-ідіоми. Приклади додатків (MVC, SPA і т. д.) Запропоновані основи синтаксису об'єктів jаvascript дуже важливі для початківців програмістів. Потрібно спочатку зрозуміти об'єкти, тоді буде знання об'єктно-орієнтованого програмування. Вкрай важливо мати глибоке розуміння цього матеріалу, оскільки це служить основою для іншої частини мови jаvascript.