Introduktion till klasser och objekt i JavaScript

Nu ska vi ägna oss åt att studera OOP i JavaScript. Låt oss titta på ett exempel från verkliga livet, och sedan överföra det till JavaScript.

Som exempel tar vi en bil. Den har hjul, färg, karosstyp, motorvolym och så vidare. Dessutom kan föraren ge den kommandon: åka, stanna, svänga höger, vänster etc.

Man kan säga att det finns en viss klass av bilar som besitter gemensamma egenskaper (alla har hjul och alla kan ges kommandon).

En specifik bil som står på gatan - det är en representant för denna klass, eller, med andra ord, ett objekt av denna klass. Alla objekt i denna klass har egenskaper: antal hjul, färg, karosstyp och metoder: åka, stanna, svänga höger, vänster.

Med andra ord är själva klassen en ritning, enligt vilken bilar tillverkas på fabriken. Objektet däremot är själva bilen, gjord enligt dessa ritningar.

I JavaScript skapas en klass med hjälp av nyckelordet class, efterföljt av namnet på denna klass. Låt oss skapa klassen Car:

class Car {
	// här kod, alltså JavaScript-ritningen för bilen
}

Låt oss nu ange i vår ritning att varje bil, skapad enligt denna ritning, kommer att ha en egenskap för färg och en egenskap för mängden bränsle.

För att göra detta, skriver vi inuti klassen egenskapen color och egenskapen fuel:

class Car {
	color; // bilens färg
	fuel;  // mängd bränsle
}

Låt oss nu skapa metoderna för vår klass. I JavaScript liknar metoder vanliga funktioner, men deklareras utan nyckelordet function.

Som nämnts ovan kan vår bil åka, den kan svänga, den kan stanna. Låt oss skapa motsvarande metoder i vår klass:

class Car {
	color; // bilens färg
	fuel;  // mängd bränsle
	
	// Kommando att åka:
	go() {
		// någon JavaScript-kod
	}
	
	// Kommando att svänga:
	turn() {
		// någon JavaScript-kod
	}
	
	// Kommando att stanna:
	stop() {
		// någon JavaScript-kod
	}
}

Vi har skapat ritningen för vår bil. Nu måste vi åka till fabriken och skapa ett objekt av denna klass (alltså en specifik bil).

I JavaScript görs detta med hjälp av nyckelordet new, varefter klassens namn skrivs:

new Car; // beordrar fabriken att tillverka en bil

Men om man bara skapar ett objekt av klassen - leder det inte till något (det är som att, till exempel, deklarera en array och inte spara den någonstans). Vi behöver en variabel för att lagra detta objekt.

Låt denna variabel heta myCar - låt oss skriva in det skapade objektet i den:

let myCar = new Car;

Efter att bilen har skapats kan man referera till dess egenskaper. Man kommer åt dem via en punkt. Låt oss ställa in egenskaperna för vårt objekt:

let myCar = new Car; // beordrar fabriken att tillverka en bil

myCar.color = 'red'; // målar den i röd färg
myCar.fuel = 50;     // fyller på bränsle

Klart, vår bil är skapad, målad och tankad. Nu kan vi ge den kommandon via bilens metoder.

Man kommer åt metoderna också via en punkt, men, till skillnad från egenskaper, följer man metodens namn med runda parenteser. Låt oss ge kommandon till vårt objekt:

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