extends

Nyckelorder extends används i klassdeklarationer eller klassuttryck för att skapa en klass som är barn till en annan klass.

Syntax

class ChildClass extends ParentClass { ... }

Beskrivning

Nyckelordet extends kan användas för att subklassa anpassade klasser såväl som inbyggda objekt.

.prototype vid användning av extends måste vara en Object eller null.

Exempel

Använda extends

Första exemplet skapar en klass som heter Square från en klass kallad Polygon. Exemplet är extraherat från denna live demo (källkod).

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;
  } 
}

Användning av extends med inbyggda objekt

Detta exempel utökar det inbyggda objektet Date. Exemplet är extraherat från denna live demo (källkod).

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();
  }
}

Utökning av null

Utökning från null fungerar som en normal klass, förutom att prototype objektet inte ärver från Object.prototype.

class nullExtends extends null {
  constructor() {}
}

Object.getPrototypeOf(nullExtends); // Function.prototype
Object.getPrototypeOf(nullExtends.prototype) // null

Specifikationer

Specifikation Status Kommentar
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'extends' in that specification.
Standard Initial definition.
ECMAScript 2017 Draft (ECMA-262)
The definition of 'extends' in that specification.
Draft  

Browserkompabilitet

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 42.0 45 (45) ? ? ?
Array subclassing 43.0 No support ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Bassupport No support 45.0 (45) ? ? ? 42.0
Array subklassning No support No support ? ? ? 43.0

Se även

Dokumenttaggar och bidragare

 Bidragare till denna sida: Bulan
 Senast uppdaterad av: Bulan,