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
|
---
title: Вираз класу
slug: Web/JavaScript/Reference/Operators/class
tags:
- ECMAScript 2015
- JavaScript
- Класи
- Оператор
- вираз
translation_of: Web/JavaScript/Reference/Operators/class
---
<div>{{jsSidebar("Operators")}}</div>
<p><strong>Вираз класу</strong> - це один зі способів визначити клас у ECMAScript 2015. Схоже до <a href="/uk/docs/Web/JavaScript/Reference/Operators/function">функціональних виразів</a>, вирази класів можуть бути іменовані або неіменовані. У іменованих ім'я класу є локальним для використання тільки у тілі класу. Класи JavaScript використовують прототипне наслідування.</p>
<div>{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}</div>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">var MyClass = class <em>[className]</em> [extends] {
// тіло класу
};</pre>
<h2 id="Опис">Опис</h2>
<p>Вираз класу має синтаксис, подібний до синтаксису <a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошення (оператору) класу</a>. Однак, у виразі класу ви можете опустити ім'я класу ("зв'язуючий ідентифікатор"), чого не можна зробити у оголошенні класу. Додатково, вираз класу дозволяє перевизначити/переоголосити клас та <strong>не викинути</strong> жодних помилок типу, як у <a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошенні класу</a>. Конструктор є необов'язковою властивістю. А результатом <em>typeof </em>для класів, створених за допомогою ключового слова, завжди буде "function".</p>
<p>Як і у оголошенні класу, тіло класу у виразі класу виконується у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>.</p>
<pre class="brush: js">'use strict';
var Foo = class {}; // конструктор є необов'язковою властивістю
var Foo = class {}; // дозволяється перевизначення
typeof Foo; //вертає "function"
typeof class {}; //вертає "function"
Foo instanceof Object; // true
Foo instanceof Function; // true
class Foo {}; // Викидає TypeError, не дозволяє перевизначення
</pre>
<h2 id="Приклади">Приклади</h2>
<h3 id="Простий_вираз_класу">Простий вираз класу</h3>
<p>Це простий анонімний вираз класу, на який можна посилатись через змінну "Foo".</p>
<pre class="brush: js">var Foo = class {
constructor() {}
bar() {
return 'Привіт!';
}
};
var instance = new Foo();
instance.bar(); // "Привіт!"
Foo.name; // "Foo"
</pre>
<h3 id="Іменовані_вирази_класів">Іменовані вирази класів</h3>
<p>Якщо ви бажаєте звертатись до поточного класу всередині тіла класу, ви можете створити іменований вираз класу. Це ім'я видиме тільки в області видимості самого виразу класу.</p>
<pre class="brush: js">var Foo = class NamedFoo {
constructor() {}
whoIsThere() {
return NamedFoo.name;
}
}
var bar = new Foo();
bar.whoIsThere(); // "NamedFoo"
NamedFoo.name; // ReferenceError: NamedFoo is not defined
Foo.name; // "NamedFoo"
</pre>
<h2 id="Специфікації">Специфікації</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Специфікація</th>
<th scope="col">Статус</th>
<th scope="col">Коментар</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Початкове визначення.</td>
</tr>
<tr>
<td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
<td>{{Spec2('ES2016')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
<td>{{Spec2('ES2017')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
<p>{{Compat("javascript.operators.class")}}</p>
<h2 id="Див._також">Див. також</h2>
<ul>
<li><a href="/uk/docs/Web/JavaScript/Reference/Operators/function">функціональний вираз</a></li>
<li><a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошення класу</a></li>
<li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li>
</ul>
|
