Dowiedz się, jak tworzyć klasy w JavaScript

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ę.



jak zmienić ikonę pliku windows 10

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 jest ogólną składnią klasy JavaScript. Składnia klas JavaScript jest poniżej:



class ClassName{
//class body
}

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.

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
}

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 budowniczy słowo kluczowe, jak widać w powyższym przykładzie.

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

ten budowniczy 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.

Powiązane: Jak deklarować zmienne w JavaScript

Patrząc na konstruktor klas 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.

//create a new object
const john = new Student('John', 'Brown', '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.

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${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 przykładowi tworzenia 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.

//create a new object
const john = new Student('John', 'Brown', '2018');
//calling the report method and storing its result in a variable
let result = john.report();
//printing the result to the console
console.log(result);

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

John Brown started attending this institution in 2018

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.

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
//static method
static endDate(startDate){
return startDate + 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.

//calling a static method and printing its result to the console
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.

Udział Udział Ćwierkać E-mail Najlepsza ściągawka JavaScript

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

Czytaj dalej Powiązane tematy
  • Programowanie
  • Programowanie
  • JavaScript
  • Wskazówki dotyczące kodowania
  • Poradniki kodowania
O autorze Kadeisha Kean(21 opublikowanych artykułów)

Kadeisha Kean jest programistą zajmującym się pełnymi stosami oprogramowania i pisarzem technicznym/technologicznym. Ma wyraźną umiejętność upraszczania niektórych z najbardziej złożonych koncepcji technologicznych; produkcja materiału, który może być łatwo zrozumiały dla każdego nowicjusza w dziedzinie technologii. Pasjonuje się pisaniem, tworzeniem ciekawego oprogramowania i podróżowaniem po świecie (poprzez filmy dokumentalne).

Więcej od Kadeishy Kean

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować