Objektorientert JavaScript (OOJS): 3 måter å opprette objekter

Når et programmeringsspråk handler om objekter, er det første vi må lære å lage objekter . Å lage objekter i JavaScript er ganske enkelt: Et par krøllete braces vil gjøre jobben, men det er heller ikke den eneste måten å skape et objekt på, eller den eneste måten du trenger å bruke.

I JavaScript blir objektet forekomster opprettet fra innebygde objekter og kommer til eksistens når programmet kjører. For eksempel er Date et innebygd objekt som gir oss informasjon om datoer. Hvis vi vil vise gjeldende dato på en side, trenger vi en runtime-forekomst av Date som inneholder informasjon om gjeldende dato.

JavaScript tillater oss også å definere våre egne objekter som kan produsere sine egne objekt-forekomster i kjøretid. I JavaScript er alt et objekt, og hvert objekt har en ultimate forfader som heter Object . Opprettelsen av en objekteksempel kalles instantiation .

1. Den new operatøren

En av de vanligste og mest kjente metodene for å opprette en ny objektinstans er å bruke den new operatøren .

Du trenger en konstruktør for å få den new operatøren til å fungere. En konstruktør er en metode for et objekt som setter sammen en ny forekomst av objektet . Den grunnleggende syntaksen ser slik ut:

 ny konstruktør () 

En konstruktør kan akseptere argumenter som kan brukes til å endre eller legge til egenskaper til objektets forekomst det konstruerer. Konstruktøren har samme navn som objektet den tilhører.

Her er et eksempel på hvordan du lager en forekomst av Date() -objektet med det new søkeordet:

 dt = ny dato (2017, 0, 1) console.log (dt) // søndag jan 01 2017 00:00:00 GMT + 0100 

Date() er konstruktøren for å opprette et nytt Date objekt. Forskjellige konstruktører for et objekt tar forskjellige argumenter for å lage de samme typen objektfelter med varierte attributter .

Ikke alle innebygde objekter i JavaScript kan bli instantiated som Date . Det er objekter som ikke kommer med en konstruktør : Math, JSON og Reflect, men de er fortsatt vanlige gjenstander.

Blant de innebygde objektene som har konstruktør (er), kan Symbol ikke kalles i konstruktørstilen for å instansere et nytt Symbol forekomst. Den kan bare kalles som en funksjon som returnerer en ny Symbol .

Også, blant de innebygde objektene som har konstruktør (er), trenger ikke alle sine konstruktører å bli kalt med den new operatøren for å bli instantiated. Function, Array, Error og RegExp kan også kalles som funksjoner uten å bruke det new søkeordet, og de vil instantiere og returnere en ny objekteksempel.

2. Reflect objektet

Backend-programmerere kan allerede være kjent med Reflection APIs . Refleksjon er en funksjon i programmeringsspråk for å inspisere og oppdatere noen av de grunnleggende enhetene, for eksempel objekter og klasser, ved kjøring .

I JavaScript kan du allerede utføre noen refleksjonstransaksjoner ved hjelp av Object . Men, en riktig Reflection API kom til å eksistere i JavaScript også.

Reflect objektet har et sett med metoder for å opprette og oppdatere objektet forekomster . Reflect objektet har ikke en konstruktør, slik at den ikke kan bli instantiated med den new operatøren, og, akkurat som Math og JSON, kan den heller ikke kalles som en funksjon .

Imidlertid har Reflect en ekvivalent til den new operatøren : Reflect.construct() .

 Reflect.construct (mål, argumenterListe [, newTarget]) 

Både target og de valgfrie newTarget argumentene er objekter som har sine egne konstruktører, mens argumentsList er en liste over argumenter som skal overføres til konstruktøren av target .

 var dt = Reflect.construct (Dato, [2017, 0, 1]); console.log (dt); // søndag 01 jan 2017 00:00:00 GMT + 0100 

Koden ovenfor har samme effekt som å instansere Date() ved hjelp av den new operatøren. Selv om du fortsatt kan bruke new, er Reflection en ECMAScript 6-standard . Det lar deg også benytte seg av newTarget argumentet, noe som er en annen fordel enn den new operatøren.

Verdien av newTarget 's prototype (for å være nøyaktig, det er prototypen til newTarget ' s constructor) blir prototypen av den nyopprettede forekomsten .

En prototype er egenskapen til et objekt, verdien av det er også et objekt som bærer egenskapene til det opprinnelige objektet. Kort sagt, et objekt får sine medlemmer fra prototypen.

Her ser vi et eksempel:

 klasse A {constructor () {this.message = function () {console.log ('melding fra A')}}} klasse B {constructor () {} melding () {console.log ('melding fra B') } data () {console.log ('data fra B'}} obj = Reflect.construct (A, [], B) console.log (obj.message ()); // melding fra A console.log (obj.data ()); // data fra B console.log (obj instanceof B) // true 

Ved å overføre B som det tredje argumentet til Reflect.construct(), blir prototypeværdien til obj objektet gjort til å være det samme som prototypen til B konstruktør (som har egenskapsmeldingen og data ).

Dermed kan obj få tilgang til message og data er tilgjengelige på prototypen. Men siden obj er laget med A, har den også sin egen message det mottok fra A

Selv om obj er konstruert som en matrise, er det ikke en forekomst av Array, fordi prototypen er satt til Object .

 obj = Reflect.construct (Array, [1, 2, 3], Object) console.log (obj) // Array [1, 2, 3] console.log (obj instanceof Array) // false 

Reflect.construct() kan være nyttig når du vil lage et objekt ved hjelp av mer enn ett blåkopi .

3. Object.create()

Du kan også opprette et nytt vanlig objekt med en bestemt prototype via Object.create() . Dette kan også virke som om den new operatøren, men det er det ikke.

 Object.create (O [, propertiesObject]) 

O argumentet er et objekt som tjener prototypen til det nye objektet som skal opprettes. De valgfrie propertiesObject Objektargument er en liste over egenskaper du kanskje vil legge til i det nye objektet.

 klasse A {constructor () {} melding () {console.log ('melding fra A')}} var obj = Object.create (nytt A (), {data: {skrivbar: sann, konfigurerbar: sann, verdi: funksjon () (retur) data fra obj '}})) console.log (obj.message ()) // melding fra A console.log (obj.data ()) // data fra obj obj1 = Object.create ( ny A (), {foo: {skrivbar: sant, konfigurerbar: sann, verdi: funksjon () {retur 'foo fra obj1'}}) console.log (obj1.message ()) // melding fra en konsoll. logg (obj1.foo ()) // foo fra obj1 

I obj objektet er den ekstra egenskapen data, mens i obj1 er det foo . Så, som du ser, kan vi ha egenskaper og metoder lagt til i et nytt objekt .

Dette er flott når du vil opprette flere objekter av samme type, men med forskjellige tilleggsegenskaper eller metoder . Object.create() lagrer bryet med å kode dem alle separat.

Den nye Gmail-materialdesignen og 8 nye funksjoner

Gmail har nylig mottatt en stor oppdatering, noe som bringer det vakre materialdesigngrensesnittet til vår favoritt e-postleverandør. Det er ikke alt, det introduserer mange forespurte funksjoner for å organisere innboksen som alternativer for å sende smarte svar, snooze e-post og få tilgang til hendelser, notater og mer rett innenfor Gmail.Saml

(Tekniske og design tips)

Slik strekker du avkortet lyd ved hjelp av MediaSource API

Med MediaSource API kan du generere og konfigurere mediestrømmer rett i nettleseren. Den lar deg utføre en rekke operasjoner på mediedata som holdes av medierelaterte HTML-koder, for eksempel eller . Du kan for eksempel blande forskjellige strømmer, lage overlappende medier, lataktmedia og redigere medieverdier, for eksempel endre volum eller frekvens.I d

(Tekniske og design tips)