aboutsummaryrefslogtreecommitdiff
path: root/files/uk/web/javascript/reference/operators/new/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/uk/web/javascript/reference/operators/new/index.html')
-rw-r--r--files/uk/web/javascript/reference/operators/new/index.html197
1 files changed, 197 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/operators/new/index.html b/files/uk/web/javascript/reference/operators/new/index.html
new file mode 100644
index 0000000000..692938fdd2
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/new/index.html
@@ -0,0 +1,197 @@
+---
+title: Оператор new
+slug: Web/JavaScript/Reference/Operators/new
+tags:
+ - JavaScript
+ - Довідка
+ - Оператор
+translation_of: Web/JavaScript/Reference/Operators/new
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><span class="seoSummary"><strong>Оператор <code>new</code></strong> дозволяє розробникам створити екземпляр визначеного користувачем типу об'єкта, або одного із вбудованих типів об'єктів, що містять функцію-конструктор.</span> Ключове слово <strong><code>new</code></strong> робить наступне:</p>
+
+<ol>
+ <li>Створює простий, порожній об'єкт JavaScript;</li>
+ <li>Прив'язує (присвоює в якості конструктора) інший об'єкт до цього об'єкта;</li>
+ <li>Передає створений об'єкт з <em>кроку 1</em> в якості контексту <code>this</code>;</li>
+ <li>Вертає <code>this</code>, якщо функція не вертає свій власний об'єкт. </li>
+</ol>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new <var>constructor</var>[([<var>arguments</var>])]</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>constructor</var></code></dt>
+ <dd>Клас чи функція, що визначає тип екземпляру об'єкта.</dd>
+</dl>
+
+<dl>
+ <dt><code><var>arguments</var></code></dt>
+ <dd>Список значень, з якими викликатиметься <code><var>constructor</var></code>.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Створення визначеного користувачем об'єкта потребує двох кроків:</p>
+
+<ol>
+ <li>Визначити тип об'єкта, написавши функцію.</li>
+ <li>Створити екземпляр об'єкта за допомогою <code>new</code>.</li>
+</ol>
+
+<p>Щоб визначити тип об'єкта, створіть функцію типу об'єкта, яка зазначає його ім'я та властивості. Об'єкт може мати властивість, яка є іншим об'єктом. Дивіться приклади нижче.</p>
+
+<p>Коли виконується код <code>new <em>Foo</em>(...)</code>, відбувається наступне:</p>
+
+<ol>
+ <li>Створюється новий об'єкт, успадкований від <code><em>Foo</em>.prototype</code>.</li>
+ <li>Викликається функція-конструктор <code><em>Foo</em></code> із заданими аргументами та з контекстом <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, прив'язаним до новоствореного об'єкта. <code>new <em>Foo</em></code> дорівнює <code>new <em>Foo</em>()</code>, тобто, якщо жодних аргументів не задано, <code><em>Foo</em></code> викликається без аргументів.</li>
+ <li>Об'єкт (що не є null, false, 3.1415 чи іншим простим типом), який повертається функцією-конструктором, стає результатом усього виразу <code>new</code>. Якщо функція-конструктор не повертає об'єкт явно, використовується об'єкт, створений у кроці 1. (Зазвичай, конструктори не повертають значень, але можуть це зробити, якщо потрібно переписати звичайний процес створення об'єкта.)</li>
+</ol>
+
+<p>Ви завжди можете додати властивість до попередньо визначеного об'єкта. Наприклад, інструкція <code>car1.color = "чорний"</code> додає властивість <code>color</code> (колір) до об'єкта <code>car1</code> та присвоює їй значення "<code>чорний</code>". Однак, це не впливає на інші об'єкти. Щоб додати нову властивість до усіх об'єктів одного типу, ви маєте додати властивість до визначення типу об'єкта <code>Car</code>.</p>
+
+<p>Ви можете додати спільну властивість до попередньо визначеного типу об'єкта за допомогою властивості <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>. Це визначає властивість, спільну для усіх об'єктів, створених цією функцією, а не лише для одного екземпляру цього типу. Наступний код додає властивість color (колір) зі значенням <code>"стандартний колір"</code> усім об'єктам типу <code>Car</code>, а потім замінює це значення рядком "<code>чорний</code>" тільки для екземпляру об'єкта <code>car1</code>. Дивіться більше у статті <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p>
+
+<pre class="brush: js">function Car() {}
+car1 = new Car();
+car2 = new Car();
+
+console.log(car1.color); // undefined
+
+Car.prototype.color = 'стандартний колір';
+console.log(car1.color); // стандартний колір
+
+car1.color = 'чорний';
+console.log(car1.color); // чорний
+
+console.log(Object.getPrototypeOf(car1).color) //стандартний колір
+console.log(Object.getPrototypeOf(car2).color) //стандартний колір
+console.log(car1.color) // чорний
+console.log(car2.color) // стандартний колір</pre>
+
+<div class="note">
+<p>Якщо ви не напишете оператор <code>new</code>, <strong>функція-конструктор буде викликана як будь-яка звичайна фукнція,</strong> <em>без створення об'єкта.</em> У цьому випадку значення <code>this</code> також буде іншим.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Тип_обєкта_та_екземпляр_обєкта">Тип об'єкта та екземпляр об'єкта</h3>
+
+<p>Припустимо, вам потрібно створити тип об'єкта для машин. Тип об'єкта має називатися <code>Car</code> і має містити властивості для марки, моделі та року випуску. Для цього ви б написали наступну функцію:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+ this.make = make;
+ this.model = model;
+ this.year = year;
+}
+</pre>
+
+<p>Тепер ви можете створити об'єкт під назвою <code>myCar</code>:</p>
+
+<pre class="brush: js">var myСar = new Car('Eagle', 'Talon TSi', 1993);
+</pre>
+
+<p>Ця інструкція створює об'єкт <code>myСar</code> і присвоює його властивостям задані значення. В результаті значенням <code>myCar.make</code> буде строка "Eagle", <code>myCar.year</code> - ціле число 1993, тощо.<br>
+ <br>
+ Викликаючи <code>new</code>, можна створити необмежене число об'єктів типу <code>Car</code>. Наприклад:</p>
+
+<pre class="brush: js">var kensCar = new Car('Nissan', '300ZX', 1992);
+</pre>
+
+<h3 id="Властивість_обєкта_яка_є_іншим_обєктом">Властивість об'єкта, яка є іншим об'єктом</h3>
+
+<p>Припустимо, ви визначаєте об'єкт на ім'я <code>Person</code> (людина) наступним чином:</p>
+
+<pre class="brush: js">function Person(name, age, sex) {
+ this.name = name;
+ this.age = age;
+ this.sex = sex;
+}
+</pre>
+
+<p>Інстанціюємо два нових об'єкти типу <code>Person</code>:</p>
+
+<pre class="brush: js">var rand = new Person('Rand McNally', 33, 'Ч');
+var ken = new Person('Ken Jones', 39, 'Ч');
+</pre>
+
+<p>Далі можна доповнити визначення <code>Car</code> і включити в нього властивість <code>owner</code> (власник). Ця властивість буде приймати об'єкт <code>Person</code>, як у прикладі нижче:</p>
+
+<pre class="brush: js">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">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">car2.owner.name
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td>
+ <td>{{Spec2('ES3')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td>
+ <td>{{Spec2('ES1')}}</td>
+ <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.new")}}</p>
+
+<h2 id="Також_див.">Також див.</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+ <li>{{jsxref("Object.prototype")}}</li>
+</ul>