Ablakkezelő rendszer

A JavaScript támogatja az objektumorientált programozást (OOP). Az OOP során objektumokat (példányokat) hozol létre „sablonokból” (osztályokból), hogy azok bizonyos adatokat és funkcionalitást tartalmazzanak. Az adattulajdonságokat az OOP világában mezőknek nevezzük, a függvénytulajdonságokat pedig metódusoknak.

A JavaScriptben egyáltalán nem voltak osztályok, mielőtt azok 2015-ben bekerültek a nyelvi specifikációba, de a prototípusalapú öröklés révén már addig is lehetővé tette az objektumorientált programozást. És bár manapság már elérhető a class kulcsszó, a JavaScript továbbra is prototípusalapú nyelv.

Hogy megértsük, mit jelent ez a prototípusalapúság, és hogyan is működik valójában a JavaScript, menjünk vissza az időben oda, amikor még nem voltak osztályok.

Prototípus szintaxis

Konstruktőrfüggvény

A JavaScriptben a sablont (osztályt) egy hagyományos függvény valósítja meg. Amikor egy függvényt ilyen sablonként szeretnénk használni, azt konstruktőrfüggvénynek nevezzük, és a konvenció szerint a függvény nevét nagybetűvel kell kezdeni. A példányokat (objektumokat) a sablonból a new kulcsszóval hozzuk létre, amikor meghívjuk a konstruktőrfüggvényt.

function Car() {
  // ...
}

const myCar = new Car();
const yourCar = new Car();

Fontos megjegyezni, hogy a JavaScriptben a példányok és a konstruktőrfüggvény a példányok létrehozása után is kapcsolatban maradnak egymással. Minden példányobjektum tartalmaz egy rejtett, belső tulajdonságot, amelyre a nyelvi specifikáció [[prototype]] néven hivatkozik. Ez hivatkozást tárol a konstruktőrfüggvény prototype kulcsának értékére. Igen, jól olvastad: egy JavaScript-függvénynek lehetnek kulcs-érték párjai, mert a háttérben maga is objektum.

Példánymezők

Gyakran szeretnéd, hogy minden származtatott objektum (példány) tartalmazzon bizonyos mezőket, és ezekhez kezdőértékeket adj át az objektum létrehozásakor. Ezt a this kulcsszóval érheted el. A konstruktőrfüggvényen belül a this azt az új objektumot képviseli, amely a new segítségével jön létre. Amikor a konstruktőrfüggvényt a new kulcsszóval hívjuk meg, a this automatikusan visszaadódik belőle.

Ez azt jelenti, hogy új mezőket úgy adhatunk a létrejövő példányhoz, hogy hozzáadjuk őket a this-hez a konstruktőrfüggvényben.

function Car(color, weight) {
  this.color = color;
  this.weight = weight;
  this.engineRunning = false;
}

const myCar = new Car('red', '2mt');
myCar.color;
// => 'red'
myCar.engineRunning;
// => false

Példánymetódusok

A metódusokat a konstruktőrfüggvény prototype tulajdonságán keresztül adjuk hozzá. Egy metóduson belül a this segítségével érheted el a példány mezőit. Ez az alábbi általános szabály miatt működik.

Amikor egy függvényt egy objektum metódusaként hívunk meg, a this értéke arra az objektumra áll be, amelyen a metódust meghívtuk. ¹

function Car() {
  this.engineRunning = false;
  // ...
}

Car.prototype.startEngine = function () {
  this.engineRunning = true;
};

Car.prototype.addGas = function (litre) {
  // ...
};

const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true

A prototípuslánc

A fenti példában a myCar egy hagyományos JavaScript-objektum, és ha megvizsgálnánk (például a böngésző konzoljában), nem találnánk közvetlenül a myCar objektumban egy startEngine tulajdonságot, amelynek értéke függvény. Akkor mégis hogyan működik a fenti kód?

A titok itt a prototípuslánc. Amikor megpróbálsz elérni egy objektum bármely tulajdonságát (mezőjét vagy metódusát), a JavaScript először azt ellenőrzi, hogy a kérdéses kulcs közvetlenül megtalálható-e magában az objektumban. Ha nem, folytatja a keresést abban az objektumban, amelyre az eredeti objektum [[prototype]] tulajdonsága hivatkozik. Ahogy korábban említettük, a példánkban a [[prototype]] a konstruktőrfüggvény prototype tulajdonságára mutat. Itt találná meg a JavaScript a startEngine függvényt, mert oda adtuk hozzá.

function Car() {
  // ...
}

Car.prototype.startEngine = function () {
  // ...
};

És a lánc itt nem ér véget. A Car.prototype [[prototype]] tulajdonsága (myCar.[[prototype]].[[prototype]]) az Object.prototype-ra hivatkozik (az Object konstruktőrfüggvény prototype tulajdonságára). Ez olyan általános metódusokat tartalmaz, amelyek minden JavaScript-objektum számára elérhetők, például a toString(). Összefoglalva, meghívhatod a myCar.toString() metódust, és az létezni fog, mert a JavaScript az egész prototípusláncon végigkeresi azt a metódust.

Osztály szintaxis

Manapság a JavaScript támogatja az osztályok definiálását a class kulcsszóval. Ez 2015-ben került be a nyelvi specifikációba. Egyrészt ez szintaktikai cukrot nyújt, ami megkönnyíti az osztályok olvasását és írását. Az új szintaxis jobban hasonlít ahhoz, ahogy az osztályokat például C++-ban vagy Javában írják. Az ezekről a nyelvekről átváltó fejlesztőknek könnyebb az átállás. Másrészt az osztályszintaxis utat nyit olyan új nyelvi funkcióknak, amelyek a prototípus szintaxisban nem érhetők el.

Osztálydeklarációk

Az új szintaxissal az osztályokat a class kulcsszóval definiáljuk, amelyet az osztály neve, majd az osztály törzse követ kapcsos zárójelek között. A törzs tartalmazza a konstruktőrfüggvény definícióját, azaz egy constructor nevű speciális metódust. Ez a függvény pontosan úgy működik, mint a konstruktőrfüggvény a prototípus szintaxisban. Az osztály törzse az összes metódusdefiníciót is tartalmazza. A metódusok szintaxisa hasonlít ahhoz a rövidített jelöléshez, amelyet akkor láttunk, amikor függvényeket adtunk értékként egy objektumon belül; lásd az Objektumok fogalmat.

class Car {
  constructor(color, weight) {
    this.color = color;
    this.weight = weight;
    this.engineRunning = false;
  }

  startEngine() {
    this.engineRunning = true;
  }

  addGas(litre) {
    // ...
  }
}

const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true

Tartsd észben, hogy a JavaScript a háttérben továbbra is prototípusalapú nyelv. Minden mechanizmus, amelyről a fenti „Prototípus szintaxis” részben tanultunk, továbbra is érvényes.

Privát mezők, getterek és setterek

Alapértelmezés szerint a JavaScriptben minden példánymező nyilvános. Közvetlenül elérhetők, és értéket is adhatunk nekik.

Van azonban egy bevett konvenció, amely szerint az aláhúzással kezdődő mezőket és metódusokat privátként kell kezelni. Soha nem szabad őket közvetlenül az osztályon kívülről elérni.

A privát mezőket néha getterek és setterek kísérik. A get és set kulcsszavakkal olyan függvényeket definiálhatsz, amelyek akkor futnak le, amikor egy, a függvényével azonos nevű tulajdonságot kiolvasnak, vagy értéket adunk neki.

class Car {
  constructor() {
    this._mileage = 0;
  }

  get mileage() {
    return this._mileage;
  }

  set mileage(value) {
    throw new Error(`Mileage cannot be manipulated, ${value} is ignored.`);
    // Just an example, usually you would not provide a setter in this case.
  }
}

const myCar = new Car();
myCar.mileage;
// => 0
myCar.mileage = 100;
// => Error: Mileage cannot be manipulated, 100 is ignored.

---

1. this példák - Objektum metódusaként, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#as_an_object_method (hivatkozva: 2021. december 3.) ↩