Kako stvoriti objekte u JavaScript-u

Svi se na jedan ili drugi način bavimo objektima dok pišemo kod na programskom jeziku. U JavaScript-u objekti pružaju način za pohranu, manipulaciju i slanje podataka putem mreže.

Postoji mnogo načina na koje se objekti u JavaScriptu razlikuju od objekata u drugim glavnim programskim jezicima, poput Jave. Pokušat ću to pokriti u drugoj temi. Ovdje ćemo se usredotočiti samo na razne načine na koje nam JavaScript omogućuje stvaranje objekata.

U JavaScript-u zamislite objekte kao kolekciju parova 'ključ: vrijednost'. To nam donosi prvi i najpopularniji način na koji stvaramo objekte u JavaScript-u.

Krenimo s ovim.

1. Stvaranje objekata korištenjem doslovne sintakse objekta

Ovo je zaista jednostavno. Sve što morate učiniti je baciti parove vrijednosti ključeva odvojene znakom ':' unutar skupa kovrčavih zagrada ({}) i vaš je objekt spreman za posluživanje (ili konzumiranje), kao u nastavku:

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

Ovo je najjednostavniji i najpopularniji način za stvaranje objekata u JavaScript-u.

2. Stvaranje objekata pomoću ključne riječi 'new'

Ova metoda stvaranja objekata sliči načinu na koji se objekti stvaraju u jezicima temeljenim na klasama, poput Jave. Usput, počevši od ES6, klase su izvorne i za JavaScript, a mi ćemo se osvrnuti na stvaranje objekata definiranjem klasa pred kraj ovog članka. Dakle, da biste stvorili objekt pomoću ključne riječi 'new', morate imati funkciju konstruktora.

Evo dva načina na koje možete koristiti 'novi' obrazac ključne riječi -

a) Korištenje ključne riječi 'new' s 'ugrađenom funkcijom konstruktora objekta

Da biste stvorili objekt, upotrijebite novu ključnu riječ s Object()konstruktorom, ovako:

const person = new Object();

Da bismo dodali svojstva ovom objektu, moramo učiniti nešto poput ovog:

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

Mogli ste pretpostaviti da se ova metoda tipka nešto dulje. Također, ova se praksa ne preporučuje jer postoji razlučivost opsega koja se događa iza kulisa kako bi se utvrdilo je li funkcija konstruktora ugrađena ili definirana od strane korisnika.

b) Korištenje 'novog' s korisnički definiranom funkcijom konstruktora

Drugi problem s pristupom korištenju funkcije konstruktora 'Object' proizlazi iz činjenice da svaki put kada kreiramo objekt, moramo ručno dodati svojstva stvorenom objektu.

Što ako bismo morali stvoriti stotine predmeta osobe? Sad možete zamisliti bol. Dakle, da bismo se riješili ručnog dodavanja svojstava objektima, stvaramo prilagođene (ili korisnički definirane) funkcije. Prvo kreiramo konstruktorsku funkciju, a zatim pomoću ključne riječi 'new' dobivamo objekte:

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

Sada, kad god želite objekt 'Osoba', samo učinite sljedeće:

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

3. Korištenje Object.create () za stvaranje novih objekata

Ovaj obrazac je vrlo koristan kada se od nas traži da kreiramo objekte od drugih postojećih objekata, a ne izravno koristeći sintaksu ključne riječi 'new'. Pogledajmo kako se koristi ovaj obrazac. Kao što je navedeno na MDN-u:

Object.create()Način stvara novi objekt, koristeći postojeći objekt kao prototip novih objekata.

Da biste razumjeli Object.createmetodu, samo imajte na umu da su potrebna dva parametra. Prvi je parametar obvezni objekt koji služi kao prototip novog objekta koji će se stvoriti. Drugi parametar je neobavezni objekt koji sadrži svojstva koja se dodaju novom objektu.

Nećemo sada duboko zaranjati u prototipove i nasljedne lance kako bismo zadržali fokus na toj temi. Ali kao kratku točku, prototipove možete smatrati objektima od kojih drugi predmeti mogu posuditi svojstva / metode koja su im potrebna.

Zamislite da imate organizaciju koju zastupa orgObject

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

A vi želite stvoriti zaposlenike za ovu organizaciju. Jasno je da želite sve predmete zaposlenika.

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

4. Korištenje Object.assign () za stvaranje novih objekata

Što ako želimo stvoriti objekt koji mora imati svojstva iz više objekata? Object.assign()dolazi u našu pomoć.

Kao što je navedeno na MDN-u:

Metoda se koristi za kopiranje vrijednosti svih enumerable vlastitih nekretnina iz jednog ili više izvora objekata na ciljani objekt. Vratit će ciljni objekt. Object.assign()

Object.assignmetoda može uzeti bilo koji broj objekata kao parametre. Prvi parametar je objekt koji će stvoriti i vratiti. Ostatak predmeta koji su mu proslijeđeni koristit će se za kopiranje svojstava u novi objekt. Shvatimo to proširujući prethodni primjer koji smo vidjeli.

Pretpostavimo da imate dva objekta kao u nastavku:

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

Sada želite objekt zaposlenika tvrtke "ABC Corp" koji vozi automobil "Ford". To možete učiniti pomoću Object.assigndolje navedenog:

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

Sada dobivate employeeobjekt koji ima companyi carNamekao svoje svojstvo.

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

5. Korištenje ES6 klasa za stvaranje objekata

You will notice that this method is similar to using ‘new’ with user defined constructor function. The constructor functions are now replaced by classes as they are supported through ES6 specifications. Let’s see the code now.

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 

These are all the ways I know to create objects in JavaScript. I hope you enjoyed this post and now understand how to create objects.

Thanks for your time for reading this article. If you liked this post and it was helpful to you, please click the clap ? button to show your support. Keep learning more!