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
|
---
title: extends
slug: Web/JavaScript/Reference/Classes/extends
tags:
- ECMAScript 2015
- JavaScript
- Klasser
translation_of: Web/JavaScript/Reference/Classes/extends
---
<div>{{jsSidebar("Classes")}}</div>
<p>Nyckelorder <strong><code>extends</code></strong> används i <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">klassdeklarationer</a> eller <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">klassuttryck</a> för att skapa en klass som är barn till en annan klass.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre>
<h2 id="Beskrivning">Beskrivning</h2>
<p>Nyckelordet <code>extends</code> kan användas för att subklassa anpassade klasser såväl som inbyggda objekt.</p>
<p><code>.prototype</code> vid användning av <code>extends</code> måste vara en {{jsxref("Object")}} eller {{jsxref("null")}}.</p>
<h2 id="Exempel">Exempel</h2>
<h3 id="Använda_extends">Använda <code>extends</code></h3>
<p>Första exemplet skapar en klass som heter <code>Square</code> från en klass kallad <code>Polygon</code>. Exemplet är extraherat från denna <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">(källkod)</a>.</p>
<pre class="brush: js">class Square extends Polygon {
constructor(length) {
// Här anropas föräldraklassens constructor med längd
// angiven för Polygons bredd och höjd
super(length, length);
// Notera: i underliggande klasser, måste super() anropas innan du
// kan använda 'this'. Utelämnande av detta kommer orsaka ett "reference error".
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
set area(value) {
this.height = this.width = Math.sqrt(value);
this.area = value;
}
}</pre>
<h3 id="Användning_av_extends_med_inbyggda_objekt">Användning av <code>extends</code> med inbyggda objekt</h3>
<p>Detta exempel utökar det inbyggda objektet {{jsxref("Date")}}. Exemplet är extraherat från denna <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">(källkod)</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="Utökning_av_null">Utökning av <code>null</code></h3>
<p>Utökning från {{jsxref("null")}} fungerar som en normal klass, förutom att prototype objektet inte ärver från {{jsxref("Object.prototype")}}.</p>
<pre class="brush: js">class nullExtends extends null {
constructor() {}
}
Object.getPrototypeOf(nullExtends); // Function.prototype
Object.getPrototypeOf(nullExtends.prototype) // null</pre>
<h2 id="Specifikationer">Specifikationer</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-class-definitions', 'extends')}}</td>
<td>{{Spec2('ES6')}}</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="Browserkompabilitet">Browserkompabilitet</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>Bassupport</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 subklassning</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="Se_även">Se även</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>
|
