nl.hideout-lastation.com
Ultieme gids voor getters en setters in JavaScript
Getters en setters zijn functies of methoden die worden gebruikt om de waarden van variabelen te verkrijgen en in te stellen . Het concept van de getter-setter is gebruikelijk bij het programmeren van computers : bijna alle programmeertalen op hoog niveau worden geleverd met een set syntaxis voor het implementeren van getters en setters, inclusief JavaScipt.
In dit bericht zullen we zien wat getters setters zijn en hoe je ze kunt maken en gebruiken in JavaScript .
Getters-setters en inkapseling
Het idee van getters en setters wordt altijd vermeld in combinatie met inkapseling . Inkapseling kan op twee manieren worden begrepen .
Ten eerste is het de oprichting van het trio data-getters-setters om toegang te krijgen tot die gegevens en deze te wijzigen. Deze definitie is handig wanneer bepaalde bewerkingen, zoals validatie, moeten worden uitgevoerd op de gegevens voordat u deze opslaat of bekijkt, aangezien getters en setters daar de perfecte plaats voor bieden.
Ten tweede is er een striktere definitie volgens welke inkapseling wordt gedaan om gegevens te verbergen, om het ontoegankelijk te maken voor andere code, behalve via de getters en setters . Op deze manier eindigen we niet per ongeluk overschrijven van belangrijke gegevens met een andere code in het programma.
Maak getters en setters
1. Met methoden
Aangezien getters en setters in feite functies zijn die een waarde ophalen / wijzigen, zijn er verschillende manieren 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 getters en setters te maken. Er is een eigenschap foo en er zijn twee methoden: getFoo en setFoo om terug te keren en een waarde aan die eigenschap toe te wijzen .
2. Met trefwoorden
Een meer "officiële" en robuuste manier om getters en setters te maken is door gebruik te maken van de trefwoorden en trefwoorden .
Als u een getter wilt maken, plaatst get trefwoord get voor een functieverklaring die als gettermethode wordt gebruikt en gebruikt u het trefwoord set op dezelfde manier om een setter te maken . 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 worden opgeslagen onder een eigenschapsnaam ( fooVal ) die verschilt van de naam van de methoden voor de getter-setter ( foo ), omdat een eigenschap die de getter-setter vasthoudt de gegevens ook niet kan bevatten .
Welke kant is beter?
Als u ervoor kiest om getters en setters met trefwoorden te maken, kunt u de toewijzingsoperator gebruiken om de gegevens en de puntoperator in te stellen om de gegevens op te halen, op dezelfde manier als waarmee u de waarde van een reguliere eigenschap opent / instelt.
Als u echter de eerste manier kiest om getters en setters te coderen, moet u de methoden setter en getter bellen met behulp van de syntaxis van de functieaanroep, omdat dit typische functies zijn (niets speciaals zoals die gemaakt met de get en set trefwoorden).
Er is ook een kans dat u per ongeluk een andere waarde toekent aan de eigenschappen die deze methoden bevatten en deze volledig kwijtraken ! Iets waarover u zich in de latere methode geen zorgen hoeft te maken.
Dus je kunt zien waarom ik zei dat de tweede techniek robuuster is .
Preventie tegen overschrijven
Als u om de een of andere reden de voorkeur geeft aan de eerste techniek, moet u de eigenschappen die de methoden voor de getter-setter bevatten, alleen-lezen maken door ze te maken met behulp van Object.defineProperties . Eigenschappen gemaakt met Object.defineProperties, Object.defineProperty en Reflect.defineProperty configureren automatisch naar writable: false 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 in getters en setters
Nadat u de getters en setters hebt geïntroduceerd, kunt u doorgaan en bewerkingen uitvoeren op de gegevens voordat u deze wijzigt of retourneert.
In de onderstaande code worden in de getterfunctie de gegevens samengevoegd met een tekenreeks voordat ze worden geretourneerd, en in de functie setter wordt een validatie van of de waarde een getal is of niet uitgevoerd vóór het bijwerken van 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); // "Het ID is: 893" Bescherm gegevens met getters en setters
Tot dusverre hebben we het gebruik van gasvangers en setters behandeld in de eerste context van inkapseling. Laten we verder gaan naar de tweede, dat wil zeggen hoe je gegevens kunt verbergen met behulp van getters en setters van externe code .
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 het rechtstreeks gewijzigd zonder de methoden voor getter en setter 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 de gegevens direct gewijzigd ( fooVal ) . De gegevens die we aanvankelijk in obj hebben ingesteld, zijn nu weg! Om te voorkomen dat dit gebeurt (per ongeluk), moet u enige bescherming voor uw gegevens hebben. U kunt dat toevoegen door de reikwijdte te beperken van waar uw gegevens beschikbaar zijn. U kunt dit doen door block-scoping of functie-scoping .
1. Blokbepaling
Eén manier is om een blokscope te gebruiken waarbinnen de gegevens worden gedefinieerd met behulp van het let sleutelwoord, dat de reikwijdte tot dat blok beperkt .
Een blokbereik kan worden gemaakt door uw code in een paar accolades te plaatsen . Wanneer u een blokspectrum maakt, laat dan een opmerking erboven staan met de vraag om de accolades alleen te laten, zodat niemand per ongeluk de accolades verwijdert, denkend dat het om extra overtollige accolades in de code gaat of een label aan het blokspectrum toevoegt .
/ * BLOKKERING, laat de beugel met rust! * / {laat 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" Het veranderen / creëren van fooVal buiten het blok heeft geen invloed op het fooVal waarnaar verwezen wordt binnen de fooVal .
2. Functiebepaling
De meer gebruikelijke manier om de gegevens te beschermen met scoping is door de gegevens in een functie te houden en een object met de getters en setters uit die functie te retourneren .
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 oorspronkelijke 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 functie myobj() wordt opgeslagen in obj, en dan wordt obj gebruikt om de getter en de setter te bellen .
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 stuk gegevens veranderen als je niet weet wat er wordt genoemd?
Als de gegevens een niet zo gemakkelijk reproduceerbare variabele / eigenschapnaam hebben, is de kans groot dat niemand (zelfs wijzelf) het uiteindelijk zal 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 ook willekeurige waarden of symbolen gebruiken om eigenschapsnamen te maken zoals voorgesteld door Derick Bailey in deze blogpost. Het belangrijkste doel is om de gegevens verborgen te houden voor andere code en om een getter-setter-paar toegang te geven tot de gegevens en deze bij te werken.
Wanneer moet je getters en setters gebruiken?
Nu komt de grote vraag: begint u nu met het toewijzen van getters en setters aan al uw gegevens ?
Als u gegevens verbergt, is er geen andere keuze .
Maar als uw gegevens door andere code worden gezien, is het goed, moet u nog steeds gettersetters gebruiken om het te bundelen met code waarmee u bewerkingen kunt uitvoeren? Ik zou ja zeggen. Code komt zeer snel op . Het creëren van micro-eenheden van individuele gegevens met zijn eigen getter-setter geeft u een zekere onafhankelijkheid om aan die gegevens te werken zonder andere delen van de code te beïnvloeden.
Bouw toegankelijke glijdende Hamburger-menu's met Offcanvas
De gratis Offcanvas-plug-in is een van de vele hulpmiddelen voor glijdende navigatie. Je vindt een hele reeks vergelijkbare plug-ins online, maar Offcanvas onderscheidt zich om een paar redenen.Het is een vrij lichtgewicht bibliotheek en hoewel het op jQuery draait, is het ook niet erg moeilijk om in te stellen . Di
4 Formulierontwerp UX-tips die u moet weten (met voorbeelden)
We denken vaak over formulieren als eenvoudig middel om gebruikersgegevens te verzamelen, maar ze zijn ook een manier, soms de enige manier waarop onze gebruikers contact met ons kunnen maken . Het is waarschijnlijk waanidee om te denken dat we kunnen zorgen dat gebruikers het leuk vinden om formulieren in te vullen, maar het is zeker mogelijk om oplossingen te vinden die hen niet te erg irriteren en ze te helpen bij het proces
