Madame Lelica

Innledning

JavaScript er en prototype-basert språk, og hvert objekt i JavaScript har en skjult interne eiendom kalt ] som kan brukes til å utvide objekt egenskaper og metoder. Du kan lese mer om prototyper i vår Forståelse Prototyper og Arv i JavaScript opplæringen.

Inntil nylig, flittig utviklerne har brukt constructor funksjoner for å etterligne et objekt-orientert design mønster i JavaScript., Språket spesifikasjon ECMAScript 2015, ofte referert til som ES6, innført klasser til JavaScript-språk. Klasser i JavaScript ikke faktisk tilbyr ekstra funksjonalitet, og er ofte beskrevet som å gi «syntaktiske sukker» over prototyper og arv ved at de tilbyr en renere og mer elegant syntaks. Fordi andre programmeringsspråk bruk klasser, klasse syntaks i JavaScript som gjør det enklere for utviklere å veksle mellom språk.

Klasser Er Funksjoner

En JavaScript-klassen er en type funksjon., Klassene er deklarert med class søkeord. Vi vil bruke funksjonen uttrykk syntaks for å initialisere en funksjon og klasse uttrykk syntaks for å initialisere en klasse.

// Initializing a function with a function expressionconst x = function() {}

// Initializing a class with a class expressionconst y = class {}

Vi kan få tilgang til ] av et objekt ved hjelp av Object.getPrototypeOf() metode. La oss bruke den til å teste den tomme funksjon vi opprettet.

Object.getPrototypeOf(x);

Output
ƒ () { }

Vi kan også bruke denne metoden i klassen vi nettopp opprettet.,

Object.getPrototypeOf(y);

Output
ƒ () { }

– koden erklærte med function og class både returnere en funksjon ]. Med prototyper, noen funksjon kan bli en konstruktør eksempel ved bruk av new søkeord.

Output
x {}constructor: ƒ ()

Dette gjelder klassene også.

Output
y {}constructor: class

Disse prototype constructor eksempler er ellers tom, men vi kan se hvordan under syntaks, begge metodene er å oppnå det samme resultatet.,

Definere en Klasse

I prototyper og arv opplæringen, har vi laget et eksempel basert rundt oppretting av tegn i en tekst-basert rollespill. La oss fortsette med det eksempelet her for å oppdatere syntaks fra funksjoner til klasser.

En konstruktør funksjon er initialisert med en rekke parametere, som ville bli tildelt som egenskaper av this, under henvisning til funksjonen i seg selv. Den første bokstaven i identifikator som vil bli aktivert av konvensjonen.

// Initializing a constructor functionfunction Hero(name, level) { this.name = name; this.level = level;}

Når vi oversetter dette til klasse syntaks, som vist nedenfor, ser vi at den er strukturert på samme måte.

// Initializing a class definitionclass Hero { constructor(name, level) { this.name = name; this.level = level; }}

Vi vet en konstruktør-funksjonen er ment å være et objekt blåkopi av bruken av store bokstaver i den første bokstaven i initializer (som er frivillig), og gjennom fortrolighet med syntaks. class søkeord kommuniserer på en mer oversiktlig måte målet for vår funksjon.,

Den eneste forskjellen i syntaksen av initialiseringen er å bruke class søkeord i stedet for function, og tilordne egenskaper inne i en constructor() metode.

Definere Metoder

Den vanlige praksis med constructor funksjoner er å tilordne metoder direkte til prototype i stedet for i initialisering, sett i greet() metode nedenfor.

Med klasser denne syntaksen er forenklet, og metoden kan legges direkte til klassen., Ved hjelp av den metoden definisjon står innført i ES6, å definere en metode er en enda mer presis prosess.

La oss ta en titt på disse egenskapene og metodene i aksjon. Vi vil opprette en ny instans av Hero med new søkeord, og gi noen verdier.

const hero1 = new Hero('Varg', 1);

Hvis vi skrive ut mer informasjon om våre nye objekt med console.log(hero1), kan vi se mer informasjon om hva som skjer med klasse initialisering.,

Output
Hero {name: "Varg", level: 1}__proto__: ▶ constructor: class Hero ▶ greet: ƒ greet()

Vi kan se i den utgang som constructor() og greet() funksjoner ble brukt til __proto__, eller ] av hero1, og ikke direkte som en metode på hero1 objekt. Mens dette er klart, når du gjør constructor funksjoner, er det ikke åpenbart når du oppretter klasser. Klasser tillate for en mer enkel og konsis, syntaks, men ofre noen klarhet i prosessen.,

Forlenge en Klasse

En fordelaktig egenskap av constructor funksjoner og klasser er at de kan bli utvidet til nye objekt tegninger basert off av den overordnede. Dette hindrer gjentakelse av koden for objekter som er lik, men trenger noen ekstra eller mer spesifikke funksjoner.

Ny konstruktør funksjoner kan opprettes fra forelder ved bruk av call() metode., I eksempelet nedenfor skal vi skape en mer spesifikk karakter klasse kalt Mage, og tilordne egenskaper til Hero med call(), så vel som å legge til en ekstra eiendom.

På dette punktet, kan vi opprette en ny instans av Mage ved hjelp av de samme egenskapene som Hero så vel som nye vi har lagt til.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

Sender hero2 til konsollen, kan vi se at vi har opprettet en ny Mage baserte av konstruktøren.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: ▶ constructor: ƒ Mage(name, level, spell)

Med ES6 klasser, super søkeord som er brukt i stedet for call for å få tilgang til den overordnede funksjoner. Vi vil bruke extends for å referere til den overordnede klasse.

Nå kan vi lage en ny Mage eksempel på samme måte.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

Vi vil skrive ut hero2 til konsollen og vise utdata.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: Hero ▶ constructor: class Mage

output er nesten nøyaktig det samme, bortsett fra at i klassen bygging av ] knyttet til overordnede, i dette tilfellet Hero.

Nedenfor er en side-by-side-sammenligning av hele prosessen med oppstart, og legger til metoder, og arv av en konstruktør funksjon og en klasse.

Selv om syntaksen er ganske forskjellige, er den underliggende resultatet er nesten den samme mellom begge metoder. Klasser gi oss en mer presis måte å skape objektet tegninger, og constructor funksjoner beskrive mer nøyaktig hva det er som skjer under panseret.

Konklusjon

I denne opplæringen, lærte vi om likheter og forskjeller mellom JavaScript constructor funksjoner og ES6 klasser. Både klasser og konstruktører imitere et objekt-orientert arv modellen til JavaScript, som er en prototype-basert arv språk.,

Forstå prototypical arv, er avgjørende for å være en effektiv JavaScript utvikler. Bli kjent med klasser er svært nyttig, som populære JavaScript-biblioteker som Reagerer gjøre hyppig bruk av class syntaks.