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
|
---
title: extends
slug: Web/JavaScript/Reference/Classes/extends
tags:
- Классы
- Наследование
- Расширение
translation_of: Web/JavaScript/Reference/Classes/extends
---
<div>{{jsSidebar("Classes")}}</div>
<p>Ключевое слово <strong><code>extends</code></strong> используется в <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">объявлении класса</a> или в <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">выражениях класса</a> для создания дочернего класса.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre>
<h2 id="Описание">Описание</h2>
<p>Ключевое слово <strong><code>extends</code></strong> может быть использовано для создания дочернего класса для уже существующего класса или встроенного объекта.</p>
<p>Свойство <strong><code>.prototype</code></strong> родительского класса или объекта должно быть {{jsxref("Object")}} или {{jsxref("null")}}.</p>
<h2 id="Примеры">Примеры</h2>
<h3 id="Использование_extends">Использование <code>extends</code></h3>
<p>В первом примере создаётся дочерний класс с именем <code>Square</code> от класса с именем <code>Polygon</code>. Этот пример был взят из <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>.</p>
<pre class="brush: js">class Square extends Polygon {
constructor(length) {
// Здесь вызывается конструктор родительского класса,
// в который передаётся свойство length в качестве
// аргументов, соответствующих полям width и height,
// класса Polygon
super(length, length);
// Примечание:
// В конструкторе класса, метод super() должен быть вызван
// перед использованием this. В противном случае, будет
// выброшена ошибка.
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
}</pre>
<h3 id="Расширение_встроенных_объектов_с_помощью_extends">Расширение встроенных объектов с помощью <code>extends</code></h3>
<p>Этот пример расширяет встроенный объект {{jsxref("Date")}}. Пример взят из <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>.</p>
<pre class="brush: js">class myDate extends Date {
constructor() {
super();
}
getFormattedDate() {
var months = [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
];
return this.getDate() + '-' +
months[this.getMonth()] + '-' +
this.getFullYear();
}
}</pre>
<h3 id="Расширение_null">Расширение <code>null</code></h3>
<p>Расширение {{jsxref("null")}} работает как и с обычным классом, за исключением того, что прототип объекта не наследует {{jsxref("Object.prototype")}}.</p>
<pre class="brush: js">class nullExtends extends null {
constructor() {}
}
Object.getPrototypeOf(nullExtends); // Function.prototype
Object.getPrototypeOf(nullExtends.prototype) // null
new nullExtends(); //ReferenceError: this is not defined
</pre>
<h2 id="Спецификация">Спецификация</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</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>
<tr>
<td>Array subclassing</td>
<td>{{CompatChrome(43.0)}}</td>
<td>{{CompatNo}}</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>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>{{CompatGeckoMobile(45)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatChrome(42.0)}}</td>
</tr>
<tr>
<td>Array subclassing</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatChrome(43.0)}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
</ul>
|
