Introduktion til klasser og objekter i JavaScript

Nu skal vi til at studere OOP i JavaScript. Lad os se på et eksempel fra livet, og derefter overføre det til JavaScript.

Som eksempel tager vi en bil. Den har hjul, farve, karosseritype, motorstørrelse og så videre. Derudover kan føreren give den kommandoer: køre, stoppe, dreje til højre, til venstre osv.

Man kan sige, at der findes en vis klasse af biler, der besidder fælles egenskaber (de har alle hjul, og til dem alle kan man give kommandoer).

En konkret bil, der står på gaden - er en repræsentant for denne klasse, eller med andre ord, et objekt af denne klasse. Alle objekter i denne klasse har egenskaber: antal hjul, farve, karosseritype og metoder: køre, stoppe, dreje til højre, til venstre.

Med andre ord er selve klassen en tegning, som biler bliver lavet efter på fabrikken. Objektet derimod - er selve bilen, lavet efter disse tegninger.

I JavaScript oprettes en klasse med nøgleordet class, efterfulgt af navnet på denne klasse. Lad os lave klassen Car:

class Car {
	// koden her, altså JavaScript-tegningen af bilen
}

Lad os nu angive i vores tegning, at enhver bil, lavet efter denne tegning, vil have en egenskab for farve og en egenskab for mængden af brændstof.

Til dette skriver vi indeni klassen egenskaben color og egenskaben fuel:

class Car {
	color; // bilens farve
	fuel;  // mængden af brændstof
}

Lad os nu lave metoderne for vores klasse. I JavaScript ligner metoder almindelige funktioner, men de erklæres uden nøgleordet function.

Som nævnt ovenfor kan vores bil køre, den kan dreje, den kan stoppe. Lad os lave de tilsvarende metoder i vores klasse:

class Car {
	color; // bilens farve
	fuel;  // mængden af brændstof
	
	// Kommandoen kør:
	go() {
		// en eller anden JavaScript-kode
	}
	
	// Kommandoen drej:
	turn() {
		// en eller anden JavaScript-kode
	}
	
	// Kommandoen stop:
	stop() {
		// en eller anden JavaScript-kode
	}
}

Vi har lavet tegningen af vores bil. Nu skal vi ud på fabrikken og lave et objekt af denne klasse (altså en konkret bil).

I JavaScript gøres dette med nøgleordet new, efterfulgt af klassenavnet:

new Car; // beordrer fabrikken til at lave en bil

Dog, hvis man blot opretter et objekt af klassen - fører det ikke til noget (det er det samme som f.eks. at erklære et array og ikke gemme det et sted). Vi har brug for en variabel til at opbevare dette objekt.

Lad denne variabel hedde myCar - lad os gemme det objekt, vi har oprettet, i den:

let myCar = new Car;

Efter oprettelsen af bilen kan man tilgå dens egenskaber. Tilgang til dem sker via et punktum. Lad os indstille egenskaberne for vores objekt:

let myCar = new Car; // beordrer fabrikken til at lave en bil

myCar.color = 'red'; // maler den i rød farve
myCar.fuel = 50;     // fylder brændstof på

Alt sammen, vores bil er oprettet, malet og tanket. Nu kan vi give den kommandoer via bilens metoder.

Tilgang til metoder sker også via et punktum, men i modsætning til egenskaber, skal man efter metodenavnet skrive runde parenteser. Lad os give kommandoer til vores objekt:

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