Pagina principala » Codificare » Ultimate Guide pentru Getters și Setters în JavaScript

    Ultimate Guide pentru Getters și Setters în JavaScript

    getters și setteri sunt funcțiile sau metodele folosite obține și a stabilit valorile variabilelor. Conceptul getter-setter este comune în programarea calculatoarelor: aproape toate limbile de programare la nivel înalt vin cu un set de sintaxe pentru implementarea getters și setters, inclusiv JavaScipt.

    În acest post, vom vedea ce sunt getters și cum să creați și utilizați-le în JavaScript.

    Getters-setters și încapsulare

    Ideea de getters și setters este întotdeauna menționată în combinație cu încapsularea. Încapsulare poate fi înțeles în două moduri.

    În primul rând, este vorba de înființarea date-getters-setteri trio pentru a accesa și modifica aceste date. Această definiție este utilă atunci când trebuie să fie unele operații, cum ar fi validarea efectuat pe date înainte de a salva sau de a vizualiza it-getters și setters oferi acasă perfect pentru ea.

    În al doilea rând, există o definiție mai strictă în funcție de care se face încapsularea ascundeți datele, pentru al face inaccesibil din alte coduri, cu excepția celor care au primit și a stabilit. În felul acesta nu ajungem accidental suprascrie date importante cu un alt cod în program.

    Creați getters și setteri

    1. Cu metode

    De la cei care primesc și stabili practic funcții care aduc / modifica o valoare, există mai multe moduri pentru a le crea și a le folosi. Prima cale este:

     var obj = foo: 'aceasta este valoarea lui foo', getFoo: function () return this.foo; , setFoo: funcție (val) this.foo = val;  console.log (obj.getFoo ()); // "aceasta este valoarea foo" obj.setFoo ('hello'); console.log (obj.getFoo ()); // "Salut"

    Aceasta este cea mai simplă cale pentru a crea getters și setters. Există o proprietate foo și există două metode: getFoo și setFoo la returnați și atribuiți o valoare la acea proprietate.

    2. Cu cuvinte cheie

    Mai mult “oficial” și modul robust de a crea getters și setters este prin utilizarea obține și a stabilit Cuvinte cheie.

    La creați un getter, plasați obține cuvinte cheie în fața unei declarații de funcții care va servi ca metodă getter și va folosi a stabilit cuvinte cheie în același mod cu creați un setter. Sintaxa este după cum urmează:

     var obj = fooVal: 'aceasta este valoarea lui foo', get foo () return this.fooVal; , setați foo (val) this.fooVal = val;  console.log (obj.foo); // "aceasta este valoarea foo" obj.foo = 'hello'; console.log (obj.foo); // "Salut" 

    Rețineți că datele pot fi numai stocate sub un nume de proprietate (fooVal) asta e diferit din numele metodelor getter-setter (foo) deoarece o proprietate care deține setter-ul getter nu pot ține datele de asemenea.

    Ce fel este mai bine?

    Dacă alegeți să creați getters și setteri cu cuvinte cheie, puteți utiliza operatorul de atribuire pentru a seta datele si operatorul punct pentru a obține datele, la fel cum ați accesa / seta valoarea unei proprietăți obișnuite.

    Cu toate acestea, dacă alegeți primul mod de a primi codificatori și setteri, trebuie să apelați metodele setter și getter utilizând sintaxa funcției de apel deoarece acestea sunt funcții tipice (nimic special ca cei creați folosind obține și a stabilit Cuvinte cheie).

    De asemenea, există o șansă că s-ar putea ajunge în mod accidental atribuirea unei alte valori la proprietățile care au avut loc acele metode getter-setter și le pierde complet! Ceva în care nu trebuie să vă faceți griji în metoda ulterioară.

    Deci, puteți vedea de ce i-am spus tehnica a doua este mai robustă.

    Suprimarea prevenirii

    Dacă dintr-un anumit motiv preferați prima tehnică, faceți proprietățile care dețin metodele getter-setter read-only prin crearea lor utilizând Object.defineProperties. Proprietățile create prin Object.defineProperties, Object.defineProperty și Reflect.defineProperty configurați automat la scriere: falsă care înseamnă read-only:

     / * Suprascriere prevenire * / var obj = foo: 'aceasta este valoarea foo'; Object.defineProperties (obj, 'getFoo': value: function () return this.foo;, 'setFoo': value: function (val) this.foo = val; obj.getFoo = 66; // getFoo nu va fi suprascris! console.log (obj.getFoo ()); // "aceasta este valoarea foo" 

    Operații în interiorul getters și setters

    Odată ce ați introdus getters și setters, puteți merge mai departe și să efectueze operații asupra datelor înainte de a le schimba sau a le întoarce.

    În codul de mai jos, în funcția getter datele sunt concatenat cu un șir înainte de a fi returnat, și în funcția setter o validare a dacă valoarea este un număr sau nu este efectuată înainte de actualizare n.

     var obj = n: 67, obține id () return 'ID-ul este:' + this.n; , setați id (val) if (typeof val === 'număr') this.n = val;  console.log (obj.id); // "ID-ul este: 67" obj.id = 893; console.log (obj.id); // "ID-ul este: 893" obj.id = 'hello'; console.log (obj.id); // "ID-ul este: 893" 

    Protejați datele cu getters și setters

    Până acum, am acoperit utilizarea de getters și setters în primul context de încapsulare. Să trecem la cel de-al doilea, cum ar fi cum să ascundeți datele din codul din afară cu ajutorul getters și setters.

    Datele neprotejate

    Setarea de getters și setters nu înseamnă că datele pot fi accesate și modificate numai prin aceste metode. În exemplul următor, este schimbat direct fără a atinge metodele getter și setter:

     var obj = fooVal: 'aceasta este valoarea lui foo', get foo () return this.fooVal; , setați foo (val) this.fooVal = val;  obj.fooVal = 'salut'; console.log (obj.foo); // "Salut" 

    Nu am folosit setterul, dar a modificat direct datele (fooVal). Datele pe care le-am stabilit inițial înăuntru obj este plecat acum! Pentru a împiedica acest lucru să se întâmple (accidental), tu au nevoie de o anumită protecție pentru datele dvs. Puteți adăuga asta prin limitând domeniul de aplicare unde datele dvs. sunt disponibile. Puteți face asta oricum blocarea domeniului sau funcție de domeniu.

    1. Blocarea domeniului

    O modalitate este de a utilizați un domeniu de bloc în care datele vor fi definite utilizând lăsa cuvânt cheie care își limitează domeniul de aplicare la acel bloc.

    A blocul de domeniu poate fi creat prin plasarea codului în interiorul unei perechi de bretele curbate. Ori de câte ori creați un domeniu de bloc, asigurați-vă că Lasa un comentariu deasupra ei cerând ca bretelele să fie lăsate singure, astfel încât nimeni îndepărtează tijele din greșeală, gândindu-se că sunt niște bretele suplimentare în cod sau adăugați o etichetă la domeniul de aplicare a blocului.

     / * BLOCK SCOPE, lăsați singurele bretele! * / let fooVal = 'aceasta este valoarea foo'; var obj = get foo () retur fooVal; , setați foo (val) fooVal = val fooVal = 'salut'; // nu va afecta fooVal-ul din interiorul blocului console.log (obj.foo); // "aceasta este valoarea foo"

    Modificarea / crearea fooValîn afara blocului nu va afecta fooVal se referă în interiorul setatorilor getters.

    2. Definirea domeniului de funcții

    Cea mai obișnuită modalitate de a proteja datele prin definirea domeniului este prin păstrarea datelor în interiorul unei funcții și întoarcerea unui obiect cu getters și setters de la această funcție.

     funcția myobj () var fooVal = 'aceasta este valoarea foo'; întoarcere get foo () return fooVal; , setați foo (val) fooVal = val fooVal = 'salut'; // nu ne va afecta originalul fooVal var obj = myobj (); console.log (obj.foo); // "aceasta este valoarea foo"

    Obiectul (cu foo () getter-setter în interiorul acestuia) returnat de către myobj () funcția este salvat în obj, și apoi obj este folosit pentru a apelați la getter și setter.

    3. Protecția datelor fără scop

    Există și un alt mod în care vă puteți proteja datele de la suprascriere fără a limita domeniul său de aplicare. Logica din spatele ei merge așa: cum poți schimba o bucată de date dacă nu știi ce se numește?

    Dacă datele au a nu este ușor de reprodus numele variabilei / proprietății, șansele sunt că nimeni (chiar și noi înșine) nu se va termina să o suprascrie, atribuind o anumită valoare acelui nume variabil / proprietate.

     var obj = s89274934764: 'aceasta este valoarea lui foo', get foo () return this.s89274934764; , setați foo (val) this.s89274934764 = val;  console.log (obj.foo); // "aceasta este valoarea foo" 

    Vezi, asta eo modalitate de a rezolva lucrurile. Deși numele pe care l-am ales nu este unul foarte bun, puteți, de asemenea utilizați valori aleatoare sau simboluri pentru a crea nume de proprietăți așa cum este propus de Derick Bailey în acest post pe blog. Scopul principal este de a păstrați datele ascunse de la alt cod și permiteți unei perechi getter-setter să acceseze / actualizeze-o.

    Când ar trebui să utilizați getters și setters?

    Acum vine întrebarea mare: începeți să atribuiți getters și setters la toate datele acum?

    Daca esti ascunderea datelor, atunci e acolo nici o altă alegere.

    Dar, dacă datele dvs. sunt văzute prin alt cod, este bine să utilizați setterii getters doar pentru a-l lega cu codul care efectuează unele operații pe ea? Eu as spune da. Cod se adaugă foarte curând. Crearea de micro-unități de date individuale cu propriul setter-getter vă oferă o anumită independență să lucreze la aceste date fără a afecta alte părți ale codului.