Oppiskele Perinnön Ymmärtäminen Extends- ja Super()-Avainsanoilla

Mikä on luokkaperintä?

JavaScript käyttää extends-avainsanaa luodakseen suhteen luokkien välille. Aliluokka voi lisätä omia ominaisuuksiaan ja metodejaan tai korvata yliluokan ominaisuuksia ja metodeja.

Ajattele aliluokkaa erikoistuneena versiona yliluokasta. Jos yliluokka on auton suunnitelma, aliluokka voi edustaa tiettyä automallia, kuten sähköautoa. Sähköauto perii perustoiminnot (renkaat, ohjaus), mutta voi lisätä tai muokata ominaisuuksia (akku, latausjärjestelmä).

extends-avainsanan käyttö

extends-avainsanaa käytetään, kun halutaan, että yksi luokka perii toisen luokan. Aliluokka perii kaikki yliluokan ominaisuudet ja metodit.


              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!

Tässä esimerkissä Dog-luokka laajentaa Animal-luokkaa, perien makeSound()-metodin yliluokalta. Dog-luokka lisää myös oman bark()-metodinsa.

Konstruktorin käyttö aliluokassa

Kun luot aliluokan, sen täytyy usein alustaa omat ominaisuutensa sekä yliluokan ominaisuudet. Tämä tehdään constructor-metodin avulla. Jotta yliluokka alustetaan oikein, täytyy käyttää super()-funktiota kutsumaan yliluokan konstruktoria.

Tärkeää: Kun aliluokalla on konstruktori, sen täytyy kutsua super() ennen kuin this-avainsanaa voidaan käyttää, muuten syntyy virhe.

super()-funktion käyttäminen yliluokan konstruktorin kutsumiseen

super()-funktiota käytetään kutsumaan yliluokan konstruktoria aliluokan konstruktorista. Tämä varmistaa, että kaikki yliluokan konstruktorissa määritellyt ominaisuudet ja logiikka alustetaan oikein ennen uuden toiminnallisuuden lisäämistä aliluokassa.


              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!

Tässä esimerkissä on perusluokka nimeltä Animal, jonka konstruktori alustaa name-ominaisuuden ja metodi makeSound kirjaa yleisen ääniviestin. Dog-luokka laajentaa Animal-luokkaa ja lisää oman konstruktorinsa, joka ottaa sekä name- että breed-parametrit. Dog-konstruktorissa käytetään super()-funktiota kutsumaan yliluokan konstruktoria, jotta name asetetaan oikein. Lisäksi Dog esittelee uuden metodin, bark, joka kirjaa viestin, joka on ominainen koiran rodulle. Kun luodaan uusi Dog-olio nimeltä Rex, jonka rotu on German Shepherd, voidaan kutsua sekä makeSound- että bark-metodeja, mikä havainnollistaa perittyä ja uutta toimintaa.

Keskeiset asiat käytettäessä extends- ja super()-avainsanoja

Perintä: extends-avainsana mahdollistaa lapsiluokan perimän ominaisuudet ja metodit yliluokasta.

Konstruktori lapsiluokassa: Kun määritellään konstruktori lapsiluokkaan, käytä aina super()-kutsua yliluokan konstruktorin kutsumiseen.

this-avainsanan käyttö: Sinun täytyy kutsua super() ennen kuin voit käyttää this-avainsanaa lapsiluokan konstruktorissa.

Metodin ylikirjoittaminen: Voit ylikirjoittaa yliluokan metodeja lapsiluokassa määrittelemällä metodin samalla nimellä. Voit myös käyttää super.methodName()-kutsua kutsuaksesi yliluokan metodia lapsiluokasta tarvittaessa.

Esimerkki: Metodien ylikirjoittaminen ja super()-avainsanan käyttö

Joskus halutaan ylikirjoittaa yliluokan metodi aliluokassa, mutta samalla kutsua yliluokan metodia osana uutta logiikkaa. Tämä onnistuu käyttämällä 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.

Tässä esimerkissä Dog-luokka ylikirjoittaa makeSound-metodin, mutta kutsuu silti yliluokan makeSound-metodia käyttämällä super.makeSound(). Tämä mahdollistaa aliluokan laajentaa yliluokan toiminnallisuutta ilman, että se korvaa sitä kokonaan.

Käytännön esimerkki: Employee- ja Manager-luokat

Tarkastellaan tilannetta, jossa on Employee-luokka ja sitä laajentava Manager-luokka. Manager-luokka lisää uutta toiminnallisuutta perus-Employee-luokan ominaisuuksien päälle.


              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.

Tässä esimerkissä Manager-luokka laajentaa Employee-luokkaa lisäämällä uuden department-ominaisuuden. getDetails()-luokan Manager-metodi kutsuu yliluokan metodia käyttäen super.getDetails() ja lisää sen jälkeen oman osastokohtaisen tietonsa.

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 1. Luku 14

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

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

Pyyhkäise näyttääksesi valikon

Mikä on luokkaperintä?

JavaScript käyttää extends-avainsanaa luodakseen suhteen luokkien välille. Aliluokka voi lisätä omia ominaisuuksiaan ja metodejaan tai korvata yliluokan ominaisuuksia ja metodeja.

extends-avainsanan käyttö

extends-avainsanaa käytetään, kun halutaan, että yksi luokka perii toisen luokan. Aliluokka perii kaikki yliluokan ominaisuudet ja metodit.


              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!

Tässä esimerkissä Dog-luokka laajentaa Animal-luokkaa, perien makeSound()-metodin yliluokalta. Dog-luokka lisää myös oman bark()-metodinsa.

Konstruktorin käyttö aliluokassa

Tärkeää: Kun aliluokalla on konstruktori, sen täytyy kutsua super() ennen kuin this-avainsanaa voidaan käyttää, muuten syntyy virhe.

super()-funktion käyttäminen yliluokan konstruktorin kutsumiseen


              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!

Keskeiset asiat käytettäessä extends- ja super()-avainsanoja

Perintä: extends-avainsana mahdollistaa lapsiluokan perimän ominaisuudet ja metodit yliluokasta.

Konstruktori lapsiluokassa: Kun määritellään konstruktori lapsiluokkaan, käytä aina super()-kutsua yliluokan konstruktorin kutsumiseen.

this-avainsanan käyttö: Sinun täytyy kutsua super() ennen kuin voit käyttää this-avainsanaa lapsiluokan konstruktorissa.

Esimerkki: Metodien ylikirjoittaminen ja super()-avainsanan käyttö

Joskus halutaan ylikirjoittaa yliluokan metodi aliluokassa, mutta samalla kutsua yliluokan metodia osana uutta logiikkaa. Tämä onnistuu käyttämällä 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.

Käytännön esimerkki: Employee- ja Manager-luokat

Tarkastellaan tilannetta, jossa on Employee-luokka ja sitä laajentava Manager-luokka. Manager-luokka lisää uutta toiminnallisuutta perus-Employee-luokan ominaisuuksien päälle.


              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.

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 1. Luku 14

Perinnön Ymmärtäminen Extends- ja Super()-Avainsanoilla

Mikä on luokkaperintä?

extends-avainsanan käyttö

Konstruktorin käyttö aliluokassa

super()-funktion käyttäminen yliluokan konstruktorin kutsumiseen

Keskeiset asiat käytettäessä extends- ja super()-avainsanoja

Esimerkki: Metodien ylikirjoittaminen ja super()-avainsanan käyttö

Käytännön esimerkki: Employee- ja Manager-luokat

1. Mitä `extends`-avainsana tekee?

2. Miksi lapsiluokassa käytetään `super()`-kutsua konstruktorissa?

3. Mitä seuraava koodi tulostaa?

Awesome!

Perinnön Ymmärtäminen Extends- ja Super()-Avainsanoilla

Mikä on luokkaperintä?

extends-avainsanan käyttö

Konstruktorin käyttö aliluokassa

super()-funktion käyttäminen yliluokan konstruktorin kutsumiseen

Keskeiset asiat käytettäessä extends- ja super()-avainsanoja

Esimerkki: Metodien ylikirjoittaminen ja super()-avainsanan käyttö

Käytännön esimerkki: Employee- ja Manager-luokat

1. Mitä `extends`-avainsana tekee?

2. Miksi lapsiluokassa käytetään `super()`-kutsua konstruktorissa?

3. Mitä seuraava koodi tulostaa?

Perinnön Ymmärtäminen Extends- ja Super()-Avainsanoilla

Mikä on luokkaperintä?

extends-avainsanan käyttö

Konstruktorin käyttö aliluokassa

super()-funktion käyttäminen yliluokan konstruktorin kutsumiseen

Keskeiset asiat käytettäessä extends- ja super()-avainsanoja

Esimerkki: Metodien ylikirjoittaminen ja super()-avainsanan käyttö

Käytännön esimerkki: Employee- ja Manager-luokat

1. Mitä extends-avainsana tekee?

2. Miksi lapsiluokassa käytetään super()-kutsua konstruktorissa?

3. Mitä seuraava koodi tulostaa?

Awesome!

Perinnön Ymmärtäminen Extends- ja Super()-Avainsanoilla

Mikä on luokkaperintä?

extends-avainsanan käyttö

Konstruktorin käyttö aliluokassa

super()-funktion käyttäminen yliluokan konstruktorin kutsumiseen

Keskeiset asiat käytettäessä extends- ja super()-avainsanoja

Esimerkki: Metodien ylikirjoittaminen ja super()-avainsanan käyttö

Käytännön esimerkki: Employee- ja Manager-luokat

1. Mitä extends-avainsana tekee?

2. Miksi lapsiluokassa käytetään super()-kutsua konstruktorissa?

3. Mitä seuraava koodi tulostaa?

1. Mitä `extends`-avainsana tekee?

2. Miksi lapsiluokassa käytetään `super()`-kutsua konstruktorissa?

1. Mitä `extends`-avainsana tekee?

2. Miksi lapsiluokassa käytetään `super()`-kutsua konstruktorissa?