Ultieme gids voor getters en setters in JavaScript
getters en setters zijn functies of methoden die worden gebruikt om krijgen en reeks de waarden van variabelen. Het getter-setter-concept is gebruikelijk in computerprogrammering: bijna alle programmeertalen op hoog niveau worden geleverd met een set syntaxis voor het implementeren van getters en setters, inclusief JavaScipt.
In deze post zullen we zien wat getters setters zijn en hoe maak en gebruik ze in JavaScript.
Getters-setters en inkapseling
Het idee van getters en setters wordt altijd genoemd in combinatie met inkapseling. Inkapseling kan zijn op twee manieren begrepen.
Ten eerste, het is het opzetten van de data doorzetters-setters trio om toegang te krijgen tot die gegevens en deze te wijzigen. Deze definitie is handig wanneer bepaalde bewerkingen, zoals validatie, moeten zijn uitgevoerd op de gegevens voordat je het opslaat of bekijkt - verzamelaars en setters zorgen voor de perfecte thuishaven.
Ten tweede is er een strengere definitie volgens welke inkapseling wordt gedaan gegevens verbergen, om het ontoegankelijk te maken van andere code, behalve door de getters en setters. Op deze manier komen we niet terecht per ongeluk overschrijven van belangrijke gegevens met een andere code in het programma.
Maak getters en setters
1. Met methoden
Sinds getters en setters zijn eigenlijk functies die een waarde ophalen / wijzigen, dat zijn er meer dan één manier om ze te maken en te gebruiken. De eerste manier is:
var obj = foo: 'dit is de waarde van foo', getFoo: function () return this.foo; , setFoo: function (val) this.foo = val; console.log (obj.getFoo ()); // "dit is de waarde van foo" obj.setFoo ('hallo'); console.log (obj.getFoo ()); // "Hallo" Dit is de eenvoudigste manier om gasvangers en setters te maken. Er is een eigendom foo en er zijn twee methoden: getFoo en setFoo naar retourneer en wijs een waarde toe naar die woning.
2. Met trefwoorden
Een meer “officieel” en een robuuste manier om gasvangers en setters te maken, is door de krijgen en reeks trefwoorden.
Naar maak een vangstof, plaats de krijgen trefwoord voor een functieverklaring die zal dienen als de gettermethode, en gebruik de reeks trefwoord op dezelfde manier naar maak een setter. De syntaxis is als volgt:
var obj = fooVal: 'dit is de waarde van foo', krijg foo () return this.fooVal; , stel foo (val) in this.fooVal = val; console.log (obj.foo); // "dit is de waarde van foo" obj.foo = 'hallo'; console.log (obj.foo); // "Hallo"
Merk op dat de gegevens alleen kunnen zijn opgeslagen onder een eigenschapsnaam (fooVal) Dat is het verschillend van de naam van de methode van de gasvangerzetter (foo) omdat een eigenschap de gasvanger-setter vasthoudt kan de gegevens niet bevatten ook.
Welke kant is beter?
Als u ervoor kiest om getters en setters met trefwoorden te maken, kunt u de toewijzingsoperator om de gegevens in te stellen en de puntoperator om de gegevens te krijgen, op dezelfde manier waarop u de waarde van een reguliere eigenschap zou openen / instellen.
Als u echter de eerste manier kiest om getters en setters te coderen, moet u de methoden setter en getter gebruiken met behulp van de syntaxis van de functieaanroep omdat het typische functies zijn (niets speciaals zoals die gemaakt met de krijgen en reeks trefwoorden).
Ook bestaat de kans dat je per ongeluk terechtkomt een andere waarde toekennen naar de eigenschappen die die methode van de gasvanger-setter bevatten en verlies ze volledig! Iets waarover u zich in de latere methode geen zorgen hoeft te maken.
Dus je kunt zien waarom ik het zei tweede techniek is robuuster.
Preventie tegen overschrijven
Als u om de een of andere reden de voorkeur geeft aan de eerste techniek, zorg dan dat de eigenschappen voldoen aan de methoden van de gasvanger-setter alleen lezen door ze te maken gebruik makend van Object.defineProperties. Eigenschappen gemaakt via Object.defineProperties, Object.defineProperty en Reflect.defineProperty automatisch configureren naar schrijfbaar: fout wat betekent alleen lezen:
/ * Preventie overschrijven * / var obj = foo: 'dit is de waarde van foo'; Object.defineProperties (obj, 'getFoo': value: function () return this.foo;, 'setFoo': value: function (val) this.foo = val;); obj.getFoo = 66; // getFoo wordt niet overschreven! console.log (obj.getFoo ()); // "dit is de waarde van foo"
Operaties binnen getters en setters
Zodra je de gasvangers en setters hebt geïntroduceerd, kun je doorgaan en bewerkingen uitvoeren op de gegevens voordat u deze wijzigt of retourneert.
In de onderstaande code zijn de gegevens in de getterfunctie aaneengeschakeld met een touwtje voordat het wordt geretourneerd en in de functie setter een validatie van of de waarde een getal is of niet wordt uitgevoerd vóór het bijwerken n.
var obj = n: 67, get id () return 'De ID is:' + this.n; , stel id in (val) if (typeof val === 'nummer') this.n = val; console.log (obj.id); // "De ID is: 67" obj.id = 893; console.log (obj.id); // "De ID is: 893" obj.id = 'hallo'; console.log (obj.id); // "De ID is: 893"
Bescherm gegevens met getters en setters
Tot dusverre hebben we het gebruik van getters en setters in de eerste context van inkapseling behandeld. Laten we verder gaan naar de tweede, d.w.z. hoe gegevens van externe code verbergen met behulp van getters en setters.
Onbeschermde gegevens
Het instellen van getters en setters betekent niet dat de gegevens alleen via die methoden kunnen worden benaderd en gewijzigd. In het volgende voorbeeld is dat het direct veranderd zonder de methode van de getter en de zetter aan te raken:
var obj = fooVal: 'dit is de waarde van foo', krijg foo () return this.fooVal; , stel foo (val) in this.fooVal = val; obj.fooVal = 'hallo'; console.log (obj.foo); // "Hallo"
We hebben de setter niet gebruikt maar veranderde de gegevens direct (fooVal). De gegevens die we aanvankelijk binnen zetten obj is nu weg! Om te voorkomen dat dit gebeurt (per ongeluk), jij enige bescherming nodig hebben voor uw gegevens. U kunt dat toevoegen met beperking van de reikwijdte van waar uw gegevens beschikbaar zijn. Je kunt dat doen met een van beide block scoping of functie scoping.
1. Blokbepaling
Een manier is om gebruik een block scope waarbinnen de gegevens worden gedefinieerd met behulp van de laat sleutelwoord welke beperkt de reikwijdte naar dat blok.
EEN blok bereik kan worden gemaakt door uw code te plaatsen in een paar accolades. Wanneer je een block scope maakt, moet je dat zeker doen laat een reactie achter erboven wordt gevraagd om de beugel met rust te laten, zodat niemand verwijdert de beugels per ongeluk denken dat ze wat extra overbodige accolades in de code of zijn voeg een label toe naar de block scope.
/ * BLOKKERING, laat de beugel met rust! * / let fooVal = 'dit is de waarde van foo'; var obj = get foo () return fooVal; , stel foo (val) in fooVal = val fooVal = 'hallo'; // niet van invloed op fooVal binnen het blok console.log (obj.foo); // "dit is de waarde van foo"
Veranderen / creëren fooValbuiten het blok heeft geen invloed op de fooVal verwezen naar de gettersetters.
2. Functiebepaling
De meer gebruikelijke manier om de gegevens te beschermen met scoping is door de gegevens binnen een functie houden en een object retourneren met de getters en setters van die functie.
function myobj () var fooVal = 'dit is de waarde van foo'; return get foo () return fooVal; , stel foo (val) in fooVal = val fooVal = 'hallo'; // niet van invloed op onze originele fooVal var obj = myobj (); console.log (obj.foo); // "dit is de waarde van foo"
Het object (met de foo () getter-setter erin) geretourneerd door de myObj () functie is opgeslagen in obj, en dan obj is gewend aan bel de getter en de zetter.
3. Gegevensbescherming zonder scoping
Er is ook een andere manier om te voorkomen dat uw gegevens worden overschreven zonder de reikwijdte te beperken. De logica erachter gaat als volgt: hoe kun je een gegeven veranderen als je niet weet wat er wordt genoemd?
Als de gegevens een niet zo gemakkelijk reproduceerbare variabele / eigenschapnaam, de kans bestaat dat niemand (zelfs wijzelf) het gaat overschrijven door een bepaalde waarde toe te kennen aan die variabele / eigenschapnaam.
var obj = s89274934764: 'dit is de waarde van foo', krijg foo () return this.s89274934764; , stel foo (val) in this.s89274934764 = val; console.log (obj.foo); // "dit is de waarde van foo"
Kijk, dat is een manier om dingen uit te werken. Hoewel de naam die ik heb gekozen niet echt goed is, kun je dat ook gebruik willekeurige waarden of symbolen om eigendomsnamen te maken zoals voorgesteld door Derick Bailey in deze blogpost. Het belangrijkste doel is om houd de gegevens verborgen van een andere code en laat een getter-setter-paar het openen / bijwerken.
Wanneer moet je getters en setters gebruiken?
Nu komt de grote vraag: begin je met het toewijzen van getters en setters voor al uw gegevens nu?
Als je gegevens verbergen, dan is er geen andere keuze.
Maar als uw gegevens door andere code worden gezien, is het goed, moet u nog steeds gettersetters gebruiken gewoon om het te bundelen met code die er wat bewerkingen op uitvoert? ik zou zeggen Ja. Code klopt snel. Het creëren van micro-eenheden van individuele gegevens met zijn eigen getter-setter biedt u een zekere onafhankelijkheid om aan de gegevens te werken zonder andere delen van de code te beïnvloeden.
