Inleiding tot Klasse en Voorwerpe in JavaScript

Nou gaan ons OOP in JavaScript bestudeer. Kom ons kyk na 'n voorbeeld uit die lewe, en bring dit dan oor na JavaScript.

As voorbeeld neem ons 'n motor. Dit het wiele, kleur, tipe bakwerk, enjin kapasiteit en so meer. Verder kan die bestuurder dit bevele gee: ry, stop, draai regs, links ens.

Ons kan sê dat daar 'n sekere klas motors is, met algemene eienskappe (almal het wiele en almal kan bevele ontvang).

'n Spesifieke motor wat op die straat staan - is 'n verteenwoordiger van hierdie klas, of, met ander woorde, 'n voorwerp van hierdie klas. Al die voorwerpe van hierdie klas het eienskappe: aantal wiele, kleur, tipe bakwerk en metodes: ry, stop, draai regs, links.

Met ander woorde, die klas self is die plan, volgens wat motors in die fabriek gemaak word. 'n Voorwerp is die motor self, gemaak volgens hierdie planne.

In JavaScript word 'n klas geskep met die sleutelwoord class, gevolg deur die naam van die klas. Kom ons maak 'n klas Car:

class Car {
	// hierdie kode, dit is die JavaScript-plan vir die motor
}

Laat ons nou in ons plan spesifiseer dat enige motor, gemaak volgens hierdie plan, sal 'n eienskap vir kleur en 'n eienskap vir brandstofhoeveelheid hê.

Om dit te doen, skryf ons binne die klas die eienskap color en die eienskap fuel:

class Car {
	color; // die motor se kleur
	fuel;  // brandstofhoeveelheid
}

Kom ons maak nou die metodes van ons klas. In JavaScript is metodes soortgelyk aan gewone funksies, maar hulle word gedeclareer sonder die sleutelwoord function.

Soos hierbo genoem, kan ons motor ry, kan dit draai, kan dit stop. Kom ons maak die ooreenstemmende metodes in ons klas:

class Car {
	color; // die motor se kleur
	fuel;  // brandstofhoeveelheid
	
	// Beveel om te ry:
	go() {
		// een of ander JavaScript-kode
	}
	
	// Beveel om te draai:
	turn() {
		// een of ander JavaScript-kode
	}
	
	// Beveel om te stop:
	stop() {
		// een of ander JavaScript-kode
	}
}

Ons het die plan van ons motor gemaak. Nou moet ons na die fabriek gaan en 'n voorwerp van hierdie klas maak (dit wil sê 'n spesifieke motor).

In JavaScript word dit gedoen met die sleutelwoord new, waarna die klasnaam geskryf word:

new Car; // beveel die fabriek om 'n motor te maak

Maar, as jy net 'n voorwerp van die klas skep - sal dit tot niks lei nie (dit is dieselfde as om, byvoorbeeld, 'n skikking te declareer en dit nêrens te stoor nie). Ons het 'n veranderlike nodig om hierdie voorwerp te stoor.

Laat hierdie veranderlike myCar heet - laat ons die geskep voorwerp daarin stoor:

let myCar = new Car;

Na die skepping van die motor kan jy na sy eienskappe verwys. Verwijzing daartoe gebeur deur 'n punt. Kom ons stel die eienskappe van ons voorwerp:

let myCar = new Car; // beveel die fabriek om 'n motor te maak

myCar.color = 'red'; // verf dit rooi
myCar.fuel = 50;     // vul brandstof in

Klaar, ons motor is geskep, geverf en vol brandstof. Nou kan ons dit bevele gee deur die metodes van hierdie motor.

Verwysing na metodes gebeur ook deur 'n punt, maar, anders as by 'n eienskap, volg ronde hakies na die metode se naam. Kom ons gee bevele aan ons voorwerp:

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