Inleiding tot klassen en objecten in JavaScript

Nu gaan we ons bezighouden met het bestuderen van OOP in JavaScript. Laten we een voorbeeld uit het echte leven bekijken, en het daarna overbrengen naar JavaScript.

Laten we een auto als voorbeeld nemen. Hij heeft wielen, een kleur, een carrosserietype, een cilinderinhoud en zo verder. Bovendien kan de bestuurder hem commando's geven: rijden, stoppen, rechtsaf slaan, linksaf, enzovoort.

We kunnen zeggen dat er een bepaald klasse auto's bestaat, met gemeenschappelijke eigenschappen (ze hebben allemaal wielen en aan allemaal kunnen commando's worden gegeven).

Een specifieke auto, die op straat staat - is een vertegenwoordiger van deze klasse, of, met andere woorden, een object van deze klasse. Alle objecten van deze klasse hebben eigenschappen: aantal wielen, kleur, carrosserietype en methoden: rijden, stoppen, rechtsaf slaan, linksaf.

Met andere woorden, de klasse zelf is de blauwdruk, volgens welke in de fabriek auto's worden gemaakt. Een object is de auto zelf, gemaakt volgens deze blauwdrukken.

In JavaScript wordt een klasse gemaakt met het sleutelwoord class, gevolgd door de naam van deze klasse. Laten we de klasse Car maken:

class Car {
	// hier code, dat wil zeggen de JavaScript-blauwdruk van de auto
}

Laten we nu in onze blauwdruk specificeren dat elke auto, gemaakt volgens deze blauwdruk, een eigenschap voor kleur en een eigenschap voor de hoeveelheid brandstof zal hebben.

Om dit te doen, schrijven we binnenin de klasse de eigenschap color en de eigenschap fuel:

class Car {
	color; // kleur van de auto
	fuel;  // hoeveelheid brandstof
}

Laten we nu de methoden van onze klasse maken. In JavaScript lijken methoden op gewone functies, alleen worden ze gedeclareerd zonder het sleutelwoord function.

Zoals eerder vermeld, kan onze auto rijden, kan hij draaien, kan hij stoppen. Laten we de bijbehorende methoden in onze klasse maken:

class Car {
	color; // kleur van de auto
	fuel;  // hoeveelheid brandstof
	
	// Commando rijden:
	go() {
		// een of andere JavaScript code
	}
	
	// Commando draaien:
	turn() {
		// een of andere JavaScript code
	}
	
	// Commando stoppen:
	stop() {
		// een of andere JavaScript code
	}
}

We hebben de blauwdruk van onze auto gemaakt. Nu moeten we naar de fabriek gaan en een object van deze klasse maken (dat wil zeggen een concrete auto).

In JavaScript wordt dit gedaan met het sleutelwoord new, waarna de naam van de klasse wordt geschreven:

new Car; // beveel de fabriek om een auto te maken

Echter, als je simpelweg een object van de klasse maakt - leidt dit nergens toe (dit is hetzelfde als, bijvoorbeeld, een array declareren en deze nergens in opslaan). We hebben een variabele nodig om dit object op te slaan.

Laten we deze variabele myCar noemen - laten we het door ons gemaakte object erin opslaan:

let myCar = new Car;

Na het maken van de auto kunnen we zijn eigenschappen benaderen. Ze worden aangesproken via een punt. Laten we de eigenschappen van ons object instellen:

let myCar = new Car; // beveel de fabriek om een auto te maken

myCar.color = 'red'; // schilder hem rood
myCar.fuel = 50;     // tank brandstof

Klaar, onze auto is gemaakt, geverfd en getankt. Nu kunnen we hem commando's geven via de methoden van deze auto.

Methoden worden ook aangesproken via een punt, maar, in tegenstelling tot een eigenschap, volgen er ronde haakjes na de methodenaam. Laten we commando's geven aan ons object:

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