Dowiedz się, jak tworzyć klasy w JavaScript

W 2015 roku została wydana wersja ES6 języka programowania JavaScript. W tym wydaniu wprowadzono kilka ważnych aktualizacji języka i oficjalnie umieszczono go w kategorii języków programowania obiektowego pośród innych języków, takich jak Java i C++.

Programowanie obiektowe koncentruje się na obiektach i operacjach, które można na nich wykonać. Jednak zanim będziesz mógł mieć jakiekolwiek obiekty, musisz mieć klasę.

Klasy JavaScript to jedna z funkcji zmieniających grę, która pojawiła się w wersji ES6 języka. Klasę można opisać jako plan, który służy do tworzenia obiektów.

W tym artykule samouczka dowiesz się, jak tworzyć i manipulować obiektami za pomocą klas JavaScript.

Struktura klas JavaScript

Tworząc klasę w JavaScript, zawsze będziesz potrzebować jednego podstawowego składnika — klasa słowo kluczowe. Prawie każdy inny aspekt klasy JavaScript nie jest wymagany do jej pomyślnego wykonania.

Klasa JavaScript wykona się naturalnie, jeśli nie zostanie podany konstruktor (klasa po prostu utworzy pusty konstruktor podczas wykonywania). Jednakże, jeśli klasa JavaScript jest tworzona z konstruktorami i innymi funkcjami, ale nie jest używane żadne słowo kluczowe class, ta klasa nie będzie wykonywalna.

ten klasa słowo kluczowe (które zawsze powinno być pisane małymi literami) jest koniecznością w strukturze klas JavaScript. Poniższy przykład to ogólna składnia klasy JavaScript. Składnia klas JavaScript jest poniżej:

klasa Nazwa Klasy{
//klasa ciała
}

Tworzenie klasy w JavaScript

W programowaniu klasę można postrzegać jako uogólnioną jednostkę, która służy do tworzenia wyspecjalizowanego obiektu. Na przykład w środowisku szkolnym uogólnioną jednostką (klasą) mogą być uczniowie, a obiektem uczniów może być John Brown. Ale zanim utworzysz obiekt, musisz znać dane, które będzie on przechowywał i tutaj w grę wchodzą konstruktory JavaScript.

Używanie konstruktorów w klasach JavaScript

Konstruktor jest niezbędny w procesie tworzenia klasy z kilku powodów; inicjuje stan obiektu (poprzez jego atrybuty) i jest wywoływana automatycznie, gdy nowy obiekt jest tworzony (definiowany i tworzony).

Korzystanie z przykładu konstruktora

Poniżej zobaczysz przykład konstruktora z wyjaśnieniem, co to znaczy.

klasa uczeń{
konstruktor (imię, nazwisko, data rozpoczęcia){
to.imię = imię;
this.lastName = nazwisko;
this.DataRozpoczęcia = DataRozpoczęcia;
}
}

Powyższy kod przedstawia ważny aspekt konstruktora klas JavaScript; w przeciwieństwie do innych języków, takich jak Java i C++, konstruktor JavaScript nie używa nazwy klasy do tworzenia konstruktora. Wykorzystuje konstruktor słowo kluczowe, jak widać w powyższym przykładzie.

Związane z: Dowiedz się, jak tworzyć klasy w Javie

ten konstruktor w powyższym przykładzie przyjmuje trzy parametry i używa ten słowo kluczowe, aby przypisać parametry do bieżącej instancji klasy. Może się to wydawać nieco mylące, ale musisz zrozumieć, że klasa może być postrzegana jako plan, który służy do tworzenia wielu domów.

Każdy wybudowany dom może być wtedy postrzegany jako obiekt tej klasy. Chociaż każdy z tych domów jest tworzony według tego samego planu, można je rozróżnić po określonym położeniu geograficznym lub osobach, które są ich właścicielami.

ten ten słowo kluczowe służy do odróżnienia każdego obiektu utworzonego przez klasę. Zapewnia to przechowywanie i przetwarzanie prawidłowych danych dla każdego obiektu utworzonego przy użyciu tej samej klasy.

Tworzenie obiektu w JavaScript

Konstruktory są ważne w języku takim jak JavaScript, ponieważ oznaczają liczbę atrybutów, jakie powinien posiadać obiekt określonej klasy. Niektóre języki wymagają zadeklarowania atrybutu (zmiennej), zanim będzie można go użyć w konstruktorze lub innych metodach. Jednak tak nie jest w przypadku JavaScript.

Związane z: Jak zadeklarować zmienne w JavaScript

Patrząc na konstruktor klasy ucznia powyżej, można zauważyć, że obiekt tej klasy będzie miał trzy atrybuty.

Tworzenie przykładu obiektu

Poniżej zobaczysz przykład tworzenia obiektu w JavaScript.

//utwórz nowy obiekt
const john = new Student('Jan', 'Brązowy', '2018');

Powyższy kod używa Student klasy, aby utworzyć obiekt.

Tworząc obiekt klasy, musisz użyć Nowy słowo kluczowe, po którym następuje nazwa klasy i wartości, które chcesz przypisać do odpowiednich atrybutów. Teraz masz nowego ucznia o imieniu John, nazwisku Brown i dacie rozpoczęcia 2018. Masz również zmienną stałą: Jan. Ta zmienna jest ważna, ponieważ umożliwia korzystanie z tworzonego obiektu.

Bez Jan zmienna nadal będziesz w stanie utworzyć nowy obiekt za pomocą Student klasy, ale wtedy nie będzie możliwości uzyskania dostępu do tego obiektu i używania go z różnymi metodami klasy.

Używanie metod w klasach JavaScript

Metoda jest funkcją klasy, która służy do wykonywania operacji na obiektach utworzonych z tej klasy. Dobrą metodą dodania do klasy uczniów jest generowanie raportu na temat każdego ucznia.

Przykład tworzenia metod klas

Poniżej znajduje się przykład tworzenia metod klasowych w JavaScript.

klasa uczeń{
konstruktor (imię, nazwisko, data rozpoczęcia){
to.imię = imię;
this.lastName = nazwisko;
this.DataRozpoczęcia = DataRozpoczęcia;
}
// metoda raportu
raport(){
return `${this.firstName} ${this.lastName} zaczęła uczęszczać do tej instytucji w ${this.startDate}`
}
}

Powyższa klasa zawiera metodę, która wygeneruje raport na temat każdego ucznia utworzonego za pomocą Student klasa. Aby użyć raport() metody będziesz musiał użyć istniejącego obiektu klasy, aby wykonać proste wywołanie funkcji.

Dzięki powyższemu „stwórz przykład obiektu” powinieneś mieć obiekt o Student klasa przypisana do zmiennej Jan. Za pomocą Jan, możesz teraz pomyślnie zadzwonić do raport() metoda.

Przykład użycia metod klas

Poniżej znajduje się przykład użycia metod klasowych w JavaScript.

//utwórz nowy obiekt
const john = new Student('Jan', 'Brązowy', '2018');
//wywołanie metody report i zapisanie jej wyniku w zmiennej
niech wynik = jan.raport();
//wypisanie wyniku do konsoli
console.log (wynik);

Powyższy kod używa Studenci class, aby wytworzyć w konsoli następujące dane wyjściowe:

John Brown zaczął uczęszczać do tej instytucji w 2018 roku

Używanie metod statycznych w klasach JavaScript

Metody statyczne są unikalne, ponieważ są jedynymi metodami w klasie JavaScript, których można używać bez obiektu.

Z powyższego przykładu nie możesz użyć raport() metoda bez obiektu klasy. Dzieje się tak, ponieważ raport() Metoda polega na atrybutach obiektu w celu uzyskania pożądanego rezultatu. Aby jednak użyć metody statycznej, wystarczy nazwa klasy, która przechowuje metodę.

Tworzenie przykładu metody statycznej

Poniżej znajduje się przykład statycznej metody dla JavaScript.

klasa uczeń{
konstruktor (imię, nazwisko, data rozpoczęcia){
to.imię = imię;
this.lastName = nazwisko;
this.DataRozpoczęcia = DataRozpoczęcia;
}
// metoda raportu
raport(){
return `${this.firstName} ${this.lastName} zaczęła uczęszczać do tej instytucji w ${this.startDate}`
}
//metoda statyczna
statyczna data zakończenia (data rozpoczęcia){
powrót DataRozpoczęcia + 4;
}
}

Ważną rzeczą do zapamiętania z powyższego przykładu jest to, że każda metoda statyczna zaczyna się od statyczny słowo kluczowe.

Korzystanie z przykładu metody statycznej

Poniżej znajduje się przykład użycia metody statycznej w JavaScript.

//wywołanie metody statycznej i wydrukowanie jej wyniku na konsoli
console.log (Student.endDate (2018));

Powyższy wiersz kodu używa Studenci class, aby wytworzyć w konsoli następujące dane wyjściowe:

2022

Tworzenie klasy JavaScript jest łatwe

Jest kilka rzeczy, o których musisz pamiętać, jeśli chcesz utworzyć klasę JavaScript i utworzyć z niej jeden lub więcej obiektów:

• Klasa JavaScript musi mieć klasa słowo kluczowe.
• Konstruktor JavaScript wskazuje liczbę wartości, jakie może mieć obiekt.
• Ogólnych metod klas nie można używać bez obiektu.
• Metody statyczne mogą być używane bez obiektu.

ten konsola.Dziennik() Metoda jest używana w tym artykule w celu dostarczenia wyników użycia zarówno ogólnych, jak i statycznych metod w klasie JavaScript. Ta metoda jest przydatnym narzędziem dla każdego programisty JavaScript, ponieważ pomaga w procesie debugowania.

Zapoznanie się z konsola.log() Metoda jest jedną z najważniejszych rzeczy, które możesz zrobić jako programista JavaScript.

Najlepsza ściągawka JavaScript

Uzyskaj szybkie przypomnienie o elementach JavaScript dzięki tej ściągawce.

Czytaj dalej

O autorze