JavaScript to język wieloparadygmatowy, który umożliwia pisanie programów zgodnych ze stylami programowania funkcjonalnymi, obiektowymi i imperatywnymi.
Aby wspierać wzorce obiektowe, JavaScript ma klasy. Ponieważ ich zrozumienie jest kluczowe, ten artykuł jest przewodnikiem po tym, czym są klasy JavaScript i jak z nich korzystać.
Spis treści:
Czym są klasy w JavaScript?
W programowaniu obiektowym modelujemy systemy jako grupy obiektów, które oddziałują ze sobą. Aby funkcjonować, obiekty przechowują dane we właściwościach i wykonują akcje zdefiniowane jako ich metody. Klasa definiuje, jakie właściwości i metody mają obiekty tego samego typu. Dlatego klasy są projektami obiektów.
Terminologie używane na zajęciach
Aby mieć pewność, że jesteśmy na tej samej stronie, poniżej znajduje się opis klas wraz z kluczowymi terminami, których będziemy używać w tym artykule. Jeśli znasz już programowanie obiektowe, możesz przejść do następnej sekcji.
❇️ Klasa to projekt obiektu. Zapewnia szablon, z którego można wykonać obiekty tego typu. Tworzenie obiektu na podstawie szablonu dostarczonego przez klasę nazywa się tworzeniem instancji.
❇️ Członkiem klasy jest wszystko, co należy do klasy. Istnieją dwa rodzaje członków klasy – metody i właściwości.
❇️ Właściwość to członek klasy, którego głównym celem jest przechowywanie wartości. Mogą to być proste wartości, takie jak liczby i ciągi znaków. Mogą to być również złożone obiekty i tablice.
❇️ Niektóre właściwości są dostępne tylko wewnątrz klasy i trafnie nazywane są właściwościami prywatnymi. Niektóre z nich są dostępne zarówno w klasie, jak i poza nią. Takie właściwości nazywane są właściwościami publicznymi.
❇️ Metoda to funkcja zdefiniowana wewnątrz klasy. Należy zatem do klasy i ma dostęp do właściwości publicznych i prywatnych. Podobnie jak właściwości, mamy również metody publiczne i metody prywatne.
❇️ Istnieją metody zapewniające interfejs dla kodu spoza klasy w celu interakcji z właściwościami wewnątrz klasy. Robią to dwie grupy metod: pobierające i ustawiające. Gettery pobierają wartości właściwości klasy, natomiast settery ustawiają wartości właściwości klasy.
❇️ Niektórzy członkowie są statyczni. Oznacza to, że są one dostępne tylko w klasie i nie można uzyskać do nich dostępu w instancjach klasy.
Natomiast niektóre elementy klas nie są statyczne, co oznacza, że można uzyskać do nich dostęp tylko w instancjach klas. Zanim będziesz mógł uzyskać dostęp do niestatycznego elementu członkowskiego, musisz utworzyć instancję klasy.
Kiedy tworzysz instancję klasy, wywoływana jest specjalna metoda w celu ustawienia właściwości instancji. Ta metoda nazywa się funkcją konstruktora.
Wyjaśnienie tworzenia instancji klasy
Używamy słowa kluczowego new i nazwy klasy, aby utworzyć instancję klasy w JavaScript. Stwórzmy na przykład instancję klasy Array.
const myArr = new Array()
Tworzenie klas w JavaScript
W tej sekcji omówimy tworzenie klasy, która implementuje wszystkie koncepcje omówione w artykule Sekcja Terminologii. Zrobimy to w serii przykładów, gdzie każdy przykład opiera się na poprzednich.
Deklarowanie pustej klasy
Aby zadeklarować klasę w JavaScript, używamy słowa kluczowego class i nadajemy klasie nazwę. Następnie definiujemy ciało klasy. Ciało jest ujęte w nawiasy klamrowe i mieści wszystkich członków klasy.
Oto przykładowa deklaracja klasy z pustą treścią:
class Dog {
}
Teraz możesz utworzyć instancję klasy w następujący sposób i wydrukować ją.
const pet = new Dog; console.log(pet);
Tworzenie właściwości publicznych
Właściwości publiczne są definiowane za pomocą identyfikatora i wartości opcjonalnej.
class Dog {
name = "Roy";
age;
}
Tutaj zdefiniowaliśmy imię z wartością tekstową i wiek bez wartości.
const pet = new Dog(); console.log(pet.name); console.log(pet.age);
Definiowanie metod publicznych
Możemy dodawać metody do naszej klasy wewnątrz jej ciała. Metodę definiujemy w taki sam sposób, w jaki definiujemy funkcję. Pomijamy jednak słowo kluczowe Function.
class Dog {
name = "Roy";
age;
walk () {
console.log("Walking");
}
}
W powyższym przykładzie zdefiniowaliśmy metodę spaceru. Każda instancja klasy Animal będzie miała tę metodę.
const pet = new Dog(); pet.walk();
Dostęp do właściwości z metod
W JavaScript zazwyczaj uzyskujemy dostęp do właściwości obiektu za pomocą operatora kropki. Na przykład, jeśli mamy obiekt o nazwie osoba i chcemy uzyskać dostęp do właściwości name, zrobimy to w następujący sposób.
person.name
Jeśli jednak chcemy uzyskać dostęp do właściwości z poziomu obiektu, używamy słowa kluczowego this zamiast nazwy obiektu. Oto przykład:
this.name
Słowo kluczowe this odwołuje się do obiektu. Jeśli więc chcielibyśmy uzyskać dostęp do właściwości klasy z poziomu metod klasy, użylibyśmy tej składni.
Tworzenie własności prywatnych
Załóżmy, że chcemy, aby zdefiniowane wcześniej właściwości name i age były prywatne. Przedefiniowalibyśmy klasę w następujący sposób:
class Dog {
#name = "Roy";
#age;
walk () {
console.log("Walking");
}
}
Jak widać, właściwości prywatne są określane za pomocą znaków funta. Próbując uzyskać do nich dostęp, napotkasz błędy.
const dog = new Dog(); dog.#name
Tworzenie metod pobierających i ustawiających
Teraz właściwości name i age klasy są prywatne. Dlatego dostęp do nich można uzyskać tylko za pomocą metod znajdujących się wewnątrz klasy.
Jeśli chcemy umożliwić kodowi spoza klasy dostęp do tych właściwości, definiujemy metody pobierające i ustawiające. Zróbmy to dla właściwości name.
class Dog {
#name = "Roy";
#age;
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
walk () {
console.log("Walking");
}
}
Mając zdefiniowaną powyżej klasę, możesz ustawić nazwę i wyświetlić ją za pomocą poniższego kodu:
const pet = new Dog(); // Setting the name pet.name = "Rex"; // Getting the name console.log(pet.name);
Tworzenie metod prywatnych
Podobnie jak właściwości prywatne, metody prywatne są poprzedzone znakiem funta. Dlatego zadeklarowanie metody prywatnej wyglądałoby następująco:
class Dog {
#name = "Roy";
#age;
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Jeśli spróbujesz uzyskać dostęp do tych metod spoza klasy, nie zadziała.
const pet = new Dog(); pet.#increaseAge();
Tworzenie metody konstruktora
Można także zdefiniować metodę konstruktora. Ta metoda zostanie automatycznie wywołana za każdym razem, gdy utworzysz instancję nowej klasy. Do inicjowania właściwości można użyć metody konstruktora. W tym przykładzie zainicjujemy wiek i nazwę dowolnymi argumentami podanymi przez użytkownika podczas tworzenia instancji.
class Dog {
#name;
#age;
constructor (name = "Dog", age = 0) {
this.#name = name;
this.#age = age;
}
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Kiedy tworzymy instancję naszej klasy, możemy podać imię i wiek.
const pet = new Dog('Roy', 3);
console.log(pet.name);
Tworzenie właściwości i metod statycznych
Jak wspomniano, dostęp do elementów statycznych można uzyskać bez konieczności tworzenia instancji klasy. W poniższym przykładzie utworzymy statyczną właściwość i metodę.
class Dog {
#name;
#age;
static genus = "Canis";
constructor (name = "Dog", age = 0) {
this.#name = name;
this.#age = age;
}
static bark() {
console.log("Woof");
}
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Teraz możesz uzyskać dostęp do właściwości i metody statycznej bez tworzenia instancji.
console.log(Dog.genus); Dog.bark();
Dziedzictwo
Klasy mogą dziedziczyć właściwości z innych klas. Klasa, która dziedziczy elementy z innej klasy, nazywana jest nadklasą, natomiast klasa, z której dziedziczy elementy, jest klasą bazową lub podklasą.
Aby utworzyć nadklasę w JavaScript, używamy słowa kluczowego Extends. Oto przykład, w którym dziedziczymy z klasy Dog.
class Rottweiler extends Dog {
constructor (name, age) {
super(name, age);
this.breed = 'rottweiler';
}
}
Jak widać, klasa jest w dużej mierze taka sama jak wcześniej. Jednakże wewnątrz konstruktora wywołaliśmy superfunkcję. Słowo kluczowe super odwołuje się do konstruktora klasy bazowej. Dlatego wywołaliśmy konstruktor klasy bazowej wewnątrz naszej nadklasy, podając nazwę i wiek.
const myPet = new Rottweiler(); console.log(myPet);
Wniosek
W tym artykule omówiliśmy zajęcia. Omówiliśmy, czym one są, jakich członków mogą posiadać oraz różne klasyfikacje członków. Następnie zilustrowaliśmy to wszystko przykładami.
Następnie możesz przeczytać pytania do wywiadu dotyczącego programowania obiektowego.