Áttekintés: Objektumok

Az alábbiakban áttekintjük mindazt, amit az objektumokról szóló gyakorlat során tanultunk.

Sokféle értéket tárolhatunk JavaScript változókban, és van, hogy értékek egy összetartozó csoportját együtt szeretnénk tárolni: ekkor kerülnek képbe az objektumok!

Egy objektum olyan adattípus, mely lehetővé teszi, hogy tulajdonságok csoportját egyetlen változóban tároljuk. Egy objektum létrehozásához először egy változót deklarálunk, ahogy szoktuk, majd ezután kapcsos zárójelek között soroljuk fel a kulcs-érték párokat:

var objektumNev = { 
  tulajdonsagNev: tulajdonsagErtek,
  tulajdonsagNev: tulajdonsagErtek,
  ...
};

Íme egy objektum, ami Winstont írja le. Ennek az objektumnak két tulajdonsága van: szulovaros és haj. Mindkét tulajdonság sztring:

var winston = {
  szulovaros: "Mountain View, CA",
  haj: "nincs"
};

Íme egy összetettebb objektum is, ami egy macskát ír le négy tulajdonsággal: kor, szorSzin, kedvencek, és szuletesnap.

var lizzieAMacska = {
  kor: 18,
  szorSzin: "szurke",
  szereti: ["macskamenta", "tej"],
  szuletesnap: {"honap": 7, "nap": 17, "ev": 1994}
};

Észrevetted, hogy minden egyes tulajdonság más adattípust tárol? A kor számot, a szorSzin sztringet, a kedvencek egy tömböt, a szuletesnap pedig egy másik objektumot. Ez a szép dolog az objektumokban (na jó, csak egyike a szép dolgoknak): más objektumokat is képesek tárolni önmagukban! Így mélyen egymásba lehet ágyazni őket, ha összetett adatot szeretnénk leírni.

Az alábbihoz hasonlóan olyan objektumokkal is találkozhatsz, melyek tulajdonságai idézőjellel vannak körülvéve:

var winston= {
  "szulovaros": "Mountain View, CA",
  "haj": "nincs"
};

Ez teljesen megegyezik azzal, amit korábban idézőjel nélkül láttunk, de tovább tart begépelni. Az egyetlen eset, amikor mindenképpen kell idézőjelet használnod, az a szóközt tartalmazó tulajdonságnevek esete, mint például:

var winston= {
  "a haja": "nincs"
};

Itt azért kell idézőjelet használnunk, mert különben a JavaScript-értelmező összezavarodna. Tanácsom: lehetőleg ne használj szóközt a tulajdonságnevekben! Így soha nem kell majd idézőjelbe tenned a tulajdonságneveket.

Objektum tulajdonságainak elérése

Egy objektum csak akkor hasznos, ha bele tudunk nézni, és elérjük a benne tárolt különböző tulajdonságok értékeit. Ezt kétféleképpen tehetjük meg. Először is használhatunk "pont jelölésmódot", mely esetén leírjuk a változó nevét, majd egy "." -ot, végül pedig a tulajdonság nevét:

var winston= {
  szulovaros: "Mountain View, CA",
  haj: "nincs"
};

text("Winston szülővárosa " + winston.szulovaros, 100, 100);
text("Winstonnak " + winston.haj+ " haja", 100, 150);

"Zárójeles jelölésmódot" is használhatunk, ami hasonló ahhoz, ahogy egy tömb elemeit elérjük: leírjuk a változó nevét, majd szögletes zárójelet teszünk, a zárójelen belül pedig idézőjelbe tesszük a tulajdonság nevét:

var szulovaros = aboutWinston["szulovaros"];
var haja = aboutWinston["haj"];

Ha egy nem létező tulajdonságot próbálunk meg elérni, "undefined" értéket kapunk eredményül:

text("Winston életcélja a " + winston.eletCel, 100, 150);

Objektumok tulajdonságainak módosítása

Mint egyéb adattípusok változókban való tárolásakor, az objektumok esetében is bármikor megváltoztathatjuk tulajdonságaik értékét a program során a "pont" vagy a "zárójeles" jelölésmód segítségével:

winston.haj= "göndör"; // Winston parókát kap!

Teljesen új tulajdonságokat is hozzáadhatunk!

aboutWinston.eletcel = "JavaScript oktatás";

Ha már nem használunk egy tulajdonságot, ki is törölhetjük (de legtöbbször inkább csak megváltoztatjuk az értékét):

delete aboutWinston.haj;

Objektumok tömbjei

Most, hogy a tömbökkel és az objektumokkal is megismerkedtél, objektumok tömbjévé kombinálhatod össze őket, ami az adattárolás nagyon hasznos módja a programokban. Például nézzük macskák egy tömbjét:

var macskaim = [
  {nev: "Lizzie", 
   kor: 18},
  {nev: "Daemon",
   kor: 1}
];

for (var i = 0; i < macskaim.length; i++) {
  var egyMacskam = macskaim[i];
  println(egyMacskam.nev + ' ' + egyMacskam.kor+ ' éves.');
}

Figyeld meg, hogy objektumok egy tömbjén ugyanúgy megyünk végig, mint ahogy azt számokat vagy sztringeket tartalmazó tömb esetén tennénk, for ciklust használva. Minden iterációban az aktuális tömbelemet zárójeles jelölésmóddal érjük el, ezután pedig ennek a tömbelemnek (egy objektumnak) a tulajdonságait pont jelölésmóddal.

Egy másik gyakorlati példa, amit programjaidban használhatsz, koordinátákkal jelölt helyzetek tömbje:

var positions = [
    {x: 200, y: 100},
    {x: 200, y: 200},
    {x: 200, y: 300}
];

for (var i = 0; i < positions.length; i++) {
    var position = positions[i];
    ellipse(position.x, position.y, 100, 100);
}

Elég király, igaz? Az objektumok elsőre ijesztőek lehetnek, de ha elkezded használni őket, egy idő után biztosan függővé válsz, és mindent objektummá akarsz majd alakítani!

Szeretnél részt venni a beszélgetésben?

Jelentkezz be

Rendezés:

Még nincs hozzászólás.

Tudsz angolul? Kattints ide, ha meg szeretnéd nézni, milyen beszélgetések folynak a Khan Academy angol nyelvű oldalán.