We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 Latest Draft (ECMA-262)
The definition of 'extends' in that specification.
Draft  

Browserkompabilitet

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,