Object-georiënteerd JavaScript (OOJS): 3 manieren om objecten-instanties te maken

Wanneer een programmeertaal helemaal over objecten gaat, is het eerste dat we moeten leren hoe we objecten kunnen maken . Het maken van objecten in JavaScript is vrij eenvoudig: een paar accolades zullen het werk doen, maar dat is niet de enige manier om een ​​object te maken, noch de enige manier om ooit te gebruiken.

In JavaScript worden objectexemplaren gemaakt van ingebouwde objecten en ontstaan ​​deze wanneer het programma wordt uitgevoerd. Date is bijvoorbeeld een ingebouwd object dat ons informatie geeft over datums. Als we de huidige datum op een pagina willen weergeven, hebben we een runtime-instantie van Date die de informatie over de huidige datum bevat.

JavaScript stelt ons ook in staat om onze eigen objecten te definiëren die hun eigen objectinstanties in runtime kunnen produceren. In JavaScript is alles een object en heeft elk object de ultieme voorloper Object . Het maken van een objectinstantie wordt instantiatie genoemd .

1. De new operator

Een van de meest voorkomende en bekende methoden om een ​​nieuw object exemplaar te maken, is door de new operator te gebruiken .

U hebt een constructor nodig om de new operator te laten werken. Een constructor is een methode van een object dat een nieuw exemplaar van dat object samenstelt. De basissyntaxis ziet er als volgt uit:

 nieuwe constructor () 

Een constructor kan argumenten accepteren die kunnen worden gebruikt om eigenschappen te wijzigen of toe te voegen aan de objectinstantie die wordt geconstrueerd. De constructor heeft dezelfde naam als het object waartoe het behoort.

Hier is een voorbeeld van het maken van een instantie van het object Date() met het new sleutelwoord:

 dt = new Datum (2017, 0, 1) console.log (dt) // zo jan 01 2017 00:00:00 GMT + 0100 

Date() is de constructor om een ​​nieuw Date object te maken. Verschillende constructors voor een object nemen verschillende argumenten om dezelfde soort objectexemplaren met verschillende kenmerken te maken .

Niet alle ingebouwde objecten in JavaScript kunnen worden geïnstantieerd zoals Date . Er zijn objecten die niet met een constructor komen : Math, JSON en Reflect, maar het zijn nog steeds gewone objecten.

Onder de ingebouwde objecten die constructor (s) hebben, kan Symbol niet worden aangeroepen in de constructorstijl om een ​​nieuwe Symbol instantie te instantiëren. Het kan alleen worden aangeroepen als een functie die een nieuwe Symbol retourneert.

Ook hebben tussen de ingebouwde objecten die constructor (s) hebben niet allemaal hun constructors nodig om met de new operator te worden aangeroepen om te worden geïnstantieerd. Function, Array, Error en RegExp kunnen ook als functies worden aangeroepen, zonder het new sleutelwoord te gebruiken, en zij zullen een instantie instantiëren en retourneren.

2. Het Reflect object

Backend-programmeurs zijn misschien al bekend met Reflection API's . Reflectie is een functie van programmeertalen om sommige basisentiteiten, zoals objecten en klassen, tijdens runtime te inspecteren en bij te werken .

In JavaScript kunt u al wat reflectiebewerkingen uitvoeren met Object . Maar een goede Reflection API is uiteindelijk ook in JavaScript ontstaan.

Het Reflect object heeft een aantal methoden om objectexemplaren te maken en bij te werken . Het Reflect object heeft geen constructor, dus kan het niet met de new operator worden geïnstantieerd en net als Math en JSON kan het ook niet als een functie worden aangeroepen .

Reflect heeft echter een equivalent van de new operator : de methode Reflect.construct() .

 Reflect.construct (target, argumentsList [, newTarget]) 

Zowel de newTarget als de optionele newTarget argumenten zijn objecten met hun eigen constructors, terwijl argumentsList een lijst met argumenten is die aan de constructor of target moet worden doorgegeven.

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

De bovenstaande code heeft hetzelfde effect als het instantiëren van Date() met behulp van de new operator. Hoewel u nog steeds new kunt gebruiken, is Reflection een ECMAScript 6-standaard . U kunt ook gebruik maken van het argument newTarget, wat een ander voordeel is ten opzichte van de new operator.

De waarde van het prototype van newTarget (om precies te zijn, het is het prototype van de constructor van newTarget ) wordt het prototype van de nieuw gecreëerde instantie .

Een prototype is het eigendom van een object waarvan de waarde ook een object is en de eigenschappen van het oorspronkelijke object draagt. Kortom, een object haalt zijn leden uit zijn prototype.

Hier laten we een voorbeeld zien:

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

Door B als derde argument door te Reflect.construct() aan Reflect.construct(), wordt de prototype-waarde van het object obj gemaakt om hetzelfde te zijn als het prototype van de constructor van B (die het eigenschappenbericht en de data ).

obj dus toegang tot het message en de data, beschikbaar bij zijn prototype. Maar aangezien obj is gemaakt met A, heeft het ook zijn eigen message dat het van A heeft ontvangen .

Hoewel obj is geconstrueerd als een array, is dit geen instantie van Array, omdat het prototype is ingesteld op 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 handig zijn als u een object wilt maken met behulp van meer dan één blauwdruk .

3. De methode Object.create()

U kunt ook een nieuw gewoon object met een specifiek prototype maken via Object.create() . Ook dit lijkt misschien erg op het gebruik van de new operator, maar dat is het niet.

 Object.create (O [, propertiesObject]) 

Het O argument is een object dat het prototype dient voor het nieuwe object dat zal worden gemaakt. De optionele propertiesObject is een lijst met eigenschappen die u mogelijk aan het nieuwe object wilt toevoegen.

 klasse A {constructor () {} message () {console.log ('message from A')}} var obj = Object.create (nieuw A (), {data: {writable: true, configurable: true, value: function () {return 'data from obj'}}}) console.log (obj.message ()) // bericht van A console.log (obj.data ()) // data van obj obj1 = Object.create ( nieuw A (), {foo: {schrijfbaar: waar, configureerbaar: waar, waarde: function () {return 'foo from obj1'}}}) console.log (obj1.message ()) // bericht van een console. log (obj1.foo ()) // foo from obj1 

In het obj object is de toegevoegde eigenschap data, terwijl in obj1 het foo . Dus, zoals u ziet, kunnen we eigenschappen en methoden aan een nieuw object toevoegen .

Dit is geweldig als u meerdere objecten van dezelfde soort wilt maken, maar met verschillende aanvullende eigenschappen of methoden . De syntaxis van Object.create() bespaart de moeite om ze allemaal afzonderlijk te coderen.

Freebie Release: Christmas Wallpapers

Nu we in de buurt komen van Kerstmis en het einde van 2011, willen we onze lezers en ontwerpgemeenschap dankbaar zijn met nog een andere exclusieve gratis release - nog 2 Kerstachtergronden .Deze kerst-achtergronden komen in .JPG-formaat verschillende afmetingen, inclusief maten voor iPhone en iPad. Je kunt zelfs alle formaten downloaden in een enkel gecomprimeerd zipbestand en ze hebben je exclusief gebracht door GraphicsFuel en Hongkiat

(Technische en ontwerptips)

10 (Meer) CSS-trucs die je waarschijnlijk hebt over het hoofd gezien

Er zijn veel CSS-fragmenten die webontwikkelaars kunnen gebruiken om bepaalde resultaten te bereiken, en er zijn CSS-trucjes die u kunt gebruiken voor dingen zoals het verticaal uitlijnen van inhoud. Omdat CSS een steeds evoluerende entiteit is, stuiteren we keer op keer op coole CSS-trucs die leuk zijn om te weten

(Technische en ontwerptips)