JavaScript objektai. 8 dalis JavaScript kursas nuo pradedančiųjų iki pažengusiųjų per 10 tinklaraščio įrašų

Tai yra 8 dalis JavaScript tinklaraščio įrašų serijoje, kuri nuves jus nuo pradedančiojo iki pažengusiojo. Jei dar nesate perskaitę ankstesnio tinklaraščio įrašo apie JavaScript funkcijas, galite patikrinti jį čia. Šios serijos pabaigoje jūs žinosite visus pagrindus, kuriuos reikia žinoti, kad pradėtumėte programuoti JavaScript. Be tolesnių kalbų, pradėkime aštuntąjį pamoką.

JavaScript objektai – turinys:

1. JavaScript objektai
2. Objektų konstruktorių funkcijos

JavaScript objektai

JavaScript objektai atlieka svarbų vaidmenį. Nors tai yra gana plati tema, ją taip pat galima gana lengvai suprasti. Vienas iš dažniausių būdų suprasti objektus yra galvoti apie juos kaip apie automobilių atkūrimą kode. Mes turėsime du pagrindinius konceptus, kai dirbame su objektais. Jie turės savybes ir metodus. Savybės yra dalykai, kuriuos turi JavaScript objektai, o metodai yra dalykai, kuriuos objektai gali atlikti. Pažvelkime į tai su keletu pavyzdžių.

// apibrėžkime kelis objektus, kad geriau suprastume
const plane = {
    numberOfWings: 2, 
    canFly: true, 
    takeOff: function(){return "Lėktuvas pradeda kilti..."},
    land: function(){return "Lėktuvas pradeda leistis..."} 
    }
const car = {
    brand: "Tesla",
    isElectric: true,
    numberOfDoors: 4,
    moveForward: function(){return "Automobilis juda į priekį..."},
    smartSummon: function(){return "Automobilis pradeda važiuoti pas jus..."}
}

// galime pasiekti ir konsolėje išvesti turimas savybes:
console.log("Lėktuvo savybės:");
console.log("Gali skristi: " + plane.canFly);
console.log("Bendras sparnų skaičius: " + plane.numberOfWings);
// taip pat galime priversti lėktuvą atlikti veiksmus
console.log(plane.takeOff());
console.log(plane.land());
// jei pažvelgsite atidžiau, pamatysite, kad 
// mes tiesiogiai nespausdiname veiksmų metodų viduje
// vietoj to mes juos grąžiname iš funkcijų
// ir šiuo atveju mes juos spausdiname konsolėje
// tokiu būdu, jei norime, galime taip pat suteikti vartotojui pranešimą
// kad lėktuvas kyla
alert(plane.takeOff());
// taip pat galime sužinoti apie savybes, kurias turi automobilis 
// ir konsolėje jas išvesti papildomam praktikai
console.log("Ar tai elektrinis automobilis? " + car.isElectric);
console.log("Koks automobilio prekės ženklas: " + car.brand);
console.log("Kiek durų jis turi? " + car.numberOfDoors);
console.log(car.smartSummon());
console.log(car.moveForward());

Kai paleidžiame aukščiau pateiktą kodą, turėtume gauti šį išvesties rezultatą:

Mes ką tik pamatėme du pagrindinius JavaScript objektų pavyzdžius: vieną su lėktuvu ir vieną su automobiliu. Kaip lėktuvai ir automobiliai turi skirtingas savybes ir skirtingus dalykus, kuriuos gali daryti, taip ir skirtingi objektai, kuriuos kuriame, gali daryti skirtingus dalykus ir turėti skirtingas savybes. Jei pažvelgsite atidžiau, galite pradėti matyti modelį, kaip mes apibrėžiame objektus, savybes ir metodus.

Mes pradedame apibrėžti objektus taip, kaip apibrėžiame kintamuosius ar konstantas, šiuo atveju paprastai pakanka naudoti konstantas apibrėžiant JavaScript objektus. Bet vietoj to, kad tiesiog priskirtume tą konstantą vertei, kaip tai darėme su įprastomis konstantomis, dabar mes atidarome ir uždarome porą skliaustų ir iš esmės pateikiame duomenis raktas-reikšmė poromis. Atkreipkite dėmesį, kad savybių ir metodų apibrėžimas yra gana panašus. Pagrindinis skirtumas yra tas, kad apibrėžiant savybes, mes priskiriame pavadinimus vertei, kurią vėliau gausime. Tačiau, kai apibrėžiame metodą, turime pateikti funkciją, kurią vėliau vykdysime. Šis skirtumas taip pat atsispindi, kaip mes juos vėliau kviečiame. Pavyzdžiui:

// kai gauname savybę, mes nenaudojame skliaustų pabaigoje
console.log("Gali skristi: " + plane.canFly);
// kai gauname metodus, 
// mes taip pat juos vykdome pridėdami skliaustus po jais
// metodai čia iš esmės yra funkcijos, kurios 
// priklauso konkrečiam objektui
console.log(plane.takeOff());

Svarbu, kad mes pridėtume skliaustus po metodų, kaip tai darėme su įprastomis funkcijomis. Priešingu atveju, mes tiesiog turėsime pačią funkciją, o ne vykdysime funkciją.

// norint vykdyti objekto metodą, turėtume
// pridėti skliaustus iškart po metodo pavadinimo
// priešingu atveju gausime metodo apibrėžimą 
// kaip šiame pavyzdyje
alert(plane.takeOff);

Rodomas rezultatas yra tiksliai tai, ką mes apibrėžėme kurdami metodą. Taip pat galite pamatyti, kad mes apibrėžiame funkciją „eigoje“. Šiuo atveju mes apibrėžiame funkciją be pavadinimo, kas yra įmanoma JavaScript. Tai ne visada pageidautina, nes suteikus funkcijai pavadinimą, ji tampa aiškesnė, kai matome ją rodomą. Tačiau šiuo atveju mes nenaudojame funkcijos niekur kitur už objekto apibrėžimo, todėl mums nereikia tiesiogiai suteikti funkcijai pavadinimo. Vietoj to, mes galime kreiptis į funkciją iš objekto su metodų pavadinimu, kurį jai priskiriame.

Kitas dalykas, kurį turėtumėte žinoti apie savybių ar metodų gavimą iš objekto, yra tai, kad yra daugiau nei vienas būdas tai pasiekti. Mes naudojome vieną iš dažniausiai pasitaikančių praktikų aukščiau pateiktuose pavyzdžiuose, tai yra naudoti taško notaciją. Bet yra ir kitas dažnai naudojamas būdas pasiekti tą patį rezultatą, apie kurį turėtumėte žinoti. Ši antroji notacija naudoja kvadratinius skliaustus ir kabutes.

// abu jie yra vienodai galiojantys ir 
// duoda mums tuos pačius rezultatus
console.log(plane.numberOfWings);
console.log(plane["numberOfWings"]);
// patikrinkite JavaScript konsolę dėl rezultatų

Puiku, kad galime saugoti daugybę detalių savybių ir veiksmų, kuriuos galime atlikti naudodami objektus, bet ką daryti, jei mums reikėtų naudoti objektus, ne tik 1 automobiliui, bet sakykime 20 automobilių, 100 automobilių ar net 1,000,000 automobilių, kiekvienas su unikaliu ID ir skirtingomis savybių reikšmėmis. Ar mums reikėtų rašyti visą tą kodą iš naujo kiekvienam automobiliui? Atsakymas yra ne. Vietoj to, mes galime pasinaudoti tuo, kas vadinama objekto konstruktoriaus funkcija.

Objektų konstruktorių funkcijos

Objektų konstruktoriai gali žymiai pagreitinti jūsų kodavimo procesą ir gali žymiai padaryti jūsų kodą labiau DRY. Su objektų konstruktorių funkcijomis mes iš esmės apibrėžiame objekto planą. Kai turime objekto planą, galime sukurti tiek daug to objekto egzempliorių daug aiškesniu būdu, su daug mažiau pasikartojimų. Pažvelkime į tai su keletu pavyzdžių.

// taip mes apibrėžiame planą objektams
function Car(id, color, isElectric, numberOfDoors){
    this.id = id;
    this.color = color;
    this.isElectric = isElectric;
    this.numberOfDoors = numberOfDoors;
}
// taip mes galime instancijuoti 
// JavaScript objektus, kuriuos norime sukurti iš 
// aukščiau apibrėžto plano
// šiuo atveju mes sukuriame 3 automobilių objektus 
// su skirtingomis savybių reikšmėmis
const car1 = new Car(1, "balta", true, 4);
const car2 = new Car(2, "juoda", true, 2);
const car3 = new Car(3, "raudona", false, 4);
// galime pasiekti objekto savybes taip, kaip darėme anksčiau
console.log("Pirmo automobilio spalva: " + car1.color);
console.log("Antro automobilio spalva: " + car2.color);
console.log("Trečio automobilio spalva: " + car3.color);

Paleidus aukščiau pateiktą kodą, gautume šį išvesties rezultatą:

Kaip matote iš aukščiau pateikto kodo, kai turime planą, galime tiesiog perduoti skirtingas reikšmes, kad sukurtume skirtingus JavaScript objektus iš pradinio plano. Vienas dalykas, kurį tikriausiai pastebėjote, yra tas, kad objektų konstruktorių pavadinimo konvencija yra turėti pirmąją raidę didžiąją. Šiuo atveju, vietoj to, kad apibrėžtume jį kaip „automobilį“, mes jį pavadinome „Automobilis“. Jei mes norėtume sukurti lėktuvo klasę, mes ją pavadintume „Lėktuvas“.

Kai norime sukurti objektus iš mūsų apibrėžto plano, mes naudojame raktinį žodį „new“ ir tada rašome objekto konstruktoriaus funkcijos pavadinimą, kurį norime naudoti. Po pavadinimo atidarome ir uždarome porą skliaustų ir perduodame argumentus, kuriuos norime sukurti su mūsų objektu. Atkreipkite dėmesį, kad mes nepakartojame parametrų pavadinimų, mes tiesiog perduodame reikšmes tokiu pačiu tvarkos būdu, kaip ir parametrai. Taip pat galbūt pastebėjote, kad kuriant planą mes naudojame raktinį žodį „this“. Kol kas, ką turėtumėte žinoti, yra tai, kad „this“ raktinis žodis leidžia kreiptis į patį objektą, ir tai yra dalis boilerplate kodo, kurį turėtume rašyti, kai kuriame objekto planą.

Mokydamiesi programuoti, galite išgirsti terminą „boilerplate kodas“, tai iš tikrųjų yra gana įprasta, ypač žiniatinklio kūrime. Tai iš esmės reiškia, kad yra kodo dalių, kurias mes rašome, kad nustatytume tam tikras konfigūracijas. Nors mes neteikiame unikalios sprendimo su kodu, mes turime išrašyti tas dalis, kad turėtume funkcionuojantį kodą. Priklausomai nuo boilerplate kodo, kai kurie IDE netgi teikia spartųjį klavišą, kad pateiktų tuos boilerplate kodus.

JavaScript objektai, apie kuriuos ką tik sužinojome, yra plati tema ir turi daug detalių, kai mes gilinamės. Bet pagrindiniu lygiu, turėtumėte žinoti, kad galime imituoti realaus gyvenimo objektus su kodu, naudodami objektus. Šie JavaScript objektai gali turėti skirtingas savybes ir metodus, kuriuos galime pasiekti ir atlikti.

Kitame pamokoje mes atrandame daugiau temų ir konceptų, kurie yra gana svarbūs ir dažnai naudojami JavaScript.