JavaScript Academy · leksjon

Arv, super og når komposisjon bør foretrekkes

Utvid en basisklasse med extends, kall super i konstruktører, overstyr metoder trygt og lær når enkel komposisjon er bedre.

Leksjon 2 av 38 trinn

Arv, super og når komposisjon bør foretrekkes er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 2 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 3 leksjoner.

Oversikt

Mål: Bruke grunnleggende arv uten forvirring.

  • extends oppretter en underklasse
  • super(...) kaller konstruktøren i superklassen
  • Overstyr en metode; kall eventuelt super.method()
  • Hvis det ikke er et «is-a»-forhold, bør De foretrekke komposisjon
Arv, super og når komposisjon bør foretrekkes — illustrasjon 1

extends + super

Opprett en underklasse med extends; kall super(name) for å kjøre konstruktøren i superklassen og sette opp this.

// Base class with a small field and method
class Animal {
  constructor(name) {
    this.name = name;
  }
  info() {
    return "Animal:" + this.name;
  }
}

// Child class extends the base and calls super(...)
class Dog extends Animal {
  constructor(name, breed) {
    // must call super() before using this
    super(name);
    this.breed = breed;
  }
  speak() {
    return "woof";
  }
}

const d = new Dog("Milo", "Beagle");
console.log(d.info(), d.speak());
Arv, super og når komposisjon bør foretrekkes — illustrasjon 2

Overstyring av metode

Ved overstyring kan De kalle super.method() for å gjenbruke baselogikken og deretter legge til justeringen.

// Override a method; keep parent behavior with super.method()
class Button {
  click() {
    return "base-click";
  }
}

class IconButton extends Button {
  click() {
    // call parent behavior, then add something
    const base = super.click();
    return base + "+icon";
  }
}

const b = new IconButton();
console.log(b.click()); // "base-click+icon"
Arv, super og når komposisjon bør foretrekkes — illustrasjon 3

Foretrekk komposisjon ved has-a

Hvis forholdet er has-a (klassen bruker en hjelper), bør De foretrekke komposisjon fremfor arv for å holde klassene enkle.

// Composition: use a helper object instead of extending
class Logger {
  log(msg) {
    console.log("[log]", msg);
  }
}

class Player {
  constructor(name, logger) {
    this.name = name;
    this.logger = logger; // has-a logger
  }
  score(points) {
    this.logger.log(this.name + " +" + points);
  }
}

const logger = new Logger();
const p = new Player("Ayla", logger);
p.score(5);
Arv, super og når komposisjon bør foretrekkes — illustrasjon 4

is-a kontra has-a

Arv modellerer et is-a-forhold: En Dog er en Animal. Komposisjon brukes for has-a-hjelpere.

// Use instanceof for a quick is-a check
console.log("Dog is Animal?", d instanceof Animal);
console.log("Player is Animal?", p instanceof Animal);
Arv, super og når komposisjon bør foretrekkes — illustrasjon 5

Vaner for nybegynnere

Tips:

  • Hold hierarkiene grunne for nybegynnere.
  • Kall super(...) først i konstruktører for underklasser.
  • Overstyr bare det som trengs; gjenbruk med super.method().
  • Foretrekk komposisjon for verktøy og tverrgående funksjoner.
Arv, super og når komposisjon bør foretrekkes — illustrasjon 6

Quiz om super(...)

Rask sjekk: super i en konstruktør for en underklasse.

Arv, super og når komposisjon bør foretrekkes — illustrasjon 7

Oppsummering

Oppsummering: Bruk extends for ekte is-a-forhold, kall super(...) tidlig, overstyr med omtanke (kall super.method() når det er nyttig) og foretrekk komposisjon for hjelpere.

Arv, super og når komposisjon bør foretrekkes — illustrasjon 8
Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
59
Leksjoner
200

Ofte stilte spørsmål

Er leksjonen «Arv, super og når komposisjon bør foretrekkes» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Arv, super og når komposisjon bør foretrekkes», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 3 leksjoner.

Hva lærer jeg i «Arv, super og når komposisjon bør foretrekkes»?

Utvid en basisklasse med extends, kall super i konstruktører, overstyr metoder trygt og lær når enkel komposisjon er bedre. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 3.

Hvor lang tid tar leksjonen «Arv, super og når komposisjon bør foretrekkes»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Klassefelter, private #‑felter og statiske medlemmer
  2. Arv, super og når komposisjon bør foretrekkes
  3. Mixins (smakebit) — enkel gjenbruk uten dype hierarkier
← Tilbake til JavaScript Academy