Einführung in Klassen und Objekte in JavaScript

Jetzt werden wir uns mit OOP in JavaScript beschäftigen. Lassen Sie uns ein Beispiel aus dem Leben betrachten und es dann auf JavaScript übertragen.

Als Beispiel nehmen wir ein Auto. Es hat Räder, eine Farbe, eine Karosserieform, einen Hubraum und so weiter. Außerdem kann der Fahrer ihm Befehle geben: fahren, anhalten, nach rechts abbiegen, nach links usw.

Man kann sagen, dass es eine bestimmte Klasse von Autos gibt, die gemeinsame Eigenschaften besitzt (alle haben Räder und allen kann man Befehle geben).

Ein konkretes Auto, das auf der Straße steht - ist ein Vertreter dieser Klasse, oder, mit anderen Worten, ein Objekt dieser Klasse. Alle Objekte dieser Klasse haben Eigenschaften: Anzahl der Räder, Farbe, Karosserieform und Methoden: fahren, anhalten, nach rechts abbiegen, nach links.

Mit anderen Worten: Die Klasse selbst ist der Bauplan, nach dem in der Fabrik Autos gebaut werden. Das Objekt ist das Auto selbst, das nach diesen Plänen gebaut wurde.

In JavaScript wird eine Klasse mit dem Schlüsselwort class erstellt, gefolgt vom Namen dieser Klasse. Lassen Sie uns die Klasse Car erstellen:

class Car {
	// hier Code, also der JavaScript-Bauplan für ein Auto
}

Legen wir nun in unserem Bauplan fest, dass jedes Auto, das nach diesem Bauplan erstellt wird, eine Eigenschaft für die Farbe und eine Eigenschaft für die Menge an Kraftstoff haben wird.

Dazu schreiben wir innerhalb der Klasse die Eigenschaft color und die Eigenschaft fuel:

class Car {
	color; // Farbe des Autos
	fuel;  // Menge an Kraftstoff
}

Lassen Sie uns nun die Methoden unserer Klasse erstellen. In JavaScript ähneln Methoden normalen Funktionen, werden jedoch ohne das Schlüsselwort function deklariert.

Wie bereits erwähnt, kann unser Auto fahren, es kann abbiegen, es kann anhalten. Erstellen wir die entsprechenden Methoden in unserer Klasse:

class Car {
	color; // Farbe des Autos
	fuel;  // Menge an Kraftstoff
	
	// Befehl fahren:
	go() {
		// irgendein JavaScript-Code
	}
	
	// Befehl abbiegen:
	turn() {
		// irgendein JavaScript-Code
	}
	
	// Befehl anhalten:
	stop() {
		// irgendein JavaScript-Code
	}
}

Wir haben den Bauplan für unser Auto erstellt. Jetzt müssen wir in die Fabrik gehen und ein Objekt dieser Klasse erstellen (also ein konkretes Auto).

In JavaScript geschieht dies mit dem Schlüsselwort new, nach dem der Klassenname geschrieben wird:

new Car; // wir befehlen der Fabrik, ein Auto zu bauen

Wenn man jedoch einfach ein Objekt der Klasse erstellt - führt das zu nichts (das ist so, als würde man z.B. ein Array deklarieren und es nirgendwo speichern). Wir benötigen eine Variable zur Speicherung dieses Objekts.

Lassen Sie uns diese Variable myCar nennen - und wir weisen ihr das von uns erstellte Objekt zu:

let myCar = new Car;

Nach der Erstellung des Autos kann man auf seine Eigenschaften zugreifen. Der Zugriff erfolgt über einen Punkt. Lassen Sie uns die Eigenschaften unseres Objekts festlegen:

let myCar = new Car; // wir befehlen der Fabrik, ein Auto zu bauen

myCar.color = 'red'; // lackieren auf rot
myCar.fuel = 50;     // Kraftstoff tanken

Fertig, unser Auto ist erstellt, lackiert und betankt. Jetzt können wir ihm Befehle über die Methoden dieses Autos erteilen.

Der Zugriff auf Methoden erfolgt ebenfalls über einen Punkt, aber im Gegensatz zu Eigenschaften werden nach dem Methodennamen runde Klammern gesetzt. Lassen Sie uns unser Objekt herumkommandieren:

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