Meetodite deklareerimine objekti literaalides ES6-s

Funktsioonide haldamine objektide literaalides JavaScriptis on muutunud pärast ES6 tutvustamist oluliselt lihtsamaks. Pika ja tülikas function-kliendi asemel saad nüüd kasutada palju kokkuvõtlikumat ja arusaadavamat süntaksit. Käesolevas tekstis selgitame, kuidas uusi võimalusi tõhusalt kasutada, et kirjutada struktureeritud ja hooldatavat koodi.

Olulised järeldused

• ES6 abil saad meetodeid objektides literaalides deklareerida ilma function-kliendi kasutamata.
• Sa saad funktsioone otse objekti omadustena lisada.
• See uus süntaks toob kaasa selgemat ja arusaadavamat koodi.

Sammsammuline juhend

Lihtsa objekti loomine

Alusta lihtsa objekti loomisega. Näiteks saad defineerida objekti, millel on string ja meetod, mis kuvab stringi. See näeb välja järgmine:

const myObject = { text: 'Tere, maailm!', // Siin deklareeritakse meetod print: function() { console.log(this.text); } };

Siin on meil objekt myObject, millel on omadus text, mis sisaldab stringi, ja meetod print, mis kuvab teksti konsoolis. See on traditsiooniline viis funktsioonide deklareerimiseks objektides literaalides.

Meetodi rakendamine

Pärast objekti määramist saad kutsuda meetodit print. Seda tehakse järgmiselt:

myObject.print(); // Kuvab 'Tere, maailm!'

Kui käitad seda käsku, kuvatakse tekst konsoolis. Selles sammus oled edukalt kutsunud meetodi oma objekti sees.

Uue ES6 süntaksi kasutamine

ES6 tõeline tugevus peitub meetodi deklareerimise lihtsustamises. Selle asemel, et deklareerida funktsioon function-kliendi abil, saad seda otse objekti omadusena esitada. Nii see toimib:

const myObject = { text: 'Tere, maailm!', print() { console.log(this.text); } };

Nüüd on meetod print deklareeritud ilma function-kliendita. See parandab su koodi loetavust märkimisväärselt ja muudab selle hooldamise lihtsamaks.

Meetodite võrdlemine

Uuri nüüd vana ja uue süntaksi vahet. Esimene meetod nõuab function-kliendi, samas kui uus meetod on palju kompaktsem ja sarnaneb süntaksile, mille sa muude programmeerimiskeelte puhul tunned. Kuid mõlemad meetodid annavad sama tulemuse.

Mõlemad meetodid toimivad sama moodi ja kuvavad teksti konsoolis. Siiski on oluline, et ES6 süntaks vajab vähem ruumi ja see muudab koodi selgemaks.

Komplekssete objektide loomine

Nüüd saad luua keerulisemaid objekte, millel on mitu omadust ja meetodit. Näiteks saad defineerida objekti, millel on mitu meetodit ja andmeid:

const person = { name: 'Max', age: 28, greet() { console.log(`Tere, minu nimi on ${this.name} ja ma olen ${this.age} aastat vana.`); } };

Siin on meil person-objekt, millel on kaks omadust (name ja age) ning meetod greet, mis kuvab kogu teabe lauses.

Uue süntaksi kokkuvõte

ES6 tutvustamisega on meetodite loomine objektides literaalides lihtsam ja puhtam. Sa ei pea enam kasutama function-kliendi ja saad selle asemel kasutada kompaktset süntaksit. See suurendab mitte ainult koodi loetavust, vaid muudab selle ka lihtsamaks hallata.

Kokkuvõte – Meetodi deklareerimine objektide literaalides

Käesolevas juhendis oled õppinud, kuidas rakendada meetodi deklareerimist JavaScripti objektides literaalides uue ES6 süntaksi abil. Uus meetod on mitte ainult lihtsam kirjutada, vaid parandab ka koodi kvaliteeti. Kasuta neid tehnikaid oma JavaScripti klasside ja objektide selgemaks ja funktsionaalsemaks muutmiseks.