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

Hva er klassearv?

JavaScript bruker nøkkelordet extends for å etablere dette forholdet mellom klasser. En barneklasse kan legge til egne egenskaper og metoder, eller overstyre de som kommer fra foreldreklassen.

Tenk på en barneklasse som en spesialisert versjon av foreldreklassen. Hvis foreldreklassen er en blåkopi for en bil, kan barneklassen representere en bestemt type bil, som en elbil. Elbilen arver grunnleggende funksjonalitet (hjul, styring), men kan legge til eller endre funksjoner (batteri, ladesystem).

Hvordan bruke extends-nøkkelordet

Nøkkelordet extends brukes for å la én klasse arve fra en annen klasse. Barneklassen arver alle egenskaper og metoder fra foreldreklassen.


              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 eksempelet utvider Dog-klassen Animal-klassen, og arver metoden makeSound() fra foreldreklassen. Dog-klassen legger også til sin egen metode, bark().

Arbeide med konstruktøren i en barneklasse

Når du oppretter en barneklasse, må den ofte initialisere sine egne egenskaper i tillegg til de som tilhører foreldreklassen. Dette gjøres gjennom constructor-metoden. For å sikre at foreldreklassen blir riktig initialisert, må du bruke funksjonen super() for å kalle konstruktøren til foreldreklassen.

Viktig: Når en barneklasse har en konstruktør, må den kalle super() før den får tilgang til this, ellers vil det oppstå en feil.

Bruke super() for å kalle konstruktøren til foreldreklassen

Funksjonen super() brukes for å kalle konstruktøren til foreldreklassen fra konstruktøren i barneklassen. Dette sikrer at alle egenskaper eller logikk definert i konstruktøren til foreldreklassen blir korrekt initialisert før ny funksjonalitet legges til i barneklassen.


              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 eksemplet har vi en grunnklasse kalt Animal med en konstruktør som initialiserer egenskapen name og en metode makeSound som logger en generell lydmelding. Klassen Dog utvider Animal og legger til sin egen konstruktør som tar både name og breed som argumenter. Inne i konstruktøren til Dog brukes funksjonen super() for å kalle konstruktøren til forelderen, slik at name blir satt riktig. I tillegg introduserer Dog en ny metode, bark, som logger en melding spesifikk for hundens rase. Når vi oppretter en ny instans av Dog med navnet Rex av rasen German Shepherd, kan vi kalle både makeSound og bark, noe som viser både arvet og ny funksjonalitet.

Viktige punkter ved bruk av extends og super()

Arv: Nøkkelordet extends gjør at barneklassen arver egenskaper og metoder fra foreldreklassen.

Konstruktør i barneklasse: Når du definerer en konstruktør i barneklassen, må du alltid bruke super() for å kalle konstruktøren til foreldreklassen.

Tilgang til this: Du må kalle super() før du får tilgang til this i konstruktøren til barneklassen.

Overstyring av metoder: Du kan overstyre metoder fra foreldreklassen i barneklassen ved å definere en metode med samme navn. Du kan også bruke super.methodName() for å kalle metoden fra foreldreklassen inne i barneklassen hvis det er nødvendig.

Eksempel: Overstyring av metoder og bruk av super()

Noen ganger kan det være ønskelig å overstyre en metode fra foreldreklassen i barneklassen, men likevel kalle metoden fra foreldreklassen som en del av den nye logikken. Dette kan gjøres ved å bruke 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 eksemplet overstyrer Dog-klassen metoden makeSound, men kaller fortsatt foreldrekassens makeSound-metode ved å bruke super.makeSound(). Dette gjør det mulig for barneklassen å utvide funksjonaliteten til foreldreklassen uten å erstatte den fullstendig.

Virkelig eksempel: Employee- og Manager-klasser

La oss se på et scenario der vi har en Employee-klasse og en Manager-klasse som utvider denne. Manager-klassen legger til ny funksjonalitet på toppen av den grunnleggende funksjonaliteten til 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 eksempelet utvider Manager-klassen Employee-klassen og legger til en ny egenskap, department. Metoden getDetails() i Manager-klassen kaller metoden fra forelderen ved å bruke super.getDetails() og legger deretter til informasjon som er spesifikk for avdelingen.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 14

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.22

Sveip for å vise menyen

Hva er klassearv?

JavaScript bruker nøkkelordet extends for å etablere dette forholdet mellom klasser. En barneklasse kan legge til egne egenskaper og metoder, eller overstyre de som kommer fra foreldreklassen.

Hvordan bruke extends-nøkkelordet

Nøkkelordet extends brukes for å la én klasse arve fra en annen klasse. Barneklassen arver alle egenskaper og metoder fra foreldreklassen.


              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 eksempelet utvider Dog-klassen Animal-klassen, og arver metoden makeSound() fra foreldreklassen. Dog-klassen legger også til sin egen metode, bark().

Arbeide med konstruktøren i en barneklasse

Viktig: Når en barneklasse har en konstruktør, må den kalle super() før den får tilgang til this, ellers vil det oppstå en feil.

Bruke super() for å kalle konstruktøren til foreldreklassen


              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!

Viktige punkter ved bruk av extends og super()

Arv: Nøkkelordet extends gjør at barneklassen arver egenskaper og metoder fra foreldreklassen.

Konstruktør i barneklasse: Når du definerer en konstruktør i barneklassen, må du alltid bruke super() for å kalle konstruktøren til foreldreklassen.

Tilgang til this: Du må kalle super() før du får tilgang til this i konstruktøren til barneklassen.

Eksempel: Overstyring av metoder og bruk av 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.

Virkelig 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.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 14

Forståelse av Arv med Extends og Super()

Hva er klassearv?

Hvordan bruke extends-nøkkelordet

Arbeide med konstruktøren i en barneklasse

Bruke super() for å kalle konstruktøren til foreldreklassen

Viktige punkter ved bruk av extends og super()

Eksempel: Overstyring av metoder og bruk av super()

Virkelig eksempel: Employee- og Manager-klasser

1. Hva gjør nøkkelordet `extends`?

2. Hvorfor bruker vi `super()` i konstruktøren til en barneklasse?

3. Hva vil følgende kode skrive ut?

Awesome!

Forståelse av Arv med Extends og Super()

Hva er klassearv?

Hvordan bruke extends-nøkkelordet

Arbeide med konstruktøren i en barneklasse

Bruke super() for å kalle konstruktøren til foreldreklassen

Viktige punkter ved bruk av extends og super()

Eksempel: Overstyring av metoder og bruk av super()

Virkelig eksempel: Employee- og Manager-klasser

1. Hva gjør nøkkelordet `extends`?

2. Hvorfor bruker vi `super()` i konstruktøren til en barneklasse?

3. Hva vil følgende kode skrive ut?

Forståelse av Arv med Extends og Super()

Hva er klassearv?

Hvordan bruke extends-nøkkelordet

Arbeide med konstruktøren i en barneklasse

Bruke super() for å kalle konstruktøren til foreldreklassen

Viktige punkter ved bruk av extends og super()

Eksempel: Overstyring av metoder og bruk av super()

Virkelig eksempel: Employee- og Manager-klasser

1. Hva gjør nøkkelordet extends?

2. Hvorfor bruker vi super() i konstruktøren til en barneklasse?

3. Hva vil følgende kode skrive ut?

Awesome!

Forståelse av Arv med Extends og Super()

Hva er klassearv?

Hvordan bruke extends-nøkkelordet

Arbeide med konstruktøren i en barneklasse

Bruke super() for å kalle konstruktøren til foreldreklassen

Viktige punkter ved bruk av extends og super()

Eksempel: Overstyring av metoder og bruk av super()

Virkelig eksempel: Employee- og Manager-klasser

1. Hva gjør nøkkelordet extends?

2. Hvorfor bruker vi super() i konstruktøren til en barneklasse?

3. Hva vil følgende kode skrive ut?

1. Hva gjør nøkkelordet `extends`?

2. Hvorfor bruker vi `super()` i konstruktøren til en barneklasse?

1. Hva gjør nøkkelordet `extends`?

2. Hvorfor bruker vi `super()` i konstruktøren til en barneklasse?