diff options
Diffstat (limited to 'files/sv-se/web/javascript/reference/classes/extends/index.html')
| -rw-r--r-- | files/sv-se/web/javascript/reference/classes/extends/index.html | 172 |
1 files changed, 172 insertions, 0 deletions
diff --git a/files/sv-se/web/javascript/reference/classes/extends/index.html b/files/sv-se/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..c72398e470 --- /dev/null +++ b/files/sv-se/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,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> |