Lære Forståelse af Arv med Extends og Super() | Mestering af JavaScript-klasser og Arv

Hvad er klassearv?

JavaScript bruger nøgleordet extends til at etablere dette forhold mellem klasser. En underklasse kan tilføje sine egne egenskaber og metoder eller tilsidesætte dem fra superklassen.

Tænk på en underklasse som en specialiseret version af superklassen. Hvis superklassen er en skabelon for en bil, kan underklassen repræsentere en bestemt type bil, såsom en elbil. Elbilen arver den grundlæggende funktionalitet (hjul, styring), men kan tilføje eller ændre funktioner (batteri, opladningssystem).

Sådan bruges extends-nøgleordet

Nøgleordet extends bruges til at få én klasse til at arve fra en anden klasse. Underklassen arver alle egenskaber og metoder fra superklassen.


              1234567891011121314151617181920
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class extending the Animal class
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Rex');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex barks!

I dette eksempel udvider Dog-klassen Animal-klassen og arver metoden makeSound() fra forældreklassen. Dog-klassen tilføjer også sin egen metode bark().

Arbejde med konstruktøren i en underklasse

Når du opretter en underklasse, skal den ofte initialisere sine egne egenskaber samt dem fra forældreklassen. Dette gøres gennem constructor-metoden. For at sikre, at forældreklassen bliver korrekt initialiseret, skal du dog bruge funktionen super() til at kalde forældreklassens konstruktør.

Vigtigt: Når en underklasse har en konstruktør, skal den kalde super() før der gives adgang til this, ellers opstår der en fejl.

Brug af super() til at kalde forældreklassens konstruktør

Funktionen super() bruges til at kalde konstruktøren for forældreklassen fra underklassens konstruktør. Dette sikrer, at alle egenskaber eller logik defineret i forældreklassens konstruktør bliver korrekt initialiseret, før der tilføjes ny funktionalitet i underklassen.


              1234567891011121314151617181920212223242526
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class with its own constructor
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor using super()
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}, the ${this.breed}, barks!`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex, the German Shepherd, barks!

I dette eksempel har vi en basisklasse kaldet Animal med en konstruktør, der initialiserer egenskaben name, samt en metode makeSound, der logger en generisk lydmeddelelse. Klassen Dog udvider Animal og tilføjer sin egen konstruktør, som accepterer både name og breed som argumenter. Inde i Dog-konstruktøren bruges funktionen super() til at kalde forælderklassens konstruktør, hvilket sikrer, at name bliver sat korrekt. Derudover introducerer Dog en ny metode, bark, som logger en besked specifik for hundens race. Når vi opretter en ny instans af Dog ved navn Rex af racen German Shepherd, kan vi kalde både makeSound og bark, hvilket demonstrerer den nedarvede og nye funktionalitet.

Vigtige punkter ved brug af extends og super()

Arv: Nøgleordet extends gør det muligt for barneklassen at arve egenskaber og metoder fra forælderklassen.

Konstruktør i barneklasse: Når du definerer en konstruktør i barneklassen, skal du altid bruge super() for at kalde forælderklassens konstruktør.

Adgang til this: Du skal kalde super() før du får adgang til this i barneklassens konstruktør.

Metodeoverskrivning: Du kan overskrive forælderklassens metoder i barneklassen ved at definere en metode med samme navn. Du kan også bruge super.methodName() for at kalde forælderklassens metode fra barneklassen, hvis det er nødvendigt.

Eksempel: Overskrivning af metoder og brug af super()

Nogle gange kan det være nødvendigt at overskrive en metode fra forældreklassen i barneklassen, men stadig kalde forældreklassens metode som en del af den nye logik. Dette kan gøres ved at bruge super.methodName().


              1234567891011121314151617181920212223242526272829
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a generic sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  // Override the makeSound method
  makeSound() {
    // Call the parent class's makeSound method
    super.makeSound();
    console.log(`${this.name}, the ${this.breed}, barks loudly.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound();
// Output:
// Rex makes a generic sound.
// Rex, the German Shepherd, barks loudly.

I dette eksempel overskriver Dog-klassen metoden makeSound, men kalder stadig forældreklassens makeSound-metode ved hjælp af super.makeSound(). Dette gør det muligt for barneklassen at udvide forældreklassens funktionalitet uden at erstatte den fuldstændigt.

Virkeligt eksempel: Employee- og Manager-klasser

Overvej et scenarie, hvor vi har en Employee-klasse og en Manager-klasse, der udvider denne. Manager-klassen tilføjer ny funktionalitet oven på den grundlæggende funktionalitet fra Employee.


              12345678910111213141516171819202122232425262728
            
class Employee {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }

  getDetails() {
    return `${this.name} works as a ${this.position}.`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    // Call the parent class constructor using super()
    super(name, position);
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()} They manage the ${
      this.department
    } department.`;
  }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.getDetails());
// Output: Alice works as a Manager. They manage the Sales department.

I dette eksempel udvider Manager-klassen Employee-klassen og tilføjer en ny egenskab, department. Metoden getDetails() i Manager-klassen kalder forælderklassens metode ved hjælp af super.getDetails() og tilføjer derefter sin egen afdelingsspecifikke information.

Var alt klart?

Tak for dine kommentarer!

Sektion 1. Kapitel 14

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you explain more about how method overriding works in JavaScript?

What happens if I forget to call super() in the child class constructor?

Can you give more real-world examples of class inheritance?

Awesome!

Completion rate improved to 2.22

Stryg for at vise menuen

Hvad er klassearv?

JavaScript bruger nøgleordet extends til at etablere dette forhold mellem klasser. En underklasse kan tilføje sine egne egenskaber og metoder eller tilsidesætte dem fra superklassen.

Sådan bruges extends-nøgleordet

Nøgleordet extends bruges til at få én klasse til at arve fra en anden klasse. Underklassen arver alle egenskaber og metoder fra superklassen.


              1234567891011121314151617181920
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class extending the Animal class
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Rex');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex barks!

I dette eksempel udvider Dog-klassen Animal-klassen og arver metoden makeSound() fra forældreklassen. Dog-klassen tilføjer også sin egen metode bark().

Arbejde med konstruktøren i en underklasse

Vigtigt: Når en underklasse har en konstruktør, skal den kalde super() før der gives adgang til this, ellers opstår der en fejl.

Brug af super() til at kalde forældreklassens konstruktør


              1234567891011121314151617181920212223242526
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class with its own constructor
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor using super()
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}, the ${this.breed}, barks!`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex, the German Shepherd, barks!

Vigtige punkter ved brug af extends og super()

Arv: Nøgleordet extends gør det muligt for barneklassen at arve egenskaber og metoder fra forælderklassen.

Konstruktør i barneklasse: Når du definerer en konstruktør i barneklassen, skal du altid bruge super() for at kalde forælderklassens konstruktør.

Adgang til this: Du skal kalde super() før du får adgang til this i barneklassens konstruktør.

Eksempel: Overskrivning af metoder og brug af super()


              1234567891011121314151617181920212223242526272829
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a generic sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  // Override the makeSound method
  makeSound() {
    // Call the parent class's makeSound method
    super.makeSound();
    console.log(`${this.name}, the ${this.breed}, barks loudly.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound();
// Output:
// Rex makes a generic sound.
// Rex, the German Shepherd, barks loudly.

Virkeligt eksempel: Employee- og Manager-klasser


              12345678910111213141516171819202122232425262728
            
class Employee {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }

  getDetails() {
    return `${this.name} works as a ${this.position}.`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    // Call the parent class constructor using super()
    super(name, position);
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()} They manage the ${
      this.department
    } department.`;
  }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.getDetails());
// Output: Alice works as a Manager. They manage the Sales department.

Var alt klart?

Tak for dine kommentarer!

Sektion 1. Kapitel 14

Forståelse af Arv med Extends og Super()

Hvad er klassearv?

Sådan bruges extends-nøgleordet

Arbejde med konstruktøren i en underklasse

Brug af super() til at kalde forældreklassens konstruktør

Vigtige punkter ved brug af extends og super()

Eksempel: Overskrivning af metoder og brug af super()

Virkeligt eksempel: Employee- og Manager-klasser

1. Hvad gør nøgleordet `extends`?

2. Hvorfor bruger vi `super()` i konstruktøren i en underklasse?

3. Hvad vil følgende kode udskrive?

Awesome!

Forståelse af Arv med Extends og Super()

Hvad er klassearv?

Sådan bruges extends-nøgleordet

Arbejde med konstruktøren i en underklasse

Brug af super() til at kalde forældreklassens konstruktør

Vigtige punkter ved brug af extends og super()

Eksempel: Overskrivning af metoder og brug af super()

Virkeligt eksempel: Employee- og Manager-klasser

1. Hvad gør nøgleordet `extends`?

2. Hvorfor bruger vi `super()` i konstruktøren i en underklasse?

3. Hvad vil følgende kode udskrive?

Forståelse af Arv med Extends og Super()

Hvad er klassearv?

Sådan bruges extends-nøgleordet

Arbejde med konstruktøren i en underklasse

Brug af super() til at kalde forældreklassens konstruktør

Vigtige punkter ved brug af extends og super()

Eksempel: Overskrivning af metoder og brug af super()

Virkeligt eksempel: Employee- og Manager-klasser

1. Hvad gør nøgleordet extends?

2. Hvorfor bruger vi super() i konstruktøren i en underklasse?

3. Hvad vil følgende kode udskrive?

Awesome!

Forståelse af Arv med Extends og Super()

Hvad er klassearv?

Sådan bruges extends-nøgleordet

Arbejde med konstruktøren i en underklasse

Brug af super() til at kalde forældreklassens konstruktør

Vigtige punkter ved brug af extends og super()

Eksempel: Overskrivning af metoder og brug af super()

Virkeligt eksempel: Employee- og Manager-klasser

1. Hvad gør nøgleordet extends?

2. Hvorfor bruger vi super() i konstruktøren i en underklasse?

3. Hvad vil følgende kode udskrive?

1. Hvad gør nøgleordet `extends`?

2. Hvorfor bruger vi `super()` i konstruktøren i en underklasse?

1. Hvad gør nøgleordet `extends`?

2. Hvorfor bruger vi `super()` i konstruktøren i en underklasse?