diff options
Diffstat (limited to 'files/uk/web/javascript/reference/operators/new/index.html')
| -rw-r--r-- | files/uk/web/javascript/reference/operators/new/index.html | 197 |
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> |
