Introduksjon til klasser og objekter i JavaScript

Nå skal vi sette i gang med å lære om OOP i JavaScript. La oss se på et eksempel fra virkeligheten, og deretter overføre det til JavaScript.

Som et eksempel tar vi en bil. Den har hjul, farge, karosseritype, motorvolum og så videre. I tillegg kan sjåføren gi den kommandoer: kjøre, stoppe, svinge til høyre, til venstre, etc.

Man kan si at det finnes en viss klasse av biler som har felles egenskaper (alle har hjul og alle kan gis kommandoer).

En spesifikk bil som står på gata - er en representant for denne klassen, eller med andre ord, et objekt av denne klassen. Alle objekter i denne klassen har egenskaper: antall hjul, farge, karosseritype og metoder: kjøre, stoppe, svinge til høyre, til venstre.

Med andre ord er selve klassen en tegning som brukes på fabrikken for å lage biler. Et objekt er selve bilen, laget etter disse tegningene.

I JavaScript opprettes en klasse med nøkkelordet class, etterfulgt av navnet på denne klassen. La oss lage klassen Car:

class Car {
	// koden her, det vil si JavaScript-tegningen av bilen
}

La oss nå spesifisere i tegningen vår at enhver bil, opprettet etter denne tegningen, vil ha en egenskap for farge og en egenskap for mengden drivstoff.

For å gjøre dette, skriver vi inn egenskapen color og egenskapen fuel inni klassen:

class Car {
	color; // bilens farge
	fuel;  // mengde drivstoff
}

La oss nå lage metodene til klassen vår. I JavaScript ligner metoder på vanlige funksjoner, bare de deklareres uten nøkkelordet function.

Som nevnt tidligere, kan bilen vår kjøre, den kan svinge, den kan stoppe. La oss lage tilsvarende metoder i klassen vår:

class Car {
	color; // bilens farge
	fuel;  // mengde drivstoff
	
	// Kommandoen kjøre:
	go() {
		// noen JavaScript-koder
	}
	
	// Kommandoen svinge:
	turn() {
		// noen JavaScript-koder
	}
	
	// Kommandoen stoppe:
	stop() {
		// noen JavaScript-koder
	}
}

Vi har laget tegningen av bilen vår. Nå må vi dra til fabrikken og lage et objekt av denne klassen (det vil si en spesifikk bil).

I JavaScript gjøres dette med nøkkelordet new, etterfulgt av navnet på klassen:

new Car; // kommanderer fabrikken om å lage en bil

Imidlertid, hvis man bare oppretter et objekt av klassen - vil det ikke føre til noe (det er det samme som for eksempel å deklarere en array og ikke lagre den noe sted). Vi trenger en variabel for å lagre dette objektet.

La denne variabelen hete myCar - la oss skrive det opprettede objektet vårt inn i den:

let myCar = new Car;

Etter at bilen er opprettet, kan man referere til dens egenskaper. Tilgang til dem skjer via et punktum. La oss sette egenskapene til objektet vårt:

let myCar = new Car; // kommanderer fabrikken om å lage en bil

myCar.color = 'red'; // maler den i rød farge
myCar.fuel = 50;     // fyller på drivstoff

Det er alt, bilen vår er opprettet, malt og fylt med drivstoff. Nå kan vi gi den kommandoer via bilens metoder.

Tilgang til metoder skjer også via et punktum, men i motsetning til egenskaper, skal man skrive runde parenteser etter metodenavnet. La oss gi kommandoer til objektet vårt:

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