1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
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>
|
