nl.hideout-lastation.com
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.
6 spannende Black Friday-deals voor ontwerpers
Black Friday is een koopje! Het is vooral geweldig voor ontwerpers, omdat het niet nodig is om in de rij te staan om te wachten tot de winkel wordt geopend. U kunt enkele echte koopjes op enkele uitstekende producten online vinden.Er is in feite iets voor bijna iedereen. Een grote selectie van WordPress-thema's gevolgd door een enorme selectie stockfoto's en andere mediaproducten. Al
4 AdBlock Plus-alternatieven voor Chrome
Advertentieblokkers zijn zeer eenvoudige hulpmiddelen. Installeer het in uw browser en een grote meerderheid van de advertenties hindert u op geen enkele manier, vorm of vorm meer. Hoe nuttig ze ook zijn, er zijn mensen die vinden dat ad blockers een beetje saai zijn .Als u een van degenen bent die de voorkeur geven aan een nogal interessante adblocker en als uw hoofdbrowser Google Chrome is, dan zijn hier vier adblockers met een unieke twist
