diff options
Diffstat (limited to 'files/uk/web/javascript/guide/working_with_objects')
| -rw-r--r-- | files/uk/web/javascript/guide/working_with_objects/index.html | 490 |
1 files changed, 490 insertions, 0 deletions
diff --git a/files/uk/web/javascript/guide/working_with_objects/index.html b/files/uk/web/javascript/guide/working_with_objects/index.html new file mode 100644 index 0000000000..214bae97aa --- /dev/null +++ b/files/uk/web/javascript/guide/working_with_objects/index.html @@ -0,0 +1,490 @@ +--- +title: Робота з об'єктами +slug: Web/JavaScript/Guide/Working_with_Objects +tags: + - JavaScript + - Object + - Документ + - Об'єкт + - Посібник +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model")}}</div> + +<p class="summary">Мова JavaScript базується на простій, заснованій на об'єктах парадигмі. Об'єкт - це колекція властивостей, а властивість - це асоціація між іменем (або <em>ключем</em>) та значенням. Значення властивості може бути функцією, в цьому випадку властивість відома як метод. На додачу до об'єктів, попередньо визначених у веб-переглядачі, ви можете визначати власні об'єкти. Цей розділ описує, як використовувати об'єкти, властивості, функції та методи, і як створювати власні об'єкти.</p> + +<h2 id="Огляд_обєктів">Огляд об'єктів</h2> + +<p>Об'єкти у JavaScript, як і у багатьох інших мовах програмування, можна порівняти з об'єктами у реальному житті. Концепію об'єктів у JavaScript можна зрозуміти на прикладі матеріальних об'єктів з реального життя.</p> + +<p>У JavaScript об'єкт - це окрема сутність з властивостями та типом. Порівняємо його, для прикладу, з чашкою. Чашка - це об'єкт з властивостями. Чашка має колір, дизайн, вагу, матеріал, з якого вона зроблена, і т.д. Так само, об'єкти JavaScript можуть мати властивості, які визначають їхні характеристики.</p> + +<h2 id="Обєкти_та_властивості">Об'єкти та властивості</h2> + +<p>Об'єкт JavaScript має асоційовані з ним властивості. Властивість об'єкта можна описати як змінну, прикріплену до об'єкта. Властивості об'єкта - це, загалом, те саме, що й звичайні змінні JavaScript, але прикріплені до об'єктів. Властивості об'єкта визначають характеристики об'єкта. Ви звертаєтесь до властивостей об'єкта через просту крапкову нотацію:</p> + +<pre class="brush: js notranslate">objectName.propertyName +</pre> + +<p>Як усі змінні JavaScript, і ім'я об'єкта (яке може бути звичайною змінною), і ім'я властивості чутливі до регістру. Ви можете визначити властивість, присвоївши їй значення. Наприклад, створимо об'єкт на ім'я <code>myCar</code> (моя машина) та дамо йому властивості <code>make</code> (виробник), <code>model</code> (модель) та <code>year</code> (рік) ось так:</p> + +<pre class="brush: js notranslate">var myCar = new Object(); +myCar.make = 'Ford'; +myCar.model = 'Mustang'; +myCar.year = 1969; +</pre> + +<p>Наведений приклад також міг бути написаний за допомогою <strong><a href="#Використання_обєктних_ініціалізаторів">об'єктного ініціалізатора</a></strong>, який є списком з нуля чи більше розділених комами пар імен властивостей об'єкта та асоційованих з ними значень, записаний у фігурних дужках (<code>{}</code>):</p> + +<pre class="brush: js notranslate">var myCar = { + make: 'Ford', + model: 'Mustang', + year: 1969 +}; +</pre> + +<p>Неприсвоєні властивості об'єкта мають значення {{jsxref("undefined")}} (а не {{jsxref("null")}}).</p> + +<pre class="brush: js notranslate">myCar.color; // undefined</pre> + +<p>До властивостей об'єктів JavaScript також можна звертатись чи присвоювати їх за допомогою дужкової нотації (щоб дізнатись більше, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">доступ до властивостей</a>). Об'єкти іноді називають <em>асоціативними масивами</em>, оскільки кожна властивість асоціюється з рядковим значенням, яке можна використати для доступу до неї. Отже, для прикладу, ви можете звертатись до властивостей об'єкта <code>myCar</code> наступним чином:</p> + +<pre class="brush: js notranslate">myCar['make'] = 'Ford'; +myCar['model'] = 'Mustang'; +myCar['year'] = 1969; +</pre> + +<p>Ім'я властивості об'єкта може бути будь-яким дозволеним рядком JavaScript чи будь-чим, що можна привести до рядка, в тому числі порожній рядок. Однак, будь-яке ім'я властивості, яке не є дозволеним ідентифікатором JavaScript (наприклад, ім'я властивості, що містить пробіл чи дефіс, або починається з цифри) доступне тільки через позначення у квадратних дужках. Ця нотація також дуже корисна, коли імена властивостей мають бути динамічно визначені (коли ім'я властивості не визначене до початку виконання). Приклади наступні:</p> + +<pre class="brush: js notranslate">// створюємо одночасно чотири змінні, розділені комами, +// та присвоюємо їм значення +var myObj = new Object(), + str = 'myString', + rand = Math.random(), + obj = new Object(); + +myObj.type = 'крапковий синтаксис'; +myObj['date created'] = 'рядок з пробілом'; +myObj[str] = 'рядкове значення'; +myObj[rand] = 'випадкове число'; +myObj[obj] = 'об\'єкт'; +myObj[''] = 'навіть порожній рядок'; + +console.log(myObj); +</pre> + +<p>Будь ласка, зауважте, що усі ключі, позначені у квадратних дужках, перетворюються на рядки, якщо тільки вони не є символами, оскільки імена властивостей (ключів) об'єктів JavaScript можуть бути тільки рядками або символами (в якийсь момент також будуть додані приватні імена, з розвитком <a href="https://github.com/tc39/proposal-class-fields">пропозиції щодо полів класу</a>, але вони не використовуватимуться у формі <code>[]</code>). Наприклад, у наведеному вище коді, коли ключ <code>obj</code> додається до об'єкта <code>myObj</code>, JavaScript викличе метод {{jsxref("Object.toString", "obj.toString()")}} та використає отриманий рядок як новий ключ.</p> + +<p>Ви також можете звернутись до властивості, використавши рядкове значення, що зберігається у змінній:</p> + +<pre class="brush: js notranslate">var propertyName = 'make'; +myCar[propertyName] = 'Ford'; + +propertyName = 'model'; +myCar[propertyName] = 'Mustang'; +</pre> + +<p>Ви можете використати дужкову нотацію з циклом <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> для перебору усіх перелічуваних властивостей об'єкта. Для ілюстрації того, як це працює, наступна функція відображає властивості об'єкта, коли ви передаєте об'єкт та ім'я об'єкта в якості аргументів у функцію:</p> + +<pre class="brush: js notranslate">function showProps(obj, objName) { + var result = ``; + for (var i in obj) { + // obj.hasOwnProperty() відфільтровує властивості від ланцюга прототипів об'єкта + if (obj.hasOwnProperty(i)) { + result += `${objName}.${i} = ${obj[i]}\n`; + } + } + return result; +} +</pre> + +<p>Отже, виклик функції <code>showProps(myCar, "myCar")</code> поверне наступне:</p> + +<pre class="brush: js notranslate">myCar.make = Ford +myCar.model = Mustang +myCar.year = 1969</pre> + +<h2 id="Перелік_властивостей_обєкта">Перелік властивостей об'єкта</h2> + +<p>Починаючи з <a href="/uk/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, існують три вбудовані методи перелічити / продивитись властивості об'єкта:</p> + +<ul> + <li>цикли <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code><br> + Цей метод продивляється усі перелічувані властивості об'єкта та його ланцюжок прототипів</li> + <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> + Цей метод повертає масив з іменами усіх особистих (не з ланцюга прототипів) перелічуваних властивостей ("ключів") об'єкта <code>o</code>.</li> + <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br> + Цей метод повертає масив, що містить імена усіх особистих властивостей (перелічуваних чи ні) об'єкта <code>o</code>.</li> +</ul> + +<p>До ECMAScript 5 не існувало вбудованого способу перелічити усі властивості об'єкта. Однак, цього можна досягти наступною функцією:</p> + +<pre class="brush: js notranslate">function listAllProperties(o) { + var objectToInspect; + var result = []; + + for(objectToInspect = o; objectToInspect !== null; + objectToInspect = Object.getPrototypeOf(objectToInspect)) { + result = result.concat( + Object.getOwnPropertyNames(objectToInspect) + ); + } + + return result; +} +</pre> + +<p>Це може бути корисним для виявлення "схованих" властивостей (властивостей у ланцюгу прототипів, які недоступні через об'єкт, тому що інша властивість з таким самим іменем зустрічається у ланцюгу раніше). Список лише доступних властивостей можна легко зробити, прибравши дублікати у масиві.</p> + +<h2 id="Створення_нових_обєктів">Створення нових об'єктів</h2> + +<p>JavaScript має чимало попередньо визначених об'єктів. На додачу, ви можете створювати свої власні об'єкти. Ви можете створити об'єкт за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктного ініціалізатора</a>. Або ви можете спочатку створити функцію-конструктор, після чого створювати об'єкти, використовуючи оператор <code>new</code>.</p> + +<h3 id="Використання_обєктних_ініціалізаторів"><span id="Object_initializers">Використання об'єктних ініціалізаторів</span></h3> + +<p>На додачу до створення об'єктів за допомогою функції-конструктора, ви можете створювати об'єкти, використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктний ініціалізатор</a>. Використання об'єктних ініціалізаторів іноді називають створенням об'єктів літеральною нотацією. "Об'єктний ініціалізатор" відповідає термінології, що використовується у мові C++.</p> + +<p>Синтаксис об'єкта, що використовує об'єктний ініціалізатор, наступний:</p> + +<pre class="brush: js notranslate">var obj = { property_1: value_1, // property_# може бути ідентифікатором... + 2: value_2, // або числом... + // ..., + 'property n': value_n }; // або рядком +</pre> + +<p>де <code>obj</code> - ім'я нового об'єкта, кожне ім'я <code>property_<var>i</var></code> є ідентифікатором (або числом, або рядковим літералом), а кожне значення <code>value_<var>i</var></code> є виразом, чиє значення присвоюється властивості <code>property_<var>i</var></code>. Змінна <code>obj</code> та присвоєння є необов'язковими; якщо вам непотрібно звертатись до цього об'єкта будь-де, вам непотрібно присвоювати його змінній. (Зауважте, що вам може знадобитись загорнути об'єктний літерал у круглі дужки, якщо об'єкт з'являється там, де очікується інструкція, щоб літерал не був прийнятий за блочну інструкцію.)</p> + +<p>Об'єктні ініціалізатори є виразами, а кожний об'єктний ініціалізатор створює новий об'єкт, коли виконується інструкція, де він знаходиться. Ідентичні об'єктні ініціалізатори створюють окремі об'єкти, які не вважатимуться рівними. Об'єкти створюються так, ніби відбувся виклик <code>new Object()</code>; тобто, об'єкти, створені об'єктними літералами, є екземплярами <code>Object</code>.</p> + +<p>Наступна інструкція створює об'єкт та присвоює його змінній <code>x</code> тільки за умови, що вираз <code>cond</code> є правдивим:</p> + +<pre class="brush: js notranslate">if (cond) var x = {greeting: 'привітик'}; +</pre> + +<p>Наступний приклад створює об'єкт <code>myHonda</code> з трьома властивостями. Зауважте, що властивість <code>engine</code> також є об'єктом зі своїми властивостями.</p> + +<pre class="brush: js notranslate">var myHonda = {color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2}}; +</pre> + +<p>Ви також можете використовувати об'єктні ініціалізатори для створення масивів. Дивіться <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Масивні_літерали">масивні літерали</a>.</p> + +<h3 id="Використання_функції-конструктора">Використання функції-конструктора</h3> + +<p>Також ви можете створити об'єкт, виконавши ці два кроки:</p> + +<ol> + <li>Визначити тип об'єкта, написавши функцію-конструктор. Загальноприйнято, і на це є причини, писати їх з великої літери.</li> + <li>Створити екземпляр об'єкта за допомогою <code>new</code>.</li> +</ol> + +<p>Щоб визначити тип об'єкта, створіть функцю для типу об'єкта, яка визначає його ім'я, властивості та методи. Наприклад, припустимо, ви хочете створити тип об'єкта для автомобілів. Ви хочете, щоб цей тип об'єкта називався <code>Car</code>, і ви хочете, щоб він мав властивості для виробника, моделі та року. Щоб це зробити, ви б написали наступну функцію:</p> + +<pre class="brush: js notranslate">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p>Зверніть увагу на використання <code>this</code> для присвоєння значень властивостям об'єкта на основі значень, переданих у функцію.</p> + +<p>Тепер ви можете створити об'єкт на ім'я <code>mycar</code> наступним чином:</p> + +<pre class="brush: js notranslate">var mycar = new Car('Eagle', 'Talon TSi', 1993); +</pre> + +<p>Ця інструкція створює об'єкт <code>mycar</code> та присвоює вказані значення його властивостям. Тоді значенням <code>mycar.make</code> є рядок "Eagle", <code>mycar.year</code> дорівнює цілому число 1993 і т.д.</p> + +<p>Ви можете створити довільне число об'єктів <code>Car</code> викликами <code>new</code>. Наприклад,</p> + +<pre class="brush: js notranslate">var kenscar = new Car('Nissan', '300ZX', 1992); +var vpgscar = new Car('Mazda', 'Miata', 1990); +</pre> + +<p>Об'єкт може мати властивість, яка сама є іншим об'єктом. Наприклад, припустимо, ви визначаєте об'єкт <code>person</code> (людина) наступним чином:</p> + +<pre class="brush: js notranslate">function Person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> + +<p>і далі створюєте два екземпляра об'єкта <code>person</code> наступним чином:</p> + +<pre class="brush: js notranslate">var rand = new Person('Rand McKinnon', 33, 'M'); +var ken = new Person('Ken Jones', 39, 'M'); +</pre> + +<p>Тоді ви можете переписати визначення <code>Car</code>, щоб включити властивість <code>owner</code> (власник), яка приймає об'єкт <code>person</code> ось так:</p> + +<pre class="brush: js notranslate">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; +} +</pre> + +<p>Тепер, щоб створити нові об'єкти, ви зробите наступне:</p> + +<pre class="brush: js notranslate">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); +var car2 = new Car('Nissan', '300ZX', 1992, ken); +</pre> + +<p>Зверніть увагу, що, замість передачі літералу рядка чи цілого числа під час створення нових об'єктів, наведені вище інструкції передають об'єкти <code>rand</code> та <code>ken</code> в якості значень власників. Тепер, якщо вам потрібно дізнатись ім'я власника <code>car2</code>, ви можете звернутись до наступної властивості:</p> + +<pre class="brush: js notranslate">car2.owner.name +</pre> + +<p>Зауважте, що ви завжди можете додати властивість до попередньо визначеного об'єкта. Наприклад, інструкція</p> + +<pre class="brush: js notranslate">car1.color = 'чорний'; +</pre> + +<p>додає властивість <code>color</code> (колір) до <code>car1</code>, та присвоює їй значення "чорний." Однак, це не впливає на всі інші об'єкти. Щоб додати нову властивість до усіх об'єктів того самого типу, ви маєте додати властивість до визначення типу об'єкта <code>Car</code>.</p> + +<h3 id="Використання_методу_Object.create">Використання методу <code>Object.create</code></h3> + +<p>Об'єкти також можна створювати методом {{jsxref("Object.create()")}}. Цей метод може бути дуже корисним, тому що дозволяє обирати прототип для об'єкта, який ви хочете створити, без необхідності визначати функцію-конструктор.</p> + +<pre class="brush: js notranslate">// Властивості об'єкта Animal (тварина) та інкапсуляція методу +var Animal = { + type: 'Безхребетні', // Значення властивості за замовчуванням + displayType: function() { // Метод, що виводитиме тип тварини + console.log(this.type); + } +}; + +// Створити нову тварину з назвою animal1 +var animal1 = Object.create(Animal); +animal1.displayType(); // виведе: Безхребетні + +// Створити нову тварину з назвою fish (риба) +var fish = Object.create(Animal); +fish.type = 'Риби'; +fish.displayType(); // виведе: Риби</pre> + +<h2 id="Наслідування">Наслідування</h2> + +<p>Усі об'єкти у JavaScript успадковуються від принаймні одного іншого об'єкта. Об'єкт, від якого наслідується інший об'єкт, відомий як прототип, а успадковані властивості можна знайти у об'єкті конструктора <code>prototype</code>. Щоб дізнатись більше, дивіться <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Наслідування та ланцюжок прототипів</a>.</p> + +<h2 id="Індексування_властивостей_обєкта">Індексування властивостей об'єкта</h2> + +<p>Ви можете звернутись до властивості об'єкта або за іменем властивості, або за його оригінальним індексом. Якщо ви з самого початку визначили властивість за іменем, ви завжди маєте звертатись до неї за іменем, а якщо ви визначили властивість за індексом, ви завжди маєте звертатись до неї за індексом.</p> + +<p>Це обмеження працює, коли ви створюєте об'єкт та його властивості функцією-конструктором (як ми робили раніше з типом об'єкта <code>Car</code>) та коли ви явно визначаєте окремі властивості (наприклад, <code>myCar.color = "червоний"</code>). Якщо ви початково визначили властивість об'єкта з індексом, як от <code>myCar[5] = "25 mpg"</code>, ви далі звертаєтесь до властивості лише у вигляді <code>myCar[5]</code>.</p> + +<p>Винятком з цього правила є подібний до масиву об'єкт з HTML, такий як подібний до масиву об'єкт <code>forms</code>. Ви завжди можете посилатись на об'єкти у цих подібних до масивів об'єктах або за їхнім порядковим номером (в залежності від їхнього розташування у документі), або за іменем (якщо воно визначене). Наприклад, якщо другий тег <code><FORM></code> у документі має атрибут <code>NAME</code>, що дорівнює "myForm", ви можете звернутись до форми <code>document.forms[1]</code>, або <code>document.forms["myForm"]</code>, або <code>document.forms.myForm</code>.</p> + +<h2 id="Визначення_властивостей_для_типу_обєкта">Визначення властивостей для типу об'єкта</h2> + +<p>Ви можете додати властивість до попередньо визначеного типу об'єкта за допомогою властивості <code>prototype</code>. Це визначає властивість, спільну для усіх об'єктів вказаного типу, а не лише для одного екземпляру об'єкта. Наступний код додає властивість <code>color</code> (колір) до усіх об'єктів типу <code>Car</code> (автомобіль), після чого присвоює значення властивості <code>color</code> об'єкта <code>car1</code>.</p> + +<pre class="brush: js notranslate">Car.prototype.color = null; +car1.color = 'чорний'; +</pre> + +<p>Щоб дізнатись більше, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype">властивість <code>prototype</code></a> об'єкта <code>Function</code> у <a href="/uk/docs/Web/JavaScript/Reference">довіднику JavaScript</a>.</p> + +<h2 id="Визначення_методів">Визначення методів</h2> + +<p><em>Метод</em> - це функція, асоційована з об'єктом, або, простіше кажучи, метод - це властивість об'єкта, яка є функцією. Методи визначаються так само, як звичайні функції, за винятком того, що вони мають бути асоційовані з властивістю об'єкта. Дивіться більше подробиць у <a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">визначенні методів</a>. Приклад наступний:</p> + +<pre class="brush: js notranslate">objectName.methodname = functionName; + +var myObj = { + myMethod: function(params) { + // ...зробити щось + } + + // ТАКЕ ТЕЖ ПРАЦЮЄ + + myOtherMethod(params) { + // ...зробити щось інше + } +}; +</pre> + +<p>де <code>objectName</code> - це існуючий об'єкт, <code>methodname</code> - це ім'я, яке ви присвоюєте методу, а <code>functionName</code> - це ім'я функції.</p> + +<p>Далі ви можете викликати метод у контексті об'єкта наступним чином:</p> + +<pre class="brush: js notranslate">object.methodname(params); +</pre> + +<p>Ви можете визначати методи для типу об'єкта, додавши визначення методів у конструктор об'єкта. Ви можете визначити функцію, що буде форматувати та відображати властивості попередньо визначених об'єктів <code>Car</code>; наприклад,</p> + +<pre class="brush: js notranslate">function displayCar() { + var result = `Чудовий автомобіль ${this.year} ${this.make} ${this.model}`; + pretty_print(result); +} +</pre> + +<p>де <code>pretty_print</code> - функція, що відображатиме горизонтальне правило та рядок. Зверніть увагу на використання <code>this</code> для посилання на об'єкт, до якого належить метод.</p> + +<p>Ви можете зробити цю функцію методом <code>Car</code>, додавши інструкцію</p> + +<pre class="brush: js notranslate">this.displayCar = displayCar; +</pre> + +<p>до визначення об'єкта. Отже, повне визначення <code>Car</code> виглядатиме так</p> + +<pre class="brush: js notranslate">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; + this.displayCar = displayCar; +} +</pre> + +<p>Тоді ви можете викликати метод <code>displayCar</code> для кожного об'єкта наступним чином:</p> + +<pre class="brush: js notranslate">car1.displayCar(); +car2.displayCar(); +</pre> + +<h2 id="Використання_this_у_посиланнях_на_обєкт">Використання <code>this</code> у посиланнях на об'єкт</h2> + +<p>JavaScript має спеціальне ключове слово <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, яке ви можете використати всередині метода, щоб вказати на поточний об'єкт. Наприклад, припустимо, ви маєте 2 об'єкта, <code>Manager</code> та <code>Intern</code>. Кожен об'єкт має свої власні <code>name</code> (ім'я), <code>age</code> (вік) та <code>job</code> (роботу). У функції <code>sayHi()</code>, зверніть увагу, є <code>this.name</code>. Додані до 2-х об'єктів, вони можуть бути викликані та повернуть <code>'Привіт, мене звуть'</code>, а далі додають значення <code>name</code> з цього конкретного об'єкта. Як показано нижче. </p> + +<pre class="brush: js notranslate">const Manager = { + name: "Джон", + age: 27, + job: "Програміст" +} +const Intern= { + name: "Бен", + age: 21, + job: "Програміст-інтерн" +} + +function sayHi() { + console.log('Привіт, мене звуть', this.name) +} + +// додаємо функцію sayHi до обох об'єктів +Manager.sayHi = sayHi; +Intern.sayHi = sayHi; + +Manager.sayHi() // Привіт, мене звуть Джон +Intern.sayHi() // Привіт, мене звуть Бен +</pre> + +<p><code>this</code> посилається на об'єкт, в якому знаходиться. Ви можете створити нову функцію під назвою <code>howOldAmI()</code>, яка виводить повідомлення про те, скільки цій людині років. </p> + +<pre class="brush: js notranslate">function howOldAmI (){ + console.log('Мені ' + this.age + ' років.') +} +Manager.howOldAmI = howOldAmI; +Manager.howOldAmI() // Мені 27 років. +</pre> + +<h2 id="Визначення_гетерів_та_сетерів">Визначення гетерів та сетерів</h2> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Functions/get">Гетер</a> - це метод, який отримує значення конкретної властивості. <a href="/uk/docs/Web/JavaScript/Reference/Functions/set">Сетер</a> - це метод, який присвоює значення конкретній властивості. Ви можете визначати гетери та сетери на будь-якому існуючому базовому об'єкті чи об'єкті, створеному користувачем, якщо він підтримує додавання нових властивостей. </p> + +<p>Гетери та сетери можуть бути або</p> + +<ul> + <li>визначені за допомогою <a href="#Object_initializers">об'єктних ініціалізаторів</a>, або</li> + <li>додані пізніше до будь-якого об'єкта у будь-який час за допомогою методу додавання гетерів чи сетерів.</li> +</ul> + +<p>При визначенні гетерів та сетерів за допомогою <a href="#Object_initializers">об'єктних ініціалізаторів </a>вам потрібно лише додати перед методом-гетером <code>get</code>, а перед методом-сетером <code>set</code>. Звісно, гетер не повинен очікувати на параметри, а сетер очікує рівно на один параметер (нове значення, яке треба присвоїти). Наприклад:</p> + +<pre class="brush: js notranslate">var o = { + a: 7, + get b() { + return this.a + 1; + }, + set c(x) { + this.a = x / 2; + } +}; + +console.log(o.a); // 7 +console.log(o.b); // 8 <-- В цьому місці запускається метод get b(). +o.c = 50; // <-- В цьому місці запускається метод set c(x). +console.log(o.a); // 25 +</pre> + +<p>Властивості об'єкта <code>o</code> наступні:</p> + +<ul> + <li><code>o.a</code> — число</li> + <li><code>o.b</code> — гетер, який вертає <code>o.a</code> плюс 1</li> + <li><code>o.c</code> — сетер, який присвоює <code>o.a</code> половину значення, присвоєного <code>o.c</code></li> +</ul> + +<p>Будь ласка, зауважте, що імена функцій гетерів та сетерів, визначені у об'єктному літералі за допомогою "[gs]et <em>властивість</em>()" (на відміну від <code>__define[GS]etter__</code> ), не є іменами самих гетерів, хоча синтаксис <code>[gs]et <em>propertyName</em>(){ }</code> і міг ввести вас в оману.</p> + +<p>Гетери та сетери також можуть бути додані до об'єкта в будь-який момент після створення за допомогою методу <code>Object.defineProperties</code>. Першим параметром цього методу є об'єкт, на якому ви хочете визначити гетер чи сетер. Другим параметром є об'єкт, чиї імена властивостей є іменами гетерів чи сетерів і чиї значення властивостей є об'єктами для визначення функцій гетерів чи сетерів. Ось приклад, який визначає такі самі гетер та сетер, які використовувались у попередньому прикладі:</p> + +<pre class="brush: js notranslate">var o = { a: 0 }; + +Object.defineProperties(o, { + 'b': { get: function() { return this.a + 1; } }, + 'c': { set: function(x) { this.a = x / 2; } } +}); + +o.c = 10; // Запускає сетер, який присвоює 10 / 2 (5) властивості 'a' +console.log(o.b); // Запускає гетер, який видає a + 1, тобто 6 +</pre> + +<p>Яку з двох форм обирати, залежить від вашого стилю програмування та наявної задачі. Якщо ви вже користуєтесь об'єктним ініціалізатором при визначенні прототипу, ви, скоріше за все, обиратимете першу форму. Ця форма є більш компактною та природньою. Однак, якщо ви додаєте гетери та сетери пізніше — оскільки не писали прототип чи окремий об'єкт — тоді друга форма є єдино можливою. Друга форма, можливо, найкраще відображає динамічну природу JavaScript — але вона може зробити код важким для читання та розуміння.</p> + +<h2 id="Видалення_властивостей">Видалення властивостей</h2> + +<p>Ви можете видалити неуспадковані властивості оператором <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>. Наступний код демонструє, як прибрати властивість.</p> + +<pre class="brush: js notranslate">// Створює новий об'єкт, myobj, з двома властивостями, a та b. +var myobj = new Object; +myobj.a = 5; +myobj.b = 12; + +// Прибирає властивість a, залишивши у myobj лише властивість b. +delete myobj.a; +console.log ('a' in myobj); // виведе: "false" +</pre> + +<p>Ви також можете використати <code>delete</code>, щоб видалити глобальну змінну, якщо ключове слово <code>var</code> не використовувалось для оголошення змінної:</p> + +<pre class="brush: js notranslate">g = 17; +delete g; +</pre> + +<h2 id="Порівняння_обєктів">Порівняння об'єктів</h2> + +<p>У JavaScript об'єкти належать до типу посилань. Два окремі об'єкти ніколи не дорівнюють один одному, навіть якщо мають однакові властивості. Лише порівняння об'єкта з самим собою поверне true.</p> + +<pre class="brush: js notranslate">// Дві змінні, два окремих об'єкти з однаковими властивостями +var fruit = {name: 'яблуко'}; +var fruitbear = {name: 'яблуко'}; + +fruit == fruitbear; // вертає false +fruit === fruitbear; // вертає false</pre> + +<pre class="brush: js notranslate">// Дві змінні, один об'єкт +var fruit = {name: 'яблуко'}; +var fruitbear = fruit; // Присвоїти fruitbear посилання на об'єкт fruit + +// Тут fruit та fruitbear вказують на один об'єкт +fruit == fruitbear; // вертає true +fruit === fruitbear; // вертає true + +fruit.name = 'виноград'; +console.log(fruitbear); // output: { name: "виноград" }, замість { name: "яблуко" } +</pre> + +<p>Щоб дізнатись більше щодо операторів порівняння, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння">Оператори порівняння</a>.</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Щоб зануритись глибше, читайте <a href="/uk/docs/Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model">докладно про об'єктну модель JavaScript's</a>.</li> + <li>Щоб дізнатись щодо класів ECMAScript 2015 (альтернативний спосіб створення об'єктів), читайте розділ <a href="/uk/docs/Web/JavaScript/Reference/Classes">класи JavaScript</a>.</li> +</ul> + +<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model")}}</p> |