JavaScript Luo objekti - Kuinka määritellä objektit JS: ssä

Objektit ovat päälähde kapseloinnissa olio-ohjelmoinnissa. Tässä artikkelissa kuvataan useita tapoja rakentaa objekteja JavaScriptiin. He ovat:

  • Kohteen kirjaimellinen
  • Object.create ()
  • Luokat
  • Tehtaan toiminnot

Kohteen kirjaimellinen

Ensinnäkin meidän on tehtävä ero tietorakenteiden ja olio-kohteiden välillä. Tietorakenteilla on julkista tietoa eikä käyttäytymistä. Tämä tarkoittaa, että heillä ei ole menetelmiä.

Voimme helposti luoda tällaisia ​​objekteja objektin kirjaimellisen syntaksin avulla. Se näyttää tältä:

const product = { name: 'apple', category: 'fruits', price: 1.99 } console.log(product);

JavaScript-objektit ovat dynaamisia avainarvoparien kokoelmia. Avain on aina merkkijono, ja sen on oltava ainutlaatuinen kokoelmassa. Arvo voi olla primitiivinen, esine tai jopa funktio.

Voimme käyttää omaisuutta käyttämällä piste- tai neliömerkintää.

console.log(product.name); //"apple" console.log(product["name"]); //"apple"

Tässä on esimerkki, jossa arvo on toinen objekti.

const product = { name: 'apple', category: 'fruits', price: 1.99, nutrients : { carbs: 0.95, fats: 0.3, protein: 0.2 } }

carbsOminaisuuden arvo on uusi kohde. Näin pääsemme carbskiinteistöön.

console.log(product.nutrients.carbs); //0.95

Lyhyet omaisuuden nimet

Tarkastellaan tapausta, jossa ominaisuuksien arvot on tallennettu muuttujiin.

const name = 'apple'; const category = 'fruits'; const price = 1.99; const product = { name: name, category: category, price: price }

JavaScript tukee ns. Lyhytaikaisia ​​omaisuuden nimiä. Sen avulla voimme luoda objektin vain muuttujan nimellä. Se luo saman nimisen ominaisuuden. Seuraava objektin kirjaimellinen vastaa edellistä.

const name = 'apple'; const category = 'fruits'; const price = 1.99; const product = { name, category, price }

Object.create

Seuraavaksi katsotaan miten objekteja voidaan käyttää käyttäytymällä, olio-objekteja.

JavaScriptillä on niin kutsuttu prototyyppijärjestelmä, joka sallii käyttäytymisen jakamisen esineiden välillä. Pääajatuksena on luoda esine, jota kutsutaan prototyypiksi, jolla on yhteinen käyttäytyminen, ja käyttää sitä sitten uusien objektien luomisessa.

Prototyyppijärjestelmän avulla voimme luoda esineitä, jotka perivät käyttäytymisen muilta esineiltä.

Luodaan prototyyppi-objekti, jonka avulla voimme lisätä tuotteita ja saada kokonaishinnan ostoskorista.

const cartPrototype = { addProduct: function(product){ if(!this.products){ this.products = [product] } else { this.products.push(product); } }, getTotalPrice: function(){ return this.products.reduce((total, p) => total + p.price, 0); } }

Huomaa, että tällä kertaa ominaisuuden arvo addProducton funktio. Voimme myös kirjoittaa edellisen objektin lyhyemmällä lomakkeella, jota kutsutaan lyhennemenetelmän syntaksiksi.

const cartPrototype = { addProduct(product){/*code*/}, getTotalPrice(){/*code*/} }

Se cartPrototypeon prototyyppi-objekti, joka pitää yhteisen käyttäytymisen edustettuna kahdella menetelmällä, addProductja getTotalPrice. Sitä voidaan käyttää rakentamaan muita objekteja, jotka perivät tämän käyttäytymisen.

const cart = Object.create(cartPrototype); cart.addProduct({name: 'orange', price: 1.25}); cart.addProduct({name: 'lemon', price: 1.75}); console.log(cart.getTotalPrice()); //3

cartKohde on cartPrototypesen prototyyppi. Se perii käyttäytymisen siitä. carton piilotettu ominaisuus, joka osoittaa prototyyppi-objektiin.

Kun käytämme menetelmää objektissa, sitä etsitään ensin itse objektista eikä sen prototyypistä.

Tämä

Huomaa, että käytämme erityistä avainsanaa, jota kutsutaan thisobjektin tietojen käyttämiseen ja muokkaamiseen.

Muista, että funktiot ovat itsenäisiä käyttäytymisen yksiköitä JavaScriptissä. Ne eivät välttämättä ole osa esinettä. Kun ne ovat, meillä on oltava viite, jonka avulla toiminto voi käyttää muita saman objektin jäseniä. thison funktion konteksti. Se antaa pääsyn muihin kiinteistöihin.

Tiedot

Saatat ihmetellä, miksi emme ole määrittäneet ja alustaneet productsomaisuutta itse prototyyppi-objektissa.

Meidän ei pitäisi tehdä sitä. Prototyyppejä tulisi käyttää käyttäytymisen, ei tietojen jakamiseen. Tietojen jakaminen johtaa samojen tuotteiden käyttämiseen useilla ostoskorikohteilla. Harkitse alla olevaa koodia:

const cartPrototype = { products:[], addProduct: function(product){ this.products.push(product); }, getTotalPrice: function(){} } const cart1 = Object.create(cartPrototype); cart1.addProduct({name: 'orange', price: 1.25}); cart1.addProduct({name: 'lemon', price: 1.75}); console.log(cart1.getTotalPrice()); //3 const cart2 = Object.create(cartPrototype); console.log(cart2.getTotalPrice()); //3

Sekä cart1ja cart2esineet peritäänkö samanlainen käytös pois cartPrototypemyös jakaa samat tiedot. Emme halua sitä. Prototyyppejä tulisi käyttää käyttäytymisen, ei tietojen jakamiseen.

Luokka

Prototyyppijärjestelmä ei ole yleinen tapa rakentaa esineitä. Kehittäjät tuntevat paremmin esineiden rakentamisen luokkien ulkopuolelle.

Luokan syntaksin avulla voidaan luoda tutumpi tapa luoda yhteisen käyttäytymisen omaavia objekteja. Se luo edelleen saman prototyypin näyttämön taakse, mutta syntaksia on selkeämpi ja vältämme myös edellisen dataan liittyvän ongelman. Luokka tarjoaa tietyn paikan määrittää kullekin objektille erilliset tiedot.

Tässä on sama objekti, joka on luotu luokan sokerisyntaksilla:

class Cart{ constructor(){ this.products = []; } addProduct(product){ this.products.push(product); } getTotalPrice(){ return this.products.reduce((total, p) => total + p.price, 0); } } const cart = new Cart(); cart.addProduct({name: 'orange', price: 1.25}); cart.addProduct({name: 'lemon', price: 1.75}); console.log(cart.getTotalPrice()); //3 const cart2 = new Cart(); console.log(cart2.getTotalPrice()); //0

Huomaa, että luokassa on konstruktorimenetelmä, joka alustaa kyseisen tiedon jokaiselle uudelle objektille. Konstruktorin tietoja ei jaeta ilmentymien välillä. Uuden esiintymän luomiseksi käytämme newavainsanaa.

Luulen, että luokan syntaksi on selkeämpi ja tuttu useimmille kehittäjille. Siitä huolimatta se tekee samanlaisen asian, se luo prototyypin kaikilla menetelmillä ja käyttää sitä uusien objektien määrittelemiseen. Prototyyppiin pääsee osoitteella Cart.prototype.

On käynyt ilmi, että prototyyppijärjestelmä on riittävän joustava sallimaan luokan syntaksin. Joten luokkajärjestelmä voidaan simuloida prototyyppijärjestelmällä.

Yksityiset kiinteistöt

Ainoa asia on, productsettä uuden objektin ominaisuus on oletusarvoisesti julkinen.

console.log(cart.products); //[{name: "orange", price: 1.25} // {name: "lemon", price: 1.75}]

Voimme tehdä siitä yksityisen käyttämällä hash- #etuliitettä.

Yksityiset kiinteistöt ilmoitetaan #namesyntaksilla. #on osa kiinteistön nimeä, ja sitä tulisi käyttää ilmoittaessa omaisuutta ja käytettäessä sitä. Tässä on esimerkki ilmoituksesta productsyksityisomaisuudeksi:

class Cart{ #products constructor(){ this.#products = []; } addProduct(product){ this.#products.push(product); } getTotalPrice(){ return this.#products.reduce((total, p) => total + p.price, 0); } } console.log(cart.#products); //Uncaught SyntaxError: Private field '#products' must be declared in an enclosing class

Tehtaan toiminnot

Toinen vaihtoehto on luoda esineitä suljinkokoelmina.

Sulkeminen on toiminnon kyky käyttää muuttujia ja parametreja toisesta toiminnosta myös sen jälkeen, kun ulompi toiminto on suoritettu. Katso cartesine, joka on rakennettu ns. Tehdasfunktioksi.

function Cart() { const products = []; function addProduct(product){ products.push(product); } function getTotalPrice(){ return products.reduce((total, p) => total + p.price, 0); } return { addProduct, getTotalPrice } } const cart = Cart(); cart.addProduct({name: 'orange', price: 1.25}); cart.addProduct({name: 'lemon', price: 1.75}); console.log(cart.getTotalPrice()); //3

addProductja getTotalPriceovat kaksi sisäistä toimintoa, jotka käyttävät muuttujaa productsvanhemmistaan. Heillä on pääsy productsmuuttuvaan tapahtumaan, kun vanhempi Carton suorittanut. addProductja getTotalPriceovat kaksi sulkemista, joilla on sama yksityinen muuttuja.

Cart on tehtaan toiminto.

Tehdasfunktiolla cartluotu uusi objekti sisältää productsmuuttujan private. Sitä ei voi käyttää ulkopuolelta.

console.log(cart.products); //undefined

Tehtaan toiminnot eivät tarvitse newavainsanaa, mutta voit käyttää sitä jos haluat. Se palauttaa saman objektin riippumatta siitä, käytätkö sitä vai et.

Kertaus

Työskentelemme yleensä kahden tyyppisten objektien kanssa, tietorakenteiden kanssa, joissa on julkista dataa eikä käyttäytymistä, ja olio-kohteissa, joissa on yksityisiä tietoja ja julkista käyttäytymistä.

Tietorakenteet voidaan helposti rakentaa objektin kirjaimellisella syntaksilla.

JavaScript tarjoaa kaksi innovatiivista tapaa luoda olio-objekteja. Ensimmäinen on prototyyppiobjektin käyttäminen yhteisen käyttäytymisen jakamiseen. Objektit perivät muista esineistä. Luokat tarjoavat mukavan sokerisyntaksin tällaisten esineiden luomiseen.

Toinen vaihtoehto on määritellä, että objektit ovat suljinkokoelmia.

Lisätietoja sulkemisista ja toimintojen ohjelmointitekniikoista on kirjasarjassa Functional Programming with JavaScript and React.

Functional Programming JavaScript kirja tulee ulos.