Zajęcia OOP w JavaScript | Wyjaśnione

Zanim ES6, "prototypy”Zastosowano do symulacji klas w JavaScript, gdzie dodatkowe właściwości można powiązać z prototypem za pomocą dziedzictwa. Kiedy nowa i ulepszona wersja ES5 został wprowadzony, znany jako ES6, Zajęcia JavaScript zostały do ​​tego dodane.

W ES6 zajęcia są uważane za podstawowy element JavaScript i ma wiele Prostsze I podatne na błędy składnia w porównaniu z prototypami. Podobnie do programowania zorientowanego na obiekt (OOP), klasa JavaScript zawiera metodę konstruktora, niektóre specyficzne właściwości, metody i obiekty danego typu klasy.

Ten post wyjaśnia Zajęcia OOP W JavaScript za pomocą odpowiednich przykładów. A więc zacznijmy!

Zajęcia OOP w JavaScript

Jak wspomniano wcześniej, klasy JavaScript są wprowadzane ES6. Oferują zwięzły sposób deklarowania klasy, wykorzystując składnię podobną do tego, czego używamy w OOP.

W JavaScript możesz użyć „klasa”Słowo kluczowe do zdefiniowania zajęć. Dodaje cukier syntaktyczny (dobry rodzaj cukru) do istniejącego wzoru dziedziczenia prototypu.

Składnia klas OOP w JavaScript

Aby utworzyć klasę OOP w JavaScript, musisz postępować zgodnie z podaną składnią:

klasa klasowa
Constructor () …

Tutaj, "klasa”To słowo kluczowe wykorzystane do tworzenia klasy. Ponadto klasa OOP musi mieć metodę o nazwie „konstruktor()".

Przykład: Utwórz klasę OOP w JavaScript

Zdefiniujemy klasę o nazwie „Osoba”, Który ma dwie nieruchomości:„nazwa" I "wiek”:

Osoba klasowa
Constructor ()
Ten.name = „Alex”;
Ten.Wiek = 25;

Aby wykorzystać klasę osoby, musimy stworzyć obiekt Lub instancja określonej klasy:

niech osobowość1 = nowa osoba ();

Teraz, "osoba 1„Obiekt może uzyskać dostęp do właściwości„Osoba" klasa:

konsola.dziennik (osoba 1.Imię i nazwisko + „” + osobowość1.wiek);

Jak wspomniano wcześniej, klasa OOP w JavaScript musi zawierać konstruktor. Czy chcesz dowiedzieć się więcej o konstruktorach w JavaScript? Jeśli tak, postępuj zgodnie z sekcją poniżej.

Konstruktory klas OOP w JavaScript

Konstruktor to metoda wywołana podczas tworzenia instancji klasy OOP. Służy również do inicjalizacji obiektów w klasie. Jednak JavaScript automatycznie utworzy i wykona pusty konstruktor, jeśli nie zdefiniowałeś żadnej metody konstruktora dla klasy OOP.

Rodzaje konstruktorów klas OOP w JavaScript

W JavaScript istnieją dwa typy konstruktorów:

• Domyślny konstruktor
• Sparametryzowany konstruktor

Następna sekcja krótko wyjaśni domyślny i sparametryzowany konstruktor i ich użycie w JavaScript.

Domyślny konstruktor klas OOP w JavaScript

Możesz także wyraźnie zdefiniować domyślny konstruktor bez argumentów, jeśli chcesz wykonać jakąkolwiek konkretną operację podczas tworzenia obiektu klasy OOP.

Składnia domyślnego konstruktora w JavaScript

klasa klasowa
konstruktor()
// Ciało domyślnego konstruktora

Przykład: Domyślny konstruktor klas OOP w JavaScript

W poniższym przykładzie zdefiniujemy domyślny konstruktor dla „Osoba" klasa. Zgodnie z definicją „konstruktor()„Metoda, ilekroć„Osoba„Obiekt klasowy jest tworzony, zainicjuje jego„nazwa„Własność do„Alex", I "wiek„Nieruchomość jako„25."

Osoba klasowa
Constructor ()
Ten.name = „Alex”;
Ten.Wiek = 25;


const person1 = nowa osoba ();
konsola.Log („Nazwa:” + osobowość1.nazwa);
konsola.Log („wiek:” + osobowość1.wiek);

Wykonanie danego programu utworzy „osoba 1„Obiekt„Osoba„Klasa OOP za pomocą domyślnego konstruktora. Domyślny konstruktor zainicjuje następnie określone właściwości dla „osoba 1" obiekt. Wreszcie „„konsola.dziennik()„Metoda wydrukuje wartości przechowywane w„osoba 1.nazwa" I "osoba 1.wiek" nieruchomości:

W klasie OOP wykorzystanie domyślnego konstruktora jest przydatne, gdy chcesz zainicjować właściwości wszystkich utworzonych obiektów o tej samej wartości. Ale co, jeśli musisz przypisać niektóre unikalne wartości do obiektu podczas tworzenia? W JavaScript możesz osiągnąć tę funkcjonalność za pomocą „Sparametryzowany konstruktor".

Sparametryzowany konstruktor klas OOP w JavaScript

Konstruktor, który zawiera parametry, jest znany jako „Sparametryzowany konstruktor". Ten typ konstruktora jest używany głównie, gdy chcesz zainicjować właściwości klasy OOP JavaScript z pewnymi określonymi wartościami.

Składnia sparametryzowanego konstruktora w JavaScript

klasa klasowa
Konstruktor (parametr1, parametr2…, parametern)
// korpus sparametryzowanego konstruktora

Sparametryzowany konstruktor akceptuje parametry przekazane jako „argumenty”Podczas tworzenia obiektu klasy OOP.

Przykład: Sparametryzowany konstruktor dla klas OOP w JavaScript

Utworzymy sparametryzowany konstruktor „dla„Osoba„Klasa, która inicjuje właściwości z wartościami przekazanymi jako argumenty:

Osoba klasowa
konstruktor (nazwa, wiek)
Ten.Nazwa = nazwa;
Ten.wiek = wiek;

W poniższym kodzie „osoba 1„Obiekt„Osoba„Klasa zostanie utworzona za pomocą sparametryzowanego konstruktora, gdzie„Max”Jest przekazywany jako„nazwa„Wartość nieruchomości i„ ”25”Argument reprezentuje wartość„wiek" nieruchomość:

const person1 = nowa osoba („max”, 25);
konsola.Log („Nazwa:” + osobowość1.nazwa);
konsola.Log („wiek:” + osobowość1.wiek);

Poniższe wyjście oznacza, że ​​pomyślnie stworzyliśmy „osoba 1„Obiekt o określonych wartościach właściwości za pomocą sparametryzowanego konstruktora:

Rozmawialiśmy o tworzeniu klas OOP, ich powiązanych obiektach i definiowaniu domyślnych i sparametryzowanych konstruktorów. Teraz pójdziemy naprzód i omówimy kolejny krytyczny element klasy OOP, który jest „”metoda".

Metody w klasach OOP w JavaScript

Metody są rodzajem funkcji powiązanej z określonymi klasami OOP JavaScript. Działają również jako funkcja członka po zdefiniowaniu w klasie i mogą być używane do dostępu do właściwości klasy.

Składnia metod klas OOP w JavaScript

klasa klasowa
MethodName
// Ciało nazwy metody

Notatka: Nazwa metody klasy OOP musi być w małe litery.

Przykład: Metody w klasach OOP w JavaScript

W tym samym "Osoba„Klasa, zdefiniujemy„ ”displayInfo ()„Metoda, która zwraca wartości„nazwa" I "wiek„Właściwości dla określonego obiektu:

displayInfo ()
return („nazwa:” + to.nazwa + „wiek:” + to.wiek);

Po zrobieniu tego stworzymy obiekt „Osoba" klasa:

const person1 = nowa osoba („max”, 25);

Następnie powołamy się na „displayInfo ()”, Wykorzystując„osoba 1" obiekt:

osoba 1.displayInfo ();

„„displayInfo ()„Metoda zwróci„nazwa" I "wiek„Wartości„ „osoba 1" obiekt:

Opracowaliśmy podstawowe informacje związane z klasą OOP w JavaScript.

Wniosek

Używając "klasa„Słowo kluczowe, możesz zdefiniować Klasa OOP W JavaScript. W ES6 wprowadzono klasy JavaScript w celu dodania cukru składniowego (dobry rodzaj cukru) do istniejącego wzorca dziedziczenia prototypu. Podobnie jak OOP, klasa JavaScript zawiera metodę konstruktora, niektóre specyficzne właściwości, metody i obiekty danego typu klasy. Ten napis wyjaśnił Zajęcia OOP W JavaScript za pomocą odpowiednich przykładów.