Hva er en prototype i JavaScript

JavaScript er en dynamisk og prototypebasert språk, og prototyper er derfor et av de viktigste konseptene i JavaScript. La oss først diskutere hvorfor vi trenger prototyper.

Hvorfor trenger vi prototyper?

Som nevnt tidligere er JavaScript et dynamisk språk som betyr at vi kan legge til egenskaper til et objekt når vi vil ha. La oss gå gjennom et eksempel for å forklare dette:

funksjonsspiller ()
dette.Navn = 'Hazard';
dette.klubb = 'Chelsea';

var spiller1 = ny spiller ();
Player1.Alder = 30;
Varsel (spiller1.alder);
var spiller2 = ny spiller ();
Varsel (Player2.alder);

I dette eksemplet ga vi en annen eiendom til objektspilleren. Imidlertid vil det første objektet I-E Player1 ha alderseiendom, men ikke det andre objektet I-E Player2. Årsaken til dette er at aldersegenskapen bare er definert for Player1 -objektet.

Vi kan se Player2 -objektet viser udefinert i eksemplet ovenfor: eksemplet ovenfor:

Nå som vi vet hvilket problem vi står overfor, oppstår spørsmålet: Hva er løsningen? Løsningen på dette problemet er "prototype".

Løsning

Prototyper er et innebygd funksjon i JavaScript. Hver gang du oppretter en JavaScript -funksjon, legger JavaScript automatisk til en prototype til den funksjonen. Vi kan si at en prototype er et objekt som lar deg legge til nye egenskaper til et eksisterende objekt. Kort sagt, prototyper inneholder en baseklasse av alle objekter, og hjelper oss å oppnå arv.

Vi kan knytte flere egenskaper til prototypeobjektet som deretter vil bli delt på alle tilfeller.

Nå vil vi bruke prototypeegenskaper i eksemplet ovenfor for å løse problemet med å dele aldersegenskaper til alle objektene I-E Player1 og Player2.

funksjonsspiller ()
dette.Navn = 'Hazard';
dette.klubb = 'Chelsea';

Spiller.prototype.Alder = 30;
var spiller1 = ny spiller ();
Varsel (spiller1.alder);
var spiller2 = ny spiller ();
Varsel (Player2.alder);

Vi vil se at begge spillernes aldre vil være 30 nå. Utgangen vises nedenfor:

For å være ganske enkelt, hjelper prototypeegenskapen til JavaScript oss med å legge til nye egenskaper til objektkonstruktører som vist i eksemplet ovenfor.

Prototypeegenskap til et objekt

Hvert objekt som initieres ved hjelp av bokstavelig syntaks eller initiert ved hjelp av konstruktørsyntaks ved hjelp av det nye nøkkelordet, inkluderer __proto__ -egenskapen. Dette vil peke på prototypeobjektet som opprettet dette objektet.

Hvis du ønsker å se prototypeegenskapen til et objekt, kan vi se den i feilsøkingsutviklerverktøyet. I eksemplet nedenfor vil vi implementere det og vil se det i konsollvinduet.

Eksempel

funksjonsspiller ()
dette.Navn = 'Hazard';
dette.klubb = 'Chelsea';

var PlayerObject = New Player ();
// Konsollvindu
konsoll.Logg (spiller.prototype);
konsoll.Logg (PlayerObject.prototype);
konsoll.Logg (PlayerObject.__proto__);
konsoll.logg (type av spiller);
konsoll.Logg();

I dette eksemplet kan vi se at funksjonsprototypeegenskapen får tilgang til ved hjelp av funksjonsnavnet som er spilleren.prototype.

Vi kan også se i dette eksemplet at prototypeegenskapen ikke er utsatt for objektet, vi kan bare få tilgang til den ved å bruke “__proto__”.

Objektets prototype

I forrige eksempel så vi at objektprototypeegenskapen er udefinert, noe som betyr at den er usynlig. Vi kan bruke objektet.getPrototypeOf (OBJ) metode i stedet for den vi brukte i-e “__proto__”. Av dette vil det ikke være udefinert, og vi vil kunne få tilgang til prototypeobjektet.

funksjonsspiller ()
dette.Navn = 'Hazard';
dette.klubb = 'Chelsea';

var PlayerObject = New Player ();
Spiller.prototype.valgt = funksjon ()
Varsel ("valgt for dagens team");

var spiller1 = ny spiller ();
var checkingproto = objekt.getPrototypeOf (Player1);
// dette vil returnere spiller1 prototypeobjekt
Varsel (CheckingProto.konstruktør);
// dette vil returnere Player1 -funksjonen som er valgt

Konklusjon

I denne artikkelen diskuterte vi hovedsakelig det grunnleggende konseptet med prototyper i JavaScript. Vi gravde litt dypere og diskuterte hva som er en prototype i JavaScript. Vi diskuterte også et problem og ga løsningen ved hjelp av prototypen. Bortsett fra dette diskuterte vi å finne objektegenskaper og metoder i JavaScript ved hjelp av prototyper. Alt dette ble demonstrert ved hjelp av eksempler for å utvikle bedre forståelse av konseptet.