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.
1234567891011121314151617181920class 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.
1234567891011121314151617181920212223242526class 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()
.
1234567891011121314151617181920212223242526272829class 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.
12345678910111213141516171819202122232425262728class 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.
1. Mitä extends
-avainsana tekee?
2. Miksi lapsiluokassa käytetään super()
-kutsua konstruktorissa?
3. Mitä seuraava koodi tulostaa?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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
Perinnön Ymmärtäminen Extends- ja Super()-Avainsanoilla
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.
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.
1234567891011121314151617181920class 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.
1234567891011121314151617181920212223242526class 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()
.
1234567891011121314151617181920212223242526272829class 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.
12345678910111213141516171819202122232425262728class 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.
1. Mitä extends
-avainsana tekee?
2. Miksi lapsiluokassa käytetään super()
-kutsua konstruktorissa?
3. Mitä seuraava koodi tulostaa?
Kiitos palautteestasi!