Objektorientert Programmering I Javascript (ES5 & ES6) FORKLART.

OOP-Objektorientert Programmering, generelt, er veldig nyttig. Det hjelper utviklere å modellere virkelige ting som vi ønsker å representere i koden vår, og / eller gi en enkel måte å få tilgang til funksjonalitet som ellers ville være vanskelig eller umulig å benytte seg av.
Å Få en full forståelse av HVORDAN OOP fungerer i javascript er litt vanskelig spesielt I ES5 syntaks, ES6 klasse gjort DET mye enklere å bruke object constructor men som utviklere, vil vi kjøre INN ES5 objekt prototype koder langs vår reise og i tilfelle DU ikke vet, ES6 klasse, arbeid som objekt prototyper under panseret.

denne artikkelen vil forklare javascript-objektet I es5 OG ES6 syntaks. Følg med!

HVORFOR BRUKE OBJECT CONSTRUCTOR NOTATION?

Du må ha stilt spørsmål ved behovet for å bruke object constructor og ikke holde fast med objektlitteraler. Vel, objektlitteraler er enkle og rett frem å forstå, men la oss tenke på et scenario der vi ønsker å lage et objekt fra data hentet fra et inntastingsfelt, for eksempel; vi har et nettsted og i vårt nettsted et skjemafelt som ber om navn, e-post, telefonnummer og adresse til brukerne våre. Vi vil bruke dataene fra skjemafeltet til å opprette et objekt som en måte å holde brukerdata sammen og deretter opprette en profil for hver bruker og sørge for at hver bruker skal ha de samme egenskapene(i dette tilfellet navn, e-post, nummer og adresse). Ved hjelp av objekt bokstavelig notasjon krever at vi oppretter et objekt hver gang for hver bruker, for eksempel fra vårt skjema fikk vi disse dataene fra tre (3) brukere:

// 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'}

koden er repeterende og det er mot DET TØRRE(Ikke Gjenta Deg selv) prinsippet om programmering, og vi vil ikke ha det. Den perfekte løsningen på det er å bruke object constructor notation, og deretter lage forekomster av objektet. La oss nå skrive koden ovenfor ved hjelp av object constructor notation og hvordan du lager forekomster av et objekt:-

// 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');

fra koden ovenfor, vi nettopp opprettet, brukte vi en konstruktør funksjon som som navnet tilsier er en funksjon som konstruerer objekt forekomster for å lage objekter fra data hver bruker sendt inn i skjemaet. Det ER TØRT og rent med konstruktørnotasjonen, og verdier fra objektet kan nås med samme syntaks

// 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

la oss forklare noen søkeord som brukes i konstruktørnotasjonen.

  1. dette søkeordet: Hvis du ikke vet før nå, refererer dette søkeordet i konstruktørfunksjonen ovenfor til selve objektet, dvs. this.name = navn vi mener navnet egenskapen til brukeren skal settes til verdien av parameternavnet. dette betyr faktisk forskjellige ting i annen sammenheng, men inne i objektkonstruktøren er det som nevnt ovenfor

  2. det nye søkeordet brukes bare til å instantiere(opprette) et nytt objekt fra konstruktøren.

OBJEKT KONSTRUKTØR I ES5 og ES6

  • ES5 Syntaks

    1. Prototype Og prototypisk Arv:Vi har sett På hvordan objekt konstruktør er skrevet I ES5 syntaks nå la oss se på hva et objekt prototype er. Syntax:
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'; } }}

metoden i konstruktørfunksjonen kan bedre skrives i javascript ved å skrive den som en prototype som denne:

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'; } }

Hva er En Objektprototype? En objektprototype er et objekt som er knyttet til hver forekomst av et objekt som standard I JavaScript. Prototyper lar deg enkelt definere metoder for alle forekomster av en bestemt gjenstand. Dette er veldig nyttig fordi metoden brukes på prototypen, så den lagres bare i minnet en gang, men hver forekomst av objektet har tilgang til den.
vi kan også legge til en egenskap til objektet ved hjelp av en prototype som ikke er mulig normalt etter å ha erklært en konstruktørfunksjon, men den skal bare brukes til egenskaper vi vil at alle forekomster skal dele:

Dog.prototype.breed = 'German shepherd'

Hva om vi har et annet objekt som vi ønsker å ha alle egenskaper og metoder for det første objektet og sine egne spesielle egenskaper og / eller metoder, hva gjør vi holde TØRR i tankene?
svaret på det er gitt av prototyper arv som ganske enkelt betyr ett objekt arve egenskaper og metoder for en annen. for eksempel vil vi at en annen gruppe av hund skal arve noen egenskaper av den første gruppen pluss sine egne spesielle egenskaper (hundvekt):

// 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;}

For Å Arve egenskapene fra den første gruppen brukte vi call () – metoden som brukes til å ringe entreprenøren vi vil arve dens egenskaper, og det tar i dette som den første parameteren og deretter parametrene som skal arves fra den konstruktøren(i dette tilfellet: – dogName og dogAge). Deretter setter vi objektets spesielle egenskap (i dette tilfellet: dogWeight);
dette arver bare egenskapene og ikke prototyper. For å arve prototyper, vil vi si:

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

Med dette har vi gjort 2. gruppe hunder har alle egenskaper og gjenstander av 1.gruppe.

  • ES6 Syntaks

    Klasser I ES6 er det samme Som Object constructor-funksjonen I ES5 under hetten som betyr at begge fungerer på samme måte bare AT ES6 har en mye bedre syntaks som EN av mine favorittlærer (Brad Traversy) kaller «syntaktisk sukker» og også metoder er direkte laget prototyper(gjort tilgjengelig for alle forekomster av Klassen). La oss nå dykke I ES6 klasser.

  1. Deklarere EN ES6 klasse & Konstruktør:
class Person{ constructor(firstName, lastName, age){ this.firstName = firstName; this.lastName = lastName; // PROPERTIES this.age = age; } getAge(){ return `${this.firstName} ${this.lastName}; // METHOD } }

NØKKELORD FORKLARING:
a. klasse – brukes ganske enkelt til å deklarere en klasse(ES6-objekt) den etterfølges av navnet på objektet.
b. constructor-Akkurat som vi brukte funksjonen I ES5 syntaks. constructor brukes konstruere objektet.

MERK: Verdien av objekter I ES^ kan nås på samme måte som I ES5 og også instantiation har samme syntaks.

Så enkelt som det ser ut, har vi nettopp skrevet vårt første objekt ved HJELP AV ES6-klassen.

  1. Arv:Arv I ES6 klassen har en annen syntaks og i innebærer å bruke 2 nye søkeord strekker Og Super, la Oss ta en titt på det. hvis vi vil at et kundeobjekt skal arve fra personobjektet:
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; } }

NØKKELORD FORKLARING:
a. extends: angir At Kundeobjektet arver egenskapene Og metodene Personobjektet har.
B. super: Just asin call () I ES5 objekter, super sier egenskapene arvet, men her trenger vi ikke å bruke dette søkeordet.

MERK: I ES6 trenger vi ikke å skrive en spesiell kodelinje for å arve prototyper. som vi allerede vet, er prototyper tilgjengelige for alle forekomster av klasseobjektet og så arvet av utvidelsesklassen.Til Slutt, la Oss snakke om en spesiell metode som er tilgjengelig I ES6( statiske Metoder):Statiske metoder kommer til nytte når vi har metoder som ikke bruker argument som er gått inn i instantiate (opprett en forekomst) en kopi av et objekt, og vi vil at alle forekomster av objektet skal ha det. for eksempel, hvis vi vil at alle forekomster Av Personobjektet skal ha en kode med «menneske», skriver vi:

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' }}

Like enkelt som det. Men husk Deg, Statiske metoder er definert på selve klassen, og ikke på prototypen.å ringe den statiske metoden i vår klasse ovenfor vil være

Person.isHuman(); 

KONKLUSJON:

jeg vet at denne artikkelen var lang, men jeg tror du har forståelse For Objekt I ES5 OG ES6 syntaks; hva objekt prototype betyr, hvordan å arve fra objekter I ES5 og ES6.es6, samt es6 klasse funksjoner og syntaks.

Takk for at du leser, skål!!!.

Posted on

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.