Kuinka luoda objekteja JavaScriptissä

Me kaikki käsittelemme esineitä tavalla tai toisella kirjoittaessamme koodia ohjelmointikielellä. JavaScriptissä objektit tarjoavat meille keinon tallentaa, käsitellä ja lähettää tietoja verkon kautta.

On monia tapoja, joilla JavaScript-kohteet eroavat muiden valtavirran ohjelmointikielien, kuten Java, objekteista. Yritän käsitellä sitä toisessa aiheessa. Keskitymme tässä vain erilaisiin tapoihin, joilla JavaScript antaa meille mahdollisuuden luoda esineitä.

Ajattele esineitä JavaScriptissä 'key: value' -parien kokoelmana. Tämä tuo meille ensimmäisen ja suosituimman tavan luoda esineitä JavaScriptissä.

Aloitetaan tämä.

1. Objektien luominen objektin kirjaimellisella syntaksilla

Tämä on todella yksinkertaista. Ainoa mitä sinun tarvitsee tehdä, on heittää avainarvoparit erotettuina ':': lla kiharoiden aaltosarjojen ({}) sisälle ja esineesi on valmis tarjoiltavaksi (tai kulutettavaksi), kuten alla:

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

Tämä on yksinkertaisin ja suosituin tapa luoda esineitä JavaScriptiin.

2. Objektien luominen käyttämällä uutta avainsanaa

Tämä objektin luontimenetelmä muistuttaa tapaa, jolla objektit luodaan luokkaperusteisilla kielillä, kuten Java. Muuten, luokat ES6 alkaen alkavat myös Java-kielestä, ja tarkastelemme objektien luomista määrittelemällä luokat tämän artikkelin loppupuolella. Joten, jotta voit luoda objektin käyttämällä uutta avainsanaa, sinulla on oltava konstruktoritoiminto.

Tässä on 2 tapaa käyttää uutta avainsanamallia -

a) Sisäänrakennetun Object constructor -toiminnon "uuden" avainsanan käyttäminen

Luo objekti käyttämällä uutta avainsanaa Object()konstruktorin kanssa, kuten tämä:

const person = new Object();

Nyt, jotta voimme lisätä ominaisuuksia tähän objektiin, meidän on tehtävä jotain tällaista:

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

Olet ehkä ajatellut, että tämä menetelmä on hieman pidempi kirjoittaa. Tätä käytäntöä ei myöskään suositella, koska kulissien takana tapahtuu laajuusresoluutio, jotta voidaan selvittää, onko konstruktoritoiminto sisäänrakennettu vai käyttäjän määrittelemä.

b) Uuden käyttäminen käyttäjän määrittelemän konstruktoritoiminnon kanssa

Toinen ongelma, joka liittyy 'Object' -rakentajatoiminnon käyttötapaan, johtuu siitä, että joka kerta kun luomme objektin, meidän on lisättävä ominaisuudet manuaalisesti luotuun objektiin.

Entä jos meidän olisi luotava satoja henkilöobjekteja? Voit kuvitella kipua nyt. Joten päästä eroon ominaisuuksien manuaalisesta lisäämisestä kohteisiin luomme mukautettuja (tai käyttäjän määrittämiä) toimintoja. Luomme ensin konstruktoritoiminnon ja haemme sitten objektilla 'uusi' avainsanan:

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

Nyt, milloin tahansa haluat 'Henkilö' -objektin, tee vain tämä:

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

3. Luo uusia objekteja Object.create () -toiminnon avulla

Tämä malli on erittäin kätevä, kun meitä pyydetään luomaan objekteja muista olemassa olevista kohteista, emmekä käytä suoraan 'uuden' avainsanan syntaksia. Katsotaanpa, kuinka tätä mallia käytetään. Kuten MDN: ssä todettiin:

Object.create()Menetelmä luo uuden objektin, käyttää olemassa olevaa esinettä prototyyppi uusille objekti.

Object.createMenetelmän ymmärtämiseksi muista vain, että siihen tarvitaan kaksi parametria. Ensimmäinen parametri on pakollinen objekti, joka toimii uuden luotavan objektin prototyyppinä. Toinen parametri on valinnainen objekti, joka sisältää ominaisuudet, jotka lisätään uuteen objektiin.

Emme syvennä nyt prototyyppejä ja perintäketjuja pitämään keskittymisemme aiheeseen. Mutta pikana voit ajatella prototyyppejä esineinä, joista muut esineet voivat lainata tarvitsemiaan ominaisuuksia / menetelmiä.

Kuvittele, että sinulla on organisaatio, jota edustaa orgObject

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

Ja haluat luoda työntekijöitä tälle organisaatiolle. Haluat selvästi kaikki työntekijän esineet.

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

4. Luo uusia objekteja Object.assign () -toiminnon avulla

Entä jos haluamme luoda objektin, jolla on oltava ominaisuuksia useammasta kuin yhdestä objektista? Object.assign()tulee auttamaan.

Kuten MDN: ssä todettiin:

Menetelmää käytetään kopioida kaikki arvot numeroituvien oma ominaisuudet yhdestä tai useammasta lähteestä esineitä kohdeobjektille. Se palauttaa kohdeobjektin. Object.assign()

Object.assignmenetelmä voi ottaa parametreina minkä tahansa määrän objekteja. Ensimmäinen parametri on objekti, jonka se luo ja palauttaa. Loput sille välitetyt objektit käytetään kopioimaan ominaisuudet uuteen objektiin. Ymmärretään se laajentamalla edellistä näkemäämme esimerkkiä.

Oletetaan, että sinulla on kaksi seuraavaa kohdetta:

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

Haluat nyt ABC Corp: n työntekijäobjektin, joka ajaa Ford-autoa. Voit tehdä Object.assignsen alla olevien ohjeiden avulla :

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

Nyt saat employeekohteen, jolla on companyja carNamesen omaisuutena.

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

5. ES6-luokkien käyttäminen objektien luomiseen

Huomaat, että tämä menetelmä on samanlainen kuin uuden käyttäminen käyttäjän määrittelemällä konstruktoritoiminnolla. Konstruktorin toiminnot korvataan nyt luokilla, koska niitä tuetaan ES6-spesifikaatioiden kautta. Katsotaanpa koodi nyt.

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 

Nämä ovat kaikki tapa, jolla tiedän voivani luoda objekteja JavaScriptiin. Toivottavasti pidit tästä viestistä ja ymmärrät nyt kuinka luoda esineitä.

Kiitos ajastasi tämän artikkelin lukemiselle. Jos pidit tästä viestistä ja siitä oli sinulle hyötyä, napsauta taputusta? -painiketta osoittaaksesi tukesi. Jatka oppimista lisää!