Kaip sukurti objektus „JavaScript“

Mes visi vienaip ar kitaip susiduriame su objektais, rašydami kodą programavimo kalba. „JavaScript“ sistemoje objektai suteikia mums galimybę saugoti, tvarkyti ir siųsti duomenis per tinklą.

Yra daugybė būdų, kuriais „JavaScript“ objektai skiriasi nuo objektų kitose pagrindinėse programavimo kalbose, pavyzdžiui, „Java“. Pabandysiu tai aptarti kita tema. Čia sutelkime dėmesį tik į įvairius būdus, kuriais „JavaScript“ leidžia kurti objektus.

„JavaScript“ galvokite apie objektus kaip apie „key: value“ porų rinkinį. Tai atneša mums pirmą ir populiariausią būdą kurti objektus „JavaScript“.

Pradėkime tai pradėti.

1. Objektų kūrimas naudojant pažodinę objektų sintaksę

Tai tikrai paprasta. Viskas, ką jums reikia padaryti, tai išmesti raktinių verčių poras, atskirtas „:“, į garbanotųjų petnešų rinkinį ({}), ir jūsų objektas yra paruoštas pateikti (arba suvartoti), kaip nurodyta toliau:

const person = { firstName: 'testFirstName', lastName: 'testLastName' };

Tai paprasčiausias ir populiariausias būdas kurti objektus „JavaScript“.

2. Objektų kūrimas naudojant „naują“ raktinį žodį

Šis objektų kūrimo būdas primena objektų kūrimo būdą klasių kalbomis, tokiomis kaip „Java“. Beje, pradedant ES6, klasėse taip pat yra „JavaScript“ ir mes pažvelgsime į objektų kūrimą apibrėždami klases šio straipsnio pabaigoje. Taigi, norėdami sukurti objektą naudodami „naują“ raktinį žodį, turite turėti konstruktoriaus funkciją.

Štai 2 būdai, kaip galite naudoti „naują“ raktinių žodžių modelį -

a) „Naujo“ raktinio žodžio naudojimas naudojant integruotą objekto konstruktoriaus funkciją

Norėdami sukurti objektą, naudokite naują raktinį žodį su Object()konstruktoriumi, pavyzdžiui:

const person = new Object();

Dabar, norėdami pridėti ypatybių prie šio objekto, turime padaryti kažką panašaus:

person.firstName = 'testFirstName'; person.lastName = 'testLastName';

Galbūt supratote, kad šis metodas yra šiek tiek ilgesnis. Be to, ši praktika nerekomenduojama, nes užkulisiuose yra srities skiriamoji geba, siekiant sužinoti, ar konstruktoriaus funkcija yra įmontuota, ar vartotojo apibrėžta.

b) „Naujo“ naudojimas su vartotojo apibrėžta konstruktoriaus funkcija

Kita problema, susijusi su „Object“ konstruktoriaus funkcijos panaudojimu, kyla dėl to, kad kiekvieną kartą, kai sukuriame objektą, turime rankiniu būdu pridėti sukurtą objektą.

Ką daryti, jei mes turėtume sukurti šimtus žmonių objektų? Dabar galite įsivaizduoti skausmą. Taigi, norėdami atsikratyti savybių pridėjimo rankiniu būdu prie objektų, mes sukuriame pasirinktines (arba vartotojo apibrėžtas) funkcijas. Pirmiausia sukuriame konstruktoriaus funkciją, tada objektams gauti naudojame „new“ raktinį žodį:

function Person(fname, lname) { this.firstName = fname; this.lastName = lname; }

Dabar, kai tik norite „Asmens“ objekto, tiesiog atlikite tai:

const personOne = new Person('testFirstNameOne', 'testLastNameOne'); const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo');

3. Naudodami objektą.create () kurkite naujus objektus

Šis modelis yra labai naudingas, kai mūsų prašoma sukurti objektus iš kitų esamų objektų, o ne tiesiogiai naudoti „naujos“ raktinių žodžių sintaksę. Pažiūrėkime, kaip naudoti šį modelį. Kaip nurodyta MDN:

Object.create()Metodas sukuria naują objektą, naudoja esamą objektą kaip naujai sukurtą objektą prototipą.

Norėdami suprasti Object.createmetodą, tiesiog nepamirškite, kad tam reikia dviejų parametrų. Pirmasis parametras yra privalomas objektas, kuris naudojamas kaip kuriamo naujo objekto prototipas. Antrasis parametras yra neprivalomas objektas, kuriame yra ypatybės, kurias reikia pridėti prie naujo objekto.

Dabar nesigilinsime į prototipus ir paveldėjimo grandines, kad susitelktume į temą. Bet kaip greitą dalyką galite galvoti apie prototipus kaip apie objektus, iš kurių kiti objektai gali pasiskolinti jiems reikalingas savybes / metodus.

Įsivaizduokite, kad turite organizaciją, kuriai atstovauja orgObject

const orgObject = { company: 'ABC Corp' };

Ir jūs norite sukurti šios organizacijos darbuotojus. Aišku, jūs norite visų darbuotojų objektų.

const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } }); console.log(employee); // { company: "ABC Corp" } console.log(employee.name); // "EmployeeOne"

4. Norėdami sukurti naujus objektus, naudokite objektą.ject ()

Ką daryti, jei norime sukurti objektą, kuris turi turėti daugiau nei vieno objekto savybes? Object.assign()ateina mums į pagalbą.

Kaip nurodyta MDN:

Metodas kopijuoti visų išvardijamosios pačių savybių iš vieno ar daugiau šaltinių objektų reikšmes tikslinės objektą. Tai grąžins tikslinį objektą. Object.assign()

Object.assignmetodas gali paimti bet kokį objektų skaičių kaip parametrus. Pirmasis parametras yra objektas, kurį jis sukurs ir grąžins. Likę jai perduoti objektai bus naudojami ypatybėms nukopijuoti į naują objektą. Supraskime tai išplėsdami ankstesnį pavyzdį, kurį matėme.

Tarkime, kad turite du objektus, kaip nurodyta toliau:

const orgObject = { company: 'ABC Corp' } const carObject = { carName: 'Ford' }

Dabar norite „ABC Corp“ darbuotojo objekto, kuris vairuotų „Ford“ automobilį. Tai galite padaryti naudodamiesi Object.assigntoliau pateiktais būdais:

const employee = Object.assign({}, orgObject, carObject);

Dabar, jūs gaunate employeedaiktą, kuris turi companyir carNamekaip savo turtu.

console.log(employee); // { carName: "Ford", company: "ABC Corp" }

5. ES6 klasių naudojimas objektams kurti

Jūs pastebėsite, kad šis metodas yra panašus į „naujo“ naudojimą su vartotojo apibrėžta konstruktoriaus funkcija. Konstruktoriaus funkcijos dabar pakeistos klasėmis, nes jas palaiko ES6 specifikacijos. Pažiūrėkime kodą dabar.

class Person { constructor(fname, lname) { this.firstName = fname; this.lastName = lname; } } const person = new Person('testFirstName', 'testLastName'); console.log(person.firstName); // testFirstName console.log(person.lastName); // testLastName 

Tai visi būdai, kuriuos žinau, kaip kurti objektus „JavaScript“. Tikiuosi, kad jums patiko šis įrašas ir dabar suprantate, kaip kurti objektus.

Dėkojame už sugaištą laiką skaitant šį straipsnį. Jei jums patiko šis įrašas ir jis jums buvo naudingas, spustelėkite paspaudimą? mygtuką, kad parodytumėte savo palaikymą. Sužinok daugiau!