Lära Förståelse av Arv med Extends och Super() | Bemästra JavaScript-klasser och Arv

Vad är ärvning av klasser?

JavaScript använder nyckelordet extends för att etablera detta förhållande mellan klasser. En underklass kan lägga till egna egenskaper och metoder eller åsidosätta de som finns i basklassen.

Tänk på en underklass som en specialiserad version av basklassen. Om basklassen är en ritning för en bil, kan underklassen representera en specifik typ av bil, till exempel en elbil. Elbilen ärver grundläggande funktionalitet (hjul, styrning) men kan lägga till eller ändra funktioner (batteri, laddningssystem).

Hur används nyckelordet extends

Nyckelordet extends används för att få en klass att ärva från en annan klass. Underklassen ärver alla egenskaper och metoder från basklassen.


              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 det här exemplet utökar klassen Dog klassen Animal och ärver metoden makeSound() från basklassen. Klassen Dog lägger även till sin egen metod bark().

Arbeta med konstruktorn i en underklass

När du skapar en underklass behöver den ofta initiera sina egna egenskaper samt de som tillhör basklassen. Detta görs via constructor-metoden. För att säkerställa att basklassen initieras korrekt måste du använda funktionen super() för att anropa basklassens konstruktor.

Viktigt: När en underklass har en konstruktor måste den anropa super() innan this används, annars uppstår ett fel.

Använda super() för att anropa basklassens konstruktor

Funktionen super() används för att anropa basklassens konstruktor från underklassens konstruktor. Detta säkerställer att alla egenskaper eller logik som definierats i basklassens konstruktor initieras korrekt innan ny funktionalitet läggs till 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 det här exemplet har vi en basklass kallad Animal med en konstruktor som initierar egenskapen name och en metod makeSound som loggar ett generiskt ljudmeddelande. Klassen Dog ärver från Animal och lägger till en egen konstruktor som accepterar både name och breed som argument. Inuti konstruktorn för Dog används funktionen super() för att anropa basklassens konstruktor, vilket säkerställer att name sätts korrekt. Dessutom introducerar Dog en ny metod, bark, som loggar ett meddelande specifikt för hundens ras. När vi skapar en ny instans av Dog med namnet Rex av rasen German Shepherd, kan vi anropa både makeSound och bark, vilket visar både ärvt och nytt beteende.

Viktiga punkter vid användning av extends och super()

Arv: Nyckelordet extends gör det möjligt för barnklassen att ärva egenskaper och metoder från basklassen.

Konstruktor i barnklass: När du definierar en konstruktor i barnklassen ska du alltid använda super() för att anropa basklassens konstruktor.

Åtkomst till this: Du måste anropa super() innan du får åtkomst till this i barnklassens konstruktor.

Metodöverskuggning: Du kan överskugga basklassens metoder i barnklassen genom att definiera en metod med samma namn. Du kan även använda super.methodName() för att anropa basklassens metod från barnklassen om det behövs.

Exempel: Åsidosätta metoder och använda super()

Ibland kan det vara önskvärt att åsidosätta en metod från basklassen i subklassen, men ändå anropa basklassens metod som en del av den nya logiken. Detta kan göras med hjälp av 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 detta exempel åsidosätter klassen Dog metoden makeSound, men anropar fortfarande basklassens makeSound-metod med hjälp av super.makeSound(). Detta gör det möjligt för subklassen att utöka basklassens funktionalitet utan att helt ersätta den.

Exempel från verkligheten: Employee- och Manager-klasser

Tänk dig ett scenario där vi har en Employee-klass och en Manager-klass som utökar den. Manager-klassen lägger till ny funktionalitet ovanpå den grundläggande funktionaliteten i 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 detta exempel utökar Manager-klassen Employee-klassen och lägger till en ny egenskap, department. Metoden getDetails() i Manager-klassen anropar föräldraklassens metod med super.getDetails() och lägger sedan till sin egen avdelningsspecifika information.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 14

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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

Svep för att visa menyn

Vad är ärvning av klasser?

Hur används nyckelordet extends

Nyckelordet extends används för att få en klass att ärva från en annan klass. Underklassen ärver alla egenskaper och metoder från basklassen.


              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 det här exemplet utökar klassen Dog klassen Animal och ärver metoden makeSound() från basklassen. Klassen Dog lägger även till sin egen metod bark().

Arbeta med konstruktorn i en underklass

Viktigt: När en underklass har en konstruktor måste den anropa super() innan this används, annars uppstår ett fel.

Använda super() för att anropa basklassens konstruktor


              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!

Viktiga punkter vid användning av extends och super()

Arv: Nyckelordet extends gör det möjligt för barnklassen att ärva egenskaper och metoder från basklassen.

Konstruktor i barnklass: När du definierar en konstruktor i barnklassen ska du alltid använda super() för att anropa basklassens konstruktor.

Åtkomst till this: Du måste anropa super() innan du får åtkomst till this i barnklassens konstruktor.

Exempel: Åsidosätta metoder och använda 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.

Exempel från verkligheten: Employee- och 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 allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 14

Förståelse av Arv med Extends och Super()

Vad är ärvning av klasser?

Hur används nyckelordet extends

Arbeta med konstruktorn i en underklass

Använda super() för att anropa basklassens konstruktor

Viktiga punkter vid användning av extends och super()

Exempel: Åsidosätta metoder och använda super()

Exempel från verkligheten: Employee- och Manager-klasser

1. Vad gör nyckelordet `extends`?

2. Varför använder vi `super()` i konstruktorn för en subklass?

3. Vad kommer följande kod att skriva ut?

Awesome!

Förståelse av Arv med Extends och Super()

Vad är ärvning av klasser?

Hur används nyckelordet extends

Arbeta med konstruktorn i en underklass

Använda super() för att anropa basklassens konstruktor

Viktiga punkter vid användning av extends och super()

Exempel: Åsidosätta metoder och använda super()

Exempel från verkligheten: Employee- och Manager-klasser

1. Vad gör nyckelordet `extends`?

2. Varför använder vi `super()` i konstruktorn för en subklass?

3. Vad kommer följande kod att skriva ut?

Förståelse av Arv med Extends och Super()

Vad är ärvning av klasser?

Hur används nyckelordet extends

Arbeta med konstruktorn i en underklass

Använda super() för att anropa basklassens konstruktor

Viktiga punkter vid användning av extends och super()

Exempel: Åsidosätta metoder och använda super()

Exempel från verkligheten: Employee- och Manager-klasser

1. Vad gör nyckelordet extends?

2. Varför använder vi super() i konstruktorn för en subklass?

3. Vad kommer följande kod att skriva ut?

Awesome!

Förståelse av Arv med Extends och Super()

Vad är ärvning av klasser?

Hur används nyckelordet extends

Arbeta med konstruktorn i en underklass

Använda super() för att anropa basklassens konstruktor

Viktiga punkter vid användning av extends och super()

Exempel: Åsidosätta metoder och använda super()

Exempel från verkligheten: Employee- och Manager-klasser

1. Vad gör nyckelordet extends?

2. Varför använder vi super() i konstruktorn för en subklass?

3. Vad kommer följande kod att skriva ut?

1. Vad gör nyckelordet `extends`?

2. Varför använder vi `super()` i konstruktorn för en subklass?

1. Vad gör nyckelordet `extends`?

2. Varför använder vi `super()` i konstruktorn för en subklass?