Object-Oriented Programming in Javascript (ES5 & ES6) selitettynä.

OOP – Olio-ohjelmointi on yleisesti ottaen erittäin hyödyllistä. Se auttaa kehittäjiä mallintamaan reaalimaailman asioita, joita haluamme edustaa koodimme sisällä, ja / tai tarjoamaan yksinkertaisen tavan käyttää toimintoja, joita muuten olisi vaikea tai mahdoton hyödyntää.
täyden ymmärryksen saaminen siitä, miten OOP toimii javascriptissä on hieman vaikeaa erityisesti ES5-syntaksissa, ES6-luokka teki object constructorin käytöstä paljon helpompaa, mutta kehittäjinä törmäämme ES5-objektin prototyyppikoodeihin matkamme varrella ja jos et tiedä, ES6-luokka toimii objektin prototyyppeinä konepellin alla.

tässä artikkelissa selitetään javascript-objekti ES5-ja ES6-syntaksilla. Pysykää kuulolla!

miksi käyttää objektin rakentajan merkintää?

olet varmaankin kyseenalaistanut tarpeen käyttää object constructoria ja olla pitäytymättä object literalsissa. No, object literals on helppo ja suoraviivainen ymmärtää, mutta Ajatellaanpa skenaariota, jossa haluamme luoda objektin esimerkiksi syöttökentästä saaduista tiedoista; meillä on verkkosivusto ja sivuillamme lomakenttä, joka pyytää käyttäjiemme nimeä, sähköpostia, puhelinnumeroa ja osoitetta. Haluamme käyttää lomakekentästä saatuja tietoja luodaksemme objektin, jotta voimme pitää käyttäjätiedot yhdessä ja luoda sitten profiilin jokaiselle käyttäjälle ja varmistaa, että jokaisella käyttäjällä tulee olla samat ominaisuudet(tässä tapauksessa nimi, sähköposti, numero ja osoite). Objektin kirjaimellinen notaatio vaatii meitä luomaan objektin joka kerta jokaiselle käyttäjälle, esimerkiksi lomakkeestamme saimme nämä tiedot kolmelta(3) käyttäjältä:

// 1st userconst user1 = { name: 'Precious', email: '[email protected]', number: '+234-810-5025-740', address: 'Earth'}// 2nd Userconst user2 = { name: 'Frank', email: '[email protected]', number: '+234-800-5525-540', address: 'Jupiter'}// 3rd Userconst user3 = { name: 'Charles', email: '[email protected]', number: '+234-810-4985-376', address: 'Mars'}

koodi on toistuva ja se on vastoin ohjelmoinnin kuivaa (älä toista itseäsi) periaatetta, emmekä halua sitä. Täydellinen ratkaisu tähän on objekti constructor notaatio, ja sitten tehdä esiintymiä objektin. Nyt kirjoitetaan yllä olevaa koodia käyttäen objekti constructor notaatio ja miten tehdä esiintymiä objektin:-

// Object Constructor(ES5)function User(name, email, number, address){ this.name = name; this.email = email; this.number= number; this.address = address;}// Instances// 1st userconst user1 = new User('Precious', '[email protected]', '+234-810-5025-740', 'Earth');// 2nd userconst user2 = new User('Frank', '[email protected]', '+234-800-5525-540', 'Jupiter');// 3rd Userconst user3 = new User('Charles', '[email protected]', '+234-810-4985-376', 'Mars');

yllä olevasta koodista, me juuri loimme, käytimme konstruktorifunktiota, joka nimensä mukaisesti on funktio, joka konstruoi objekti-instansseja luodakseen objekteja kunkin käyttäjän lomakkeessa toimittamasta datasta. Se on kuiva ja puhdas konstruktorin notaatiolla, ja objektin arvoja voidaan käyttää samalla syntaksilla

// OBJECT LITERAL NOTATION// To get the name of the first user. console.log(user1.name) // Precious// OBJECT CONSTRUCTOR NOTATION(ES5)// To get the name of the first user. console.log(user1.name) // Precious

Selitetäänpä joitakin konstruktorin notaatiossa käytettyjä avainsanoja.

  1. tämä avainsana: Jos et tiedä ennen Nyt, tämä avainsana constructor funktio edellä viittaa objekti itse eli käyttäjä, tarkoittaen sanomalla this.name = nimi tarkoitamme nimen ominaisuus kyseisen käyttäjän tulisi asettaa arvoon parametrin nimi. tämä tarkoittaa itse asiassa eri asioita eri kontekstissa, mutta objektin konstruktorin sisällä on kuten edellä on todettu

  2. uutta avainsanaa käytetään yksinkertaisesti instantioimaan(luomaan) uusi objekti konstruktorista.

OBJECT CONSTRUCTOR ES5:ssä ja ES6: ssa

  • ES5: n syntaksi

    1. prototyyppi ja prototyyppien periytyminen: olemme tarkastelleet miten object constructor on kirjoitettu ES5: n syntaksilla nyt katsotaan, mikä objektin prototyyppi on. Syntaksi:
function Dog(name, age){ // Properties this.name = name; this.age = age; // Method this.canBark = function(){ if(this.age => '180 days'){ return 'YES'; } else{ return 'NO'; } }}

rakentajan funktion menetelmä voidaan paremmin kirjoittaa JavaScriptillä kirjoittamalla se prototyyppinä näin:

function Dog(name, age){ // Properties this.name = name; this.age = age;}// Object Prototype Dog.prototype.canBark = function(){ if(this.age => '180 days'){ return 'YES'; } else{ return 'NO'; } }

nyt, mikä on objektin prototyyppi? Objektin prototyyppi on objekti, joka liittyy oletusarvoisesti objektin jokaiseen esiintymään Javascriptissä. Prototyyppien avulla voit helposti määritellä menetelmiä kaikkiin tietyn objektin esiintymiin. Tämä on erittäin hyödyllinen siinä mielessä, että menetelmää sovelletaan prototyyppiin, joten se tallennetaan muistiin vain kerran, mutta jokaisella olion esiintymällä on siihen pääsy.
Voimme myös lisätä objektiin ominaisuuden käyttämällä prototyyppiä, joka ei ole mahdollista normaalisti konstruktorin funktion julistamisen jälkeen, mutta sitä tulisi käyttää vain ominaisuuksille, jotka haluamme kaikkien instanssien jakavan:

Dog.prototype.breed = 'German shepherd'

Mitä jos meillä on toinen objekti, jolla haluamme olla kaikki ensimmäisen objektin ominaisuudet ja menetelmät sekä niiden omat erityisominaisuudet ja / tai menetelmät, mitä teemme pitäen kuivana mielessä?
vastauksen tähän tarjoaa prototyyppien perintö, joka tarkoittaa yksinkertaisesti sitä, että yksi objekti perii toisen ominaisuuksia ja menetelmiä. esimerkiksi, haluamme toisen ryhmän koira periä joitakin ominaisuuksia ensimmäisen ryhmän plus omia erityisiä ominaisuuksia (koiran paino):

// Group 1function Group1(dogName, dogAge){ // Properties this.dogName = dogName; this.dogAge = dogAge;}// Object Prototype Group1.prototype.canBark = function(){ if(this.dogAge => '180 days'){ return 'YES'; } else{ return 'NO'; } }// Group 2function Group2(dogName, dogAge, dogWeight){ Group1.call(this, dogName, dogAge); this.dogWeight = dogWeight;}

periäksemme ominaisuudet ensimmäiseltä ryhmältä käytimme kutsumenetelmää (), jolla kutsutaan urakoitsijaa perimään sen ominaisuudet, ja se ottaa ensimmäisenä parametrina tämän ja sitten kyseiseltä rakentajalta perittävät parametrit(tässä tapauksessa:- dogName ja dogAge). Jonka jälkeen asetamme objektin erityisomaisuuden (tässä tapauksessa: dogWeight);
Tämä perii vain ominaisuudet eikä prototyyppejä. Periä prototyyppejä, sanomme:

Group2.prototype = object.create(Group1.prototype);

tällä olemme saaneet toisen koiraryhmän omistamaan kaikki 1.ryhmän ominaisuudet ja esineet.

  • ES6: n syntaksi

    luokat ES6: ssa on sama kuin Object constructor-funktio ES5: ssä konepellin alla, mikä tarkoittaa, että molemmat toimivat samalla tavalla vain, että ES6: ssa on paljon parempi syntaksi, jota eräs suosikkiopettajani(Brad Traverery) kutsuu ”syntaktiseksi sokeriksi”, ja myös menetelmät tehdään suoraan prototyypeiksi(kaikkien luokan instanssien saataville). Nyt sukelletaan ES6-luokissa.

  1. julistaa ES6 – luokan & konstruktori:
class Person{ constructor(firstName, lastName, age){ this.firstName = firstName; this.lastName = lastName; // PROPERTIES this.age = age; } getAge(){ return `${this.firstName} ${this.lastName}; // METHOD } }

avainsanat selitys:
A. Luokka-julistetaan yksinkertaisesti luokan(ES6-objekti) sen perässä on kohteen nimi.
B. constructor – aivan kuten käytimme funktiota ES5-syntaksissa. constructor käytetään rakentaa objekti.

huomautus: objektien arvoa ES^: ssä voidaan käyttää samalla tavalla kuin ES5: ssä ja myös instantiaatiossa on sama syntaksi.

niin yksinkertaiselta kuin se näyttää, olemme juuri kirjoittaneet ensimmäisen objektimme käyttäen ES6-luokkaa.

  1. perintö:Perintö ES6-luokassa on erilainen syntaksi ja siihen liittyy 2 uuden avainsanan laajennuksia ja Super, Katsotaanpa katsomaan sitä. jos haluamme asiakasobjektin perivän henkilöobjektilta:
class Person{ constructor(firstName, lastName, age){ this.firstName = firstName; this.lastName = lastName; this.age = age; } getAge(){ return `${this.firstName} ${this.lastName}; } }class Customer extends Person{ constructor(firstName, lastName, age, memberShip){ Super(firstName, lastName, age) this.memberShip = memberShip; } }

avainsanat selitys:
A. extends : määrittää, että Asiakasobjekti perii Henkilöobjektin ominaisuudet ja menetelmät.
B. super: Just asin call () in ES5 objects, super ilmoittaa perityt ominaisuudet, mutta tässä ei tarvitse käyttää tätä avainsanaa.

huomautus: ES6: ssa meidän ei tarvitse kirjoittaa erityistä koodiriviä periäksemme prototyyppejä. kuten jo tiedämme, prototyyppejä ovat saatavilla kaikki esiintymät luokan objektin ja niin perinyt laajennettavan luokan.

  1. lopuksi, puhutaanpa erityinen menetelmä saatavilla ES6( staattiset menetelmät):staattiset menetelmät ovat käteviä, kun meillä on menetelmiä, jotka eivät hyödynnä argumentti välitetään instantiate(luo instanssi) kopio objektin ja haluamme kaikki esiintymät objektin on se. jos esimerkiksi haluamme, että kaikissa Henkilöobjektin esiintymissä on tunniste”ihminen”, kirjoitamme:
class Person{ constructor(firstName, lastName, age){ this.firstName = firstName; this.lastName = lastName; this.age = age; } getAge(){ return `${this.firstName} ${this.lastName}; } static isHuman(){ return 'Is a Human' }}

aivan yhtä yksinkertaista. Mutta staattiset menetelmät määritellään itse luokalle, ei prototyypille.

tämä tarkoittaa, että staattista menetelmää ei voi kutsua instanssilla, vaan itse luokalla, esim.staattista menetelmää kutsumalla yllä oleva luokka on

Person.isHuman(); 

johtopäätös:

tiedän, että tämä artikkeli oli pitkä, mutta uskon, että sinulla on ymmärrys objektista ES5: ssä ja ES6: ssa; mitä objektin prototyyppi tarkoittaa, miten periä olioista ES5: ssä ja ES6, sekä ES6-luokan ominaisuudet ja syntaksi.

Kiitos lukemisesta, kippis!!!.

Posted on

Vastaa

Sähköpostiosoitettasi ei julkaista.