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
|
---
title: class expression
slug: Web/JavaScript/Reference/Operators/class
translation_of: Web/JavaScript/Reference/Operators/class
---
<div>{{jsSidebar("Operators")}}</div>
<div></div>
<p><strong>Class expression</strong> это способ определения класса в ECMAScript 2015 (ES6). Схожий с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a>, class expressions может быть именованным либо не иметь имени. Если он именованный, то его имя доступно только внутри класса. JavaScript классы используют прототипно-ориентирование наследование.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox notranslate">var MyClass = class <em>[className]</em> [extends] {
// тело класса
};</pre>
<h2 id="Описание">Описание</h2>
<p>Class expression имеет схожий синтаксис с {{jsxref("Statements/class", "class declaration (statement)", "", "true")}}. Однако в class expression можно опустить имя класса ("binding identifier"), что не допустимо с {{jsxref("Statements/class", "class declaration", "", "true")}}. Также class expression позволяет повторно объявить уже существующий класс и это <strong>не приведёт к ошибке типа</strong>, как при использовании {{jsxref("Statements/class", "class declaration", "", "true")}}. Свойство конструктора является опциональным. Результатом вызова оператора {{jsxref("Operators/typeof", "typeof")}} на классах, сгенерированных при помощи class expression, всегда будет "function".</p>
<p>Так же, как и при использовании class declaration, тело класса у class expression будет исполняться в {{jsxref("Strict_mode", "строгом режиме", "", 1)}}.</p>
<pre class="brush: js notranslate">'use strict';
var Foo = class {}; // свойство конструктора опционально
var Foo = class {}; // повторное объявление разрешено
typeof Foo; // возвращает "function"
typeof class {}; // возвращает "function"
Foo instanceof Object; // true
Foo instanceof Function; // true
class Foo {}; // Throws TypeError, doesn't allow re-declaration
</pre>
<h2 id="Примеры">Примеры</h2>
<h3 id="Простой_class_expression">Простой class expression</h3>
<p>Простой анонимный class expression, на который можно сослаться с помощью переменной "Foo".</p>
<pre class="brush: js notranslate">var Foo = class {
constructor() {}
bar() {
return "Hello World!";
}
};
var instance = new Foo();
instance.bar(); // "Hello World!"
Foo.name; // "Foo"
</pre>
<h3 id="Именованный_class_expression">Именованный class expression</h3>
<p>Если вы хотите сослаться на конкретный класс внутри тела класса, вы можете создать именованный class expression. Это имя будет доступно только внутри области видимости самого class expression.</p>
<pre class="brush: js notranslate">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('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
<td>{{Spec2('ES6')}}</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>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(42.0)}}</td>
<td>{{CompatGeckoDesktop(45)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(42.0)}}</td>
<td>{{CompatGeckoMobile(45)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatChrome(42.0)}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/function"><code>function</code> expression</a></li>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> statement</a></li>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
</ul>
|
