Odziedzicz metody innej klasy za pomocą rozszerzenia słowa kluczowego w JavaScript

Z dodatkowymi funkcjami i prostszą składnią klasy, ES6 uczyniła JavaScript o wiele prostszy. Wcześniej dziedziczenie JavaScript było możliwe z obiektem.Prototypowa właściwość, która była bardzo różna i złożona w porównaniu z Java i C ++ i innymi takimi językami programowania.

W tym poście zajmiemy się dziedzictwo w JavaScript za pomocą „rozszerza”Słowo kluczowe w JavaScript. Przykłady pomagają w silnym przeglądaniu tej koncepcji, więc podajemy również przykłady. Zacznijmy.

Co to jest dziedzictwo?

Jak każdy inny język programowania, dziedzictwo jest bardzo ważną koncepcją w programowaniu obiektowym zorientowanym na JavaScript. Najprostszą definicją dziedziczenia jest to, że metody i atrybuty z klasy nadrzędnej lub klasy podstawowej zostają skopiowane lub odziedziczone na zajęcia pochodzące. Jest to bardzo przydatne, ponieważ dzięki temu jesteśmy w stanie osiągnąć możliwość ponownego użycia kodu. Ponowne wykorzystanie kodu oznacza ponowne wykorzystanie atrybutów/właściwości i metod klasy w innej nowo utworzonej klasie.

Rozszerza słowo kluczowe

Teraz, gdy spojrzeliśmy na dziedziczenie. Omówmy, jak to osiągnąć. Jak wspomniano wcześniej, zwykliśmy osiągnąć dziedzictwo za pośrednictwem obiektu.prototyp, który nazywa się prototypowym dziedzictwem. Jednak zastosowano bardziej łatwe podejście, które używał słowa kluczowego rozszerzenia.

Funkcja rozszerzania słów kluczowych służy do utworzenia klasy pochodnej/klasy dzieci z klasy nadrzędnej/klasy podstawowej. Klasa dziecka może odziedziczyć dowolną klasę, a klasa staje się klasą rodziców. Kiedy odziedziczymy, w klasie dziecięcej wszystkie metody i atrybuty zostaną odziedziczone po klasie nadrzędnej.

Składnia:

klasa Childclass rozszerza klasę macierzystą;

Należy pamiętać, że działa tylko w wersji EcMascript 2015 (ES6).

Która przeglądarka obsługuje słowo kluczowe „rozszerza”?

Teraz zobaczmy, które przeglądarki obsługują słowo kluczowe „rozszerza”.

Chrom	Krawędź	Firefox	Safari	Opera
49.0	13.0	45.0	9.0	36.0

Teraz, gdy omówiliśmy teorię dziedziczenia i słowo kluczowe „rozszerza”, wdrożyć ją w JavaScript.

Przykład:

classanimalName
konstruktor (nazwa)
Ten.AnimalName = nazwa;

obecny()
return'name: ' + to.nazwa zwierząt;


ClassaniMalextendendendsanimalName
konstruktor (nazwa, ilość)
super (nazwa);
Ten.Ilość = ilość;

Whatanimal ()
powrót.obecne () + „ilość:” + to.ilość;


Const zwierzę = nowe zwierzę („kurczak”, 5);
Alarm (zwierzę.Whatanimal ());

W tym przykładzie mamy klasę nadrzędną „AnimalName”, w której ustawiamy nazwę zwierzęcia. Ma metodę o nazwie „teraźniejszości ()”. Mamy inną klasę „zwierzę”, które rozszerza „nazwę Animal”. Oznacza to, że klasa „zwierząt” jest klasą dziecka i odziedziczy wszystkie metody „nazwy zwierzęcych”. Mamy metodę w klasie „Animal” o nazwie „Whatanimal ()”. W tym odziedziczymy metodę klasy „AnimalName” „obecność”, a następnie stworzyliśmy instancję klasy „zwierzęcych”. Teraz, gdy ostrzega funkcję WhataniMal (), będzie działać poprawnie.

Warto zauważyć, że użyliśmy słowa kluczowego super () w celu odniesienia się do klasy nadrzędnej w powyższym przykładzie. Kiedy nazywamy metodę super (), faktycznie nazywamy konstruktor klasy nadrzędnej i możemy uzyskać dostęp do wszystkich metod i właściwości rodzica.

Wykorzystanie gettera i settera w dziedzictwie

Kiedy używamy zajęć i dziedzictwa, prawie niemożliwe jest nie korzystanie z zdobywców i setterów. Bardzo pomocne jest odzyskanie lub aktualizacja właściwości przed zwrotem lub ustawieniem tych właściwości.

Słowo kluczowe „Get” służy do pobierania lub uzyskania właściwości. Słowo kluczowe „Ustaw” służy do aktualizacji lub ustawiania jakiejś właściwości.

Na przykład:

classanimalName
konstruktor (nazwa)
Ten._animalName = nazwa;

getanimalName ()
powrót._animalName;

set setanimalName (NAM)
Ten._animalName = nam;

obecny()
return'name: ' + to._animalName;


ClassaniMalextendendendsanimalName
konstruktor (nazwa, ilość)
super (nazwa);
Ten.Ilość = ilość;

Whatanimal ()
powrót.GetanimalName;


const zwierzę = nowe zwierzę („kurczak”, 5);
Alarm (zwierzę.Whatanimal ());

W tym przykładzie użyliśmy postaci podkreślenia, ponieważ chcieliśmy oddzielić getter/setter od faktycznego atrybutu/właściwości w celu lepszego zrozumienia. Ten przykład jest identyczny z poprzednim, z tym wyjątkiem, że klasa „AnimalName” ma teraz getter i setter. Odzyskamy nazwę zwierząt z klasy nadrzędnej za pomocą metody GET, która jest „GetanimalName”.

Możemy również ustawić właściwość w ten sam sposób, dodając tylko jedną linię za pomocą powyższego kodu.

classanimalName
konstruktor (nazwa)
Ten._animalName = nazwa;

getanimalName ()
powrót._animalName;

set setanimalName (NAM)
Ten._animalName = nam;

obecny()
return'name: ' + to._animalName;


ClassaniMalextendendendsanimalName
konstruktor (nazwa, ilość)
super (nazwa);
Ten.Ilość = ilość;

Whatanimal ()
powrót.GetanimalName;


const zwierzę = nowe zwierzę („kurczak”, 5);
zwierzę.setanimalName = "cow";
Alarm (zwierzę.Whatanimal ());

Wyjście zostanie teraz zaktualizowane do „krów”.

Wniosek

Dziedziczenie jest jedną z podstawowych pojęć programowania obiektowego, a definicję dziedziczenia można zdefiniować jako gdy metody i atrybuty z klasy nadrzędnej lub podstawowej zostaną skopiowane/odziedziczone na klasę dziecięcą lub pochodną i można je osiągnąć przy użyciu słowa kluczowego rozszerza W JavaScript.

Jeśli dokładnie przeczytasz ten artykuł, jestem całkiem pewien, że masz pojęcie, jak użyć słowa kluczowego rozszerza w dostępie do metod i atrybutów klasy nadrzędnej w JavaScript. Wyjaśniliśmy dziedziczenie, rozszerzyliśmy słowo kluczowe, ustawiliśmy słowo kluczowe, pobierz słowo kluczowe i która przeglądarka obsługuje rozszerzenie słowa kluczowego. Prototypowe dziedziczenie, jak stwierdzono na początku tego artykułu, jest przestarzałe i złożone. Rozszerzenie jest prostsze i podobne do innych języków, takich jak Java, C ++ itp.