Wprowadzenie do klas i obiektów w JavaScript

Teraz zajmiemy się nauką OOP w JavaScript. Przyjrzyjmy się przykładowi z życia, a następnie przenieśmy go na JavaScript.

Jako przykład weźmy samochód. Ma koła, kolor, typ nadwozia, pojemność silnika i tak dalej. Ponadto kierowca może wydawać mu komendy: jechać, zatrzymać się, skręcić w prawo, w lewo itp.

Można powiedzieć, że istnieje pewna klasa samochodów, posiadająca wspólne właściwości (wszystkie mają koła i wszystkim można wydawać komendy).

Konkretny samochód, stojący na ulicy - to przedstawiciel tej klasy, lub, innymi słowy, obiekt tej klasy. Wszystkie obiekty tej klasy mają właściwości: liczbę kół, kolor, typ nadwozia oraz metody: jechać, zatrzymać się, skręcić w prawo, w lewo.

Innymi słowy sama klasa - to rysunek techniczny, według którego w fabryce robione są samochody. Obiekt zaś - to sam pojazd, zrobiony według tych rysunków.

W JavaScript klasa tworzona jest za pomocą słowa kluczowego class, po którym następuje nazwa tej klasy. Stwórzmy klasę Car:

class Car {
	// tutaj kod, czyli JavaScript-owy rysunek techniczny samochodu
}

Określmy teraz w naszym rysunku technicznym, że każdy samochód, stworzony według tego rysunku, będzie miał właściwość na kolor i właściwość na ilość paliwa.

Aby to zrobić, wewnątrz klasy napiszmy właściwość color i właściwość fuel:

class Car {
	color; // kolor samochodu
	fuel;  // ilość paliwa
}

Stwórzmy teraz metody naszej klasy. W JavaScript metody są podobne do zwykłych funkcji, tylko deklaruje się je bez słowa kluczowego function.

Jak już wspomniano powyżej, nasz samochód może jechać, może skręcać, może się zatrzymywać. Stwórzmy odpowiednie metody w naszej klasie:

class Car {
	color; // kolor samochodu
	fuel;  // ilość paliwa
	
	// Komenda jechać:
	go() {
		// jakiś JavaScriptowy kod
	}
	
	// Komenda skręcać:
	turn() {
		// jakiś JavaScriptowy kod
	}
	
	// Komenda zatrzymać się:
	stop() {
		// jakiś JavaScriptowy kod
	}
}

Stworzyliśmy rysunek techniczny naszego samochodu. Teraz trzeba udać się do fabryki i zrobić obiekt tej klasy (czyli konkretny samochód).

W JavaScript robi się to za pomocą słowa kluczowego new, po którym pisze się nazwę klasy:

new Car; // każemy fabryce zrobić samochód

Jednakże, jeśli po prostu stworzyć obiekt klasy - to do niczego nie prowadzi (to tak samo, jak, na przykład, zadeklarować tablicę i nigdzie jej nie zapisać). Potrzebujemy zmiennej do przechowywania tego obiektu.

Niech ta zmienna nazywa się myCar - zapiszmy w niej stworzony przez nas obiekt:

let myCar = new Car;

Po stworzeniu samochodu można odwoływać się do jego właściwości. Odwołanie do nich następuje przez kropkę. Ustawmy właściwości naszego obiektu:

let myCar = new Car; // każemy fabryce zrobić samochód

myCar.color = 'red'; // malujemy na czerwony kolor
myCar.fuel = 50;     // zatankowujemy paliwo

Wszystko, nasz samochód stworzony, pomalowany i zatankowany. Teraz możemy wydawać mu komendy poprzez metody tego samochodu.

Odwołanie do metod również następuje przez kropkę, ale, w przeciwieństwie do właściwości, po nazwie metody należy pisać okrągłe nawiasy. Pokomenderujmy naszym obiektem:

myCar.go();
myCar.turn();
myCar.stop();