JavaScriptin rakentajien ymmärtäminen

JavaScript on vakiintunut kieli, mutta se lisäsi vain klassisen olioohjelmoinnin (OOP) tuen ES6: ssa. Ennen kuin JavaScript lisäsi ominaisuuksia, kuten luokkailmoitukset, se käsitteli OOP: ta käyttämällä vähemmän tunnettua prototyyppipohjaista paradigmaa. Kummallakin lähestymistavalla voit kuitenkin luoda monimutkaisia ​​sovelluksia, jotka käyttävät objektipohjaisia ​​ominaisuuksia.

Prototyyppisen JavaScriptin konstruktori näyttää samanlaiselta kuin mikä tahansa muu funktio. Suurin ero on, että voit käyttää tätä konstruktoritoimintoa objektien luomiseen.

Mikä on konstruktori JavaScriptissä?

Rakentajat ovat yksi niistä olio-ohjelmoinnin peruskäsitteet. Konstruktori on funktio, jonka avulla voit luoda objektin esiintymän. Uuden objektin luomisen lisäksi rakentaja määrittää sille kuuluvat ominaisuudet ja käyttäytymiset.

Rakentajan syntaksi

toimintoNameOfConstructor() {
 this.property1 = "Kiinteistö 1";
 this.property2 = "Kiinteistö 2";
 this.property3 = "Kiinteistö 3";
}

Voit luoda konstruktorin komennolla

1. Erota ne muista funktioista käyttämällä rakentajan nimeä, joka alkaa isolla kirjaimella.
2. Rakentajat käyttävät Tämä avainsana eri tavalla. Rakentajan sisällä, Tämä viittaa uuteen objektiin, jonka rakentaja luo.
3. Toisin kuin JavaScript-funktiot, rakentajat määrittelevät ominaisuudet ja käyttäytymisen arvojen palauttamisen sijaan.

Konstruktorin käyttäminen uusien objektien luomiseen

JavaScriptissä konstruktorin käyttäminen objektin luomiseen on helppoa. Tässä on yksinkertainen konstruktori, jota seuraa kutsu:

toimintoOpiskelija() {
 this.name = "Gloria";
 this.gender = "Nainen";
Tämä.ikä = 19;
}
antaa naisopiskelija = Uusi Opiskelija();

Tässä esimerkissä naispuolinen oppilas on objekti, joka on luotu Opiskelija rakentaja. Käytä Uusi avainsana kutsumaan funktiota rakentajana. Tämä avainsana käskee JavaScriptiä luomaan uuden esiintymän Opiskelija. Sinun ei pitäisi kutsua tätä toimintoa ilman Uusi avainsana, koska Tämä rakentajan sisällä ei osoita uuteen objektiin. Rakentamisen jälkeen, naispuolinen oppilas sillä on kaikki ominaisuudet Opiskelija. Voit käyttää ja muokata näitä ominaisuuksia aivan kuten minkä tahansa muun objektin kanssa.

Tärkeää tietää JavaScript-konstruktoreista

Rakentajien kanssa työskentely voi olla niin väsyttävää, ja samalla se voi olla helppoa. Tässä on joitain tärkeitä asioita, jotka jokaisen kehittäjän tulisi tietää rakentajien kanssa työskentelystä.

Rakentajien käyttäminen argumenttien kanssa

Voit laajentaa konstruktoria vastaanottamaan argumentteja. Tämä on erittäin tärkeää, jos haluat kirjoittaa reagoivaa, joustavaa koodia.

Aina kun luot objektin konstruktorista, objekti perii kaikki konstruktorissa määritellyt ominaisuudet. Esimerkiksi, naispuolinen oppilas luomasi yllä on ominaisuuksia nimi, sukupuoli, ja ikä kiinteillä alkuarvoilla. Vaikka voit muuttaa jokaista ominaisuutta manuaalisesti, olisi paljon työtä, jos kirjoitat ohjelmaa käyttämällä monia objekteja.

Onneksi JavaScript-konstruktorit voivat hyväksyä parametreja, kuten mikä tahansa muu funktio. Voit muuttaa Opiskelija rakentaja hyväksyy kaksi parametria:

toimintoOpiskelija(nimi, sukupuoli) {
Tämä.name = nimi;
Tämä.gender = sukupuoli;
Tämä.ikä = 19;
}

Voit nyt määrittää yksilöllisiä objekteja samasta rakentajasta antamalla eri argumentteja.

Argumentit tekevät rakentajista joustavampia. Ne säästävät aikaa ja edistävät puhdasta koodia.

Objektimenetelmien määrittely

Metodi on objektin ominaisuus, joka on funktio. Menetelmät parantavat koodiasi OOP: ssa, koska se lisää erilaisia ​​käyttäytymismalleja objekteihisi. Tässä on esimerkki:

toimintoOpiskelija(nimi, sukupuoli) {
Tämä.name = nimi;
Tämä.gender = sukupuoli;
Tämä.ikä = 19 ;
Tämä.sayName = toiminto () {
palata`Nimeni on ${name}`; 
 }
}

Yllä oleva lisää toiminnon sano Nimi rakentajalle.

Oletetaan, että käytät tätä konstruktoria luodaksesi objektin, jonka tallennat muuttujaan, naispuolinen oppilas. Voit sitten kutsua tätä toimintoa alla olevalla koodilla:

naispuolinen oppilas.sayName()

prototyyppi

Aiemmin loimme Opiskelija tavalla, että kaikilla sen esiintymillä on an ikä omaisuutta, jonka arvo on 19. Tämä johtaa siihen, että jokaiselle on monistettu muuttuja Opiskelija luomasi esimerkki.

Tämän päällekkäisyyden välttämiseksi JavaScript käyttää prototyyppien käsitettä. Kaikki konstruktorista luodut objektit jakavat sen prototyypin ominaisuudet. Voit lisätä ikä omaisuutta Opiskelija prototyyppi alla olevan kuvan mukaisesti:

Opiskelija.prototyyppi.ikä = 19;

Tekemällä tämän kaikki tapaukset Opiskelija tulee olemaan ikä omaisuutta. julistaa prototyypin ominaisuudet on tapa vähentää päällekkäistä koodia sovelluksessasi. Se tekee koodistasi mahdollisimman standardin.

Prototyyppikiinteistö voi olla esine

Voit lisätä Prototype-ominaisuuksia yksitellen yllä kuvatulla tavalla. Mutta jos sinulla on monia lisättäviä ominaisuuksia, tämä voi olla hankalaa.

Vaihtoehtoisesti voit sisältää kaikki tarvitsemasi ominaisuudet uuteen objektiin. Näin määrität kaikki ominaisuudet kerralla. Esimerkiksi:

Student.prototype = {
 ikä: 19,
 rotu: "Valkoinen",
 vammaisuus: "Ei mitään"
}

Student.prototype = { 
rakentaja: Opiskelija, 
 ikä: 19, 
 rotu: "Valkoinen", 
 vammaisuus: "Ei mitään"
}

Supertyypit ja perinnöllisyys

Perintö on menetelmä, jota ohjelmoijat käyttävät vähentääkseen virheitä sovelluksissaan. Se on tapa pitää kiinni Älä toista itseäsi (KUIVA) periaate.

Oletetaan, että sinulla on kaksi rakentajaa -Opiskelija ja Opettaja-joilla on kaksi samanlaista prototyyppiominaisuutta.

Student.prototype = { 
rakentaja: Opiskelija,
sayName: toiminto () {
palata`Nimeni on ${name}`; 
 }
}
Teacher.prototype = { 
rakentaja: Opettaja,
sayName: toiminto () {
palata`Nimeni on ${name}`;
 }
}

Molemmat rakentajat määrittelevät sano Nimi menetelmällä identtisesti. Voit välttää tämän tarpeettoman päällekkäisyyden luomalla a supertyyppi.

toimintoYksittäiset tiedot(){};
IndividualDetails.prototype = { 
rakentaja: Yksilölliset tiedot, 
sayName: toiminto () {
palata`Nimeni on ${name}`; 
 }
};

Voit sitten poistaa sano Nimi molemmilta rakentajilta.

Jos haluat periä supertyypin ominaisuudet, käytä Object.create(). Asetat molempien konstruktoreiden prototyypin supertyypin esiintymään. Tässä tapauksessa asetamme Opiskelija ja Opettaja prototyypit IndividualDetails-esiintymään.

Tässä se on:

Opiskelija.prototyyppi = Esine.create (IndividualDetails.prototype);
Opettaja.prototyyppi = Esine.create (IndividualDetails.prototype);

Tekemällä tämän, Opiskelija ja Opettaja perii kaikki supertyypin ominaisuudet, Yksittäiset tiedot.

Näin harjoittelet DRY: ää OOP: ssa supertyypeillä.

Rakentajat ovat pelin vaihtajia

Rakentajat ovat JavaScriptin avainkomponentti, ja niiden toiminnallisuuden hallitseminen on ratkaisevan tärkeää OOP JavaScript -sovellusten kehittämisessä. Konstruktorin avulla voit luoda objekteja, joilla on yhteiset ominaisuudet ja menetelmät. Voit myös käyttää periytymistä objektihierarkioiden määrittämiseen.

ES6:ssa voit käyttää luokkaa avainsana klassisten olio-luokkien määrittelemiseen. Tämä JavaScript-versio tukee myös a rakentaja avainsana.