Meniul
AcasăTehnică

Obiecte JavaScript în exemple. Obiecte JavaScript fundamentale

Obiectele sunt piatra de temelie a JavaScript. Multe tipuri de date încorporate sunt reprezentate ca obiecte. Pentru a fi un dezvoltator JavaScript de succes, trebuie să înțelegeți clar modul în care funcționează. Blocurile de construcție ale unui obiect se numesc câmpurile sale sau proprietățile obiectului JavaScript. Sunt folosite pentru a descrie orice aspect al unui obiect. Proprietatea ar putea descrie lungimea unei liste, culoarea cerului sau data nașterii unei persoane. Crearea obiectelor este un proces ușor. Limbajul oferă o sintaxă cunoscută sub numele de literale obiect, care sunt notate cu acolade.

Accesarea Proprietăților

Limba oferă două intrări pentru accesarea proprietăților. Prima și cea mai comună este cunoscută sub numele de notație punct. În notație cu puncte, o resursă poate fi accesată specificând numele obiectului gazdă, urmat de punct și numele proprietății. De exemplu, când object.foo a fost setat inițial la unu, atunci valoarea sa va deveni 2 după ce instrucțiunea JavaScript objects este executată.

O sintaxă alternativă de acces este cunoscută sub numele de notație paranteze. În notație, numele obiectului este urmat de un set de paranteze drepte. În ele, numele proprietății este specificat ca șir:

obiect["foo"] = obiect["foo"] + 1.

Este mai expresiv decât notația cu puncte, deoarece permite unei variabile să specifice întregul sau parțial numele unei proprietăți. Acest lucru este posibil deoarece interpretul de obiect JavaScript convertește automat această expresie într-un șir și apoi obține proprietatea corespunzătoare. Numele proprietăților sunt create din mers prin concatenarea conținutului variabilei f cu șirul „oo”:

obiect = „bară”.

Notarea cu paranteze permite numelor de proprietăți să conțină caractere care sunt interzise în notația cu puncte. De exemplu, următoarea afirmație este complet legală între paranteze. Cu toate acestea, dacă utilizatorul încearcă să creeze același nume de proprietate în notație cu puncte, va întâlni o eroare de sintaxă:

obiect["!@#$% &*()."] = adevărat.

Proprietățile obiectelor JavaScript imbricate pot fi accesate prin înlănțuirea de puncte și/sau paranteze. De exemplu, următorul obiect conține un obiect imbricat numit baz care conține un alt obiect numit foo care are o proprietate numită bar care conține valoarea cinci:

var obiect = ( baz: ( foo: ( bar: 5 ) ) ).

Următoarele expresii accesează proprietatea atașată barei. Prima expresie folosește notația punct, în timp ce a doua expresie folosește notația pătrată. A treia expresie combină ambele intrări pentru a obține același rezultat:

  • obiect.baz.foo.bar;
  • obiect["baz"]["foo"]["bar"];
  • obiect["baz"].foo["bar"].

Expresii precum cele prezentate în exemplul anterior pot cauza degradarea performanței dacă sunt utilizate incorect și pot duce la eșecul obiectului JavaScript. Evaluarea fiecărei expresii punct sau paranteză necesită timp. Dacă aceeași proprietate este folosită de mai multe ori, atunci este logic să accesați proprietatea o dată și apoi să stocați valoarea într-o variabilă locală pentru toate utilizările viitoare.

Funcționează ca metodă

Când o funcție este folosită ca proprietate a unui obiect, se numește metodă. La fel ca și proprietățile, ele sunt specificate în notația literală a obiectului. De exemplu:

var obiect = ( suma: function(foo, bar) ( return foo + bar; ) ).

Metodele obiectelor JavaScript pot fi apelate folosind semne și paranteze. Următorul exemplu apelează metoda sum() din exemplul anterior folosind ambele intrări:

  • obiect.sumă(1, 2);
  • obiect[„sumă”](1, 2).

Notația literală a obiectelor este utilă pentru crearea de noi obiecte, dar nu poate adăuga proprietăți sau metode celor existente. Din fericire, adăugarea de date noi este la fel de ușoară ca și crearea unei declarații de atribuire. Este creat un obiect gol. Apoi, folosind operatori de atribuire, adăugăm două proprietăți, foo și bar, și metoda baz:

  • var obiect = ();
  • obiect.foo = 1;
  • obiect.bar = nul;
  • object.baz = function() ( return "bună ziua de la baz()"; ).
Încapsularea programului

Ideea de bază a programării orientate pe obiect este de a împărți programele în părți mai mici și de a face fiecare parte responsabilă pentru gestionarea propriei stări. Astfel, unele cunoștințe despre cum funcționează o parte a unui program pot fi locale acelei părți. Cineva care lucrează la restul programului nu ar trebui să-și amintească sau chiar să știe despre el. Ori de câte ori aceste date locale se modifică, trebuie actualizat doar codul imediat din jurul lor.

Diferitele părți ale unui astfel de program interacționează între ele prin interfețe, seturi limitate funcții sau legături care oferă funcționalitate utilă la un nivel mai abstract în timp ce ascund implementarea lor exactă. Astfel de părți ale unui program sunt modelate folosind obiecte. Interfața lor constă dintr-un set specific de metode și proprietăți. Proprietățile care fac parte dintr-o interfață sunt numite publice. Restul, care nu ar trebui să atingă codul extern, se numesc private.

Multe limbi oferă posibilitatea de a distinge între proprietățile publice și private și nu permit codului extern să acceseze cele private. JavaScript, care adoptă din nou o abordare minimalistă, nu există încă. În prezent, se lucrează pentru adăugarea acestei limbi. Prin urmare, programatorii JavaScript vor folosi cu succes această idee. De obicei, interfață accesibilă descrise în documentație sau comentarii. De asemenea, este o practică obișnuită să plasați o liniuță de subliniere (_) la începutul numelor de proprietate pentru a indica faptul că proprietățile sunt private. Separarea interfeței de implementare este o idee grozavă. Aceasta se numește de obicei încapsulare.

Proprietăți

Un obiect cu paranteze (...) se numește un obiect literal. Puteți plasa imediat unele proprietăți între astfel de paranteze (...). De exemplu, perechi „cheie: valoare și așa mai departe”:

permite utilizatorului = ( // un nume de obiect: „John”, // prin cheie „nume” să stocheze valoarea „John" age: 30 // by key "age" store value 30 }.!}

O proprietate are o cheie (cunoscută și ca „nume” sau „identificator”) înainte de două puncte „:” și o valoare în dreapta acesteia. Obiectul utilizator are două proprietăți. Obiectul JavaScript utilizator rezultat cu două fișiere semnate etichetate „nume” și „vârstă”. Puteți adăuga, șterge și citi fișiere din acesta în orice moment. Valorile proprietăților sunt accesate folosind notația cu puncte. Poate fi de orice tip. Puteți adăuga o valoare booleană. Pentru a elimina o proprietate, utilizați ștergere în caz Obiect de eroareși JavaScript.

Toate obiectele de eroare JavaScript sunt descendenți ai obiectului Error sau ai unui obiect moștenit:

  • Obiectul Error de sintaxă moștenește de la obiectul Error.
  • Eroare de analiză JSON a unui anumit tip de obiect Eroare de sintaxă.

    • Pentru a înțelege și mai profund modul în care aplicațiile tratează erorile JavaScript, aruncați o privire mai atentă la Airbrake JavaScript, un instrument de urmărire a erorilor pentru alerte în timp real și o perspectivă instantanee asupra a ceea ce a mers prost cu codul JavaScript.

    Mesaje de eroare pe care utilizatorul le poate primi înainte de a șterge un obiect JavaScript:

  • Caracter de control greșit într-un șir literal.
  • Caracter greșit într-un șir literal.
  • Ieșire Unicode slabă.
  • Personaj de evadare prost.
  • Șir neterminat.
  • Cod nenumeric neașteptat.
  • Nu există numere după virgulă.
  • Număr fracționar neterminat.
  • Nu există numere după indicatorul de grad.
  • Nu există numere după semnul exponentului.
  • Partea exponențială nu are număr.
  • Sfârșitul neașteptat al datelor.
  • Cuvânt cheie neașteptat.
  • Un simbol neașteptat.
  • Sfârșitul datelor la citirea conținutului unui obiect.
  • Numele de proprietate așteptat sau „)”.
    • Proprietăți de calcul

    Puteți utiliza paranteze drepte într-un obiect literal. Acestea se numesc proprietăți calculate. Un exemplu este dat mai jos.

    Sensul unei proprietăți calculate este simplu: înseamnă că numele proprietății trebuie luat din fructe. Deci, dacă un vizitator introduce „măr”, punga va deveni (măr: 5). Puteți folosi expresii mai complexe între paranteze drepte:

    lasă fructe = „măr”;

    : 5 // bag.appleComputers = 5

    Parantezele pătrate sunt mult mai puternice decât notația cu puncte. Acestea permit nume de proprietăți și variabile. Dar sunt și mai greoi de scris. Deci, de cele mai multe ori, când numele proprietăților sunt cunoscute și simple, se folosește un punct. Și dacă aveți nevoie de ceva mai complex, atunci treceți la paranteze drepte.

    Rezervarea cuvintelor

    O variabilă nu poate avea un nume egal cu unul dintre cuvintele rezervate, cum ar fi „pentru”, „lasă”, „return”, etc. Dar atunci când sortați obiecte JavaScript, nu există o astfel de restricție.


    În principiu, orice nume este permis, dar există unul special: „__proto__” primește un tratament special din motive istorice. De exemplu, nu îl puteți seta la o altă valoare decât un obiect:

    obj.__proto__ = 5;

    alert(obj.__proto__); // nu a funcționat conform intenției

    După cum puteți vedea din cod, scopul primitivei 5 este ignorat. Aceasta poate fi o sursă de erori și chiar vulnerabilități dacă operatorul intenționează să stocheze perechi cheie-valoare arbitrare într-un obiect și să permită vizitatorului să specifice cheile. În acest caz, vizitatorul poate selecta „proto” ca cheie și poate adăuga JavaScript la obiect. Există o modalitate de a face obiecte tratate cu __proto__ ca o proprietate obișnuită. Există, de asemenea, o altă hartă a structurilor de date care acceptă chei arbitrare.

    Proprietăți întregi

    Termenul „proprietate întreg” înseamnă aici un șir care poate fi convertit dintr-un număr întreg fără modificare. Deci, de exemplu, „49” este un nume de proprietate întreg, deoarece atunci când este convertit într-un număr întreg și înapoi, este în continuare același. Dar „+49” și „1,2” nu sunt așa. Pe de altă parte, dacă cheile nu sunt întregi, atunci ele sunt listate în ordinea în care au fost create. Exemplu de mai jos.


    Pentru a remedia problema cu codurile de apelare, puteți „trișa” făcând codurile incomplete. Adăugarea unui „+” (semnul plus) înainte de fiecare cod este suficientă. Acum va funcționa conform intenției.

    Diferența dintre obiecte și primitive este că acestea sunt stocate și copiate „prin referință”. Valorile primitive sunt atribuite și copiate „ca valoare întreagă”. O variabilă stochează o „adresă în memorie” mai degrabă decât obiectul în sine sau o „referință” la acesta. Puteți utiliza orice variabilă pentru a accesa și modifica conținutul acesteia.


    Exemplul de mai sus arată că există un singur obiect și un administrator care să se conecteze la el. Apoi, dacă o cheie diferită (utilizator) este folosită ulterior, utilizatorul va observa modificările.

    Operatorii de egalitate == și egalitatea strictă === pentru obiecte funcționează în același mod. Două obiecte sunt egale numai dacă sunt același obiect. Pentru comparații precum obj1 > obj2 sau comparații cu primitivul obj == 5, obiectele sunt convertite în primitive. Pentru a fi sincer, astfel de comparații sunt foarte rar necesare și sunt de obicei rezultatul unei erori de codare.

    Validarea obiectelor JavaScript

    Obiectele au acces la orice proprietate. Totuși, dacă nu există deloc, nu va fi o eroare. Doar accesarea unei proprietăți inexistente returnează nedefinit. Oferă o modalitate foarte comună de a testa o proprietate și de a o compara cu una nedefinită. Mai jos este un exemplu.


    Utilizarea „în” pentru proprietățile care stochează nedefinite. De obicei, o verificare strictă de comparație „=== nedefinit” funcționează bine. Există un caz special în care eșuează și „în” funcționează corect. Acesta este momentul în care o proprietate a unui obiect există, dar rămâne nedefinită.


    În codul de mai sus, proprietatea obj.test există din punct de vedere tehnic. Prin urmare, operatorul de intrare funcționează corect. Situații similare se întâmplă foarte rar deoarece undefined nu este de obicei atribuit. În cea mai mare parte, sunt folosite valori „necunoscute” sau „vide” nule. Astfel, operatorul in este efectiv un invitat în cod.

    buclă „for..in”.

    Pentru a trece prin toate tastele de la obiect la obiect, există o formă specială de buclă: for..in. Acesta este un lucru complet diferit de constructul for(;;).

    Mai jos este un exemplu.


    Vă rugăm să rețineți că toți constructorii „for” vă permit să declarați o variabilă de buclă în interiorul unei bucle ca o cheie let. Alternativ, puteți utiliza un alt nume de variabilă, cheie.

    De exemplu, for(let prop in obj) este, de asemenea, utilizat pe scară largă.

    Există o alternativă „paranteză pătrată” care funcționează cu orice șir.


    Ideea aici necesită ca cheile obiectului JavaScript să fie un identificator de variabilă valid, ceea ce înseamnă că nu există spații sau alte restricții. Trebuie avut grijă să vă asigurați că linia din interiorul parantezelor este citată corect. Parantezele pătrate oferă, de asemenea, o modalitate de a obține numele proprietății din rezultatul oricărei expresii, spre deosebire de un șir literal dintr-o variabilă:

    let key = „îi plac păsările”;

    // la fel ca user["like birds"] = true;

    utilizator = adevărat.

    Aici variabila cheie poate fi calculată în timpul execuției și depinde de intrarea utilizatorului și apoi utilizată pentru a accesa proprietatea. Acest lucru oferă programatorilor mai multă flexibilitate. Notația cu puncte nu poate fi utilizată într-un mod similar, deoarece ar repeta peste obiectul JavaScript. Mai jos este un exemplu.


    Const obiect

    Un obiect const declarat poate fi modificat. Un exemplu este dat mai jos.


    Ar putea părea că obiectul JavaScript din linia (*) ar arunca o eroare, dar nu este cazul. Acest lucru se datorează faptului că const captează valoarea utilizatorului însuși. Și aici utilizatorul păstrează o referință la același obiect tot timpul. Linia (*) intră în interiorul obiectului, nu este reatribuită utilizatorului. Const va da o eroare dacă încercați să setați utilizatorul și altceva. Clonarea și fuzionarea, Object.assign creează o altă referință la același obiect dacă trebuie duplicat. Acest lucru este, de asemenea, realizabil, dar puțin mai dificil, deoarece JavaScript nu are o metodă încorporată. De fapt, acest lucru este rareori necesar. Copierea prin referință este utilizată în majoritatea cazurilor. Dar dacă aveți într-adevăr nevoie de acest lucru, atunci trebuie să creați un obiect JavaScript și să replicați structura unuia existent, copierea proprietăților acestuia la un nivel primitiv. Mai jos este un exemplu.


    Și puteți folosi și metoda Object.assign pentru aceasta. Argumentele dest și src1, ..., srcN sunt obiecte. Copiază proprietățile tuturor obiectelor src1, ..., srcNINTO dest. Cu alte cuvinte, proprietățile tuturor argumentelor, începând de la al doilea, sunt copiate în primul. Apoi se întoarce în dest. De exemplu, îl puteți folosi pentru a combina mai multe obiecte într-unul singur.


    Și puteți utiliza, de asemenea, Object.assign pentru a înlocui bucla simplă de clonare. Copiază toate proprietățile utilizatorului într-un obiect gol și îl returnează, la fel ca o buclă, dar mai scurtă. Până acum, s-a presupus că toate proprietățile utilizatorului sunt primitive. Dar proprietățile pot fi referințe la alte obiecte.

    Pentru a remedia acest lucru, trebuie să utilizați o buclă de clonare care verifică fiecare valoare de utilizator și, dacă este un obiect, apoi îi reproduce structura. Aceasta se numește „clonare profundă”.

    Există un algoritm standard de clonare profundă care se ocupă de cazul de mai sus și de cazuri mai complexe numite algoritm de clonare structurată. Pentru a evita reinventarea roții, puteți folosi o implementare funcțională din biblioteca JavaScript lodash, metoda se numește _.cloneDeep(obj).

    Metode avansate

    Dacă un programator trece peste un obiect și dorește să obțină toate proprietățile în aceeași ordine în care au fost adăugate, el se poate baza pe „ordonare specială”, în care proprietățile întregi sunt sortate și altele sunt formate în ordinea în care a fost creat obiectul JavaScript. .

    Metodele avansate de obiecte se ocupă de concepte care sunt rareori utilizate în JavaScript. Acest lucru se datorează faptului că, în scenariile normale, aceste caracteristici puternice nu sunt necesare. Este posibil ca unele dintre aceste metode să nu funcționeze în browserele mai vechi, cum ar fi versiunile timpurii ale Netscape 4.

    Prototipul ar putea fi folosit pentru a crea obiecte JavaScript și toate metodele mycircle, nu doar cele noi. Acest lucru are un impact mixt asupra performanței. Nu ar trebui să depoziteze copii individuale metode pentru fiecare instanță de obiect, deci poate necesita mai puțină memorie pentru a funcționa, dar browserul trebuie să caute domeniile actuale și părinte pentru a le găsi. Acest lucru poate duce la o latență extremă. În general, utilizatorul ar trebui să folosească ceea ce este adecvat pentru cod, mai degrabă decât să bazeze acea decizie pe performanță, cu excepția cazului în care are de-a face cu un mediu controlat foarte specific.


    Returnează adevărat

    În unele cazuri, poate fi necesar ca proprietatea unui obiect să fie legată de obiectul în sine sau de undeva în lanțul de prototipuri. În JavaScript, toate obiectele folosesc metoda hasOwnProperty, care returnează adevărat dacă acea proprietate este legată de o instanță individuală a obiectului. În acest caz, devine posibil să se verifice dacă constructorul unui obiect are aceeași proprietate cu aceeași valoare ca și instanța obiectului în sine. Acest lucru poate da rezultate incorecte dacă există proprietăți separate ale obiectului JavaScript cu aceeași valoare atât pentru instanța obiectului, cât și pentru prototipul circuitului. Metoda hasOwnProperty ia un singur parametru - numele proprietății ca șir.


    Puteți crea metode private într-un mod similar. Este pur și simplu o funcție care este creată în interiorul unei funcții de constructor. Acest lucru poate părea confuz pentru unii, dar așa funcționează. O funcție privată poate fi apelată doar de către constructorul însuși sau prin metode care sunt definite pe linie. Ele pot fi folosite ca metode publice dacă sunt atribuite unui constructor public și accesate folosind metode publice ale obiectelor Javascript.

    function myob() ( function cantBeSeen() ( alert(secretValue);

    ) var secretValue = "";

    this.method1 = function () ( secretValue = " fara surprize";!}

    this.method2 = cantBeSeen;

    ) var oneOb = new myob();

    oneOb.method1();

    //alertează „fără surprize” oneOb.method2();

    //avertizează „fără surprize”.

    Șablon de comandă

    Obiectele de comandă permit sistemele slab cuplate prin separarea celor care emit o solicitare de obiecte și a celor care procesează efectiv cererea. Aceste cereri se numesc evenimente, iar codul care procesează cererile se numește handler de evenimente.

    Să presupunem că creați aplicații care acceptă acțiunile din clipboard Cut, Copy and Paste. Aceste acțiuni pot fi declanșate în diferite moduri de-a lungul aplicației: prin sistemul de meniuri, meniul contextual, de exemplu, făcând clic dreapta pe un câmp de text sau utilizând o comandă rapidă de la tastatură. Obiectele de comandă vă permit să centralizați procesarea acestor acțiuni, câte una pentru fiecare operație, când este necesară o singură comandă pentru a procesa toate cererile Cut, una pentru toate cererile Copy și una pentru toate cererile Paste.

    Deoarece echipele centralizează toată procesarea, ele sunt adesea implicate în gestionarea funcțiilor de anulare pentru întreaga aplicație. Îmbunătățiri semnificative pot fi obținute prin aplicarea tehnicilor JavaScript moderne, rezultând aplicații mai eficiente, mai fiabile și mai ușor de întreținut.

    Pentru a afla cum să faceți acest lucru, puteți utiliza șabloane JavaScript + jQuery. Acest pachet unic include JavaScript optimizat pentru toate șabloanele GoF folosind funcții mai avansate, cum ar fi spații de nume, prototipuri, module, obiecte funcționale, închideri, funcții anonime și multe altele. Dacă utilizatorii au nevoie cele mai noi instrumenteși metode pentru șabloane JavaScript, șabloane jQuery și arhitecturi de șabloane, apoi aceasta cea mai bună opțiune utilizare. Acest pachet conține valori valoroase, informații la zi Pentru Dezvoltatori JavaScript. Iată ce este inclus:

  • Șabloane GoF optimizate pentru JavaScript.
  • Modele moderne de design JavaScript.
  • Model-View Design Patterns.
  • Șabloane de design jQuery.
  • Modele arhitecturale ale idiomurilor JavaScript.
  • Exemple de aplicații (MVC, SPA etc.)

    • Elementele de bază propuse pentru sintaxa obiectelor JavaScript sunt foarte importante pentru programatorii începători. Mai întâi trebuie să înțelegem obiectele, apoi vor exista cunoștințe despre programarea orientată pe obiecte. Este esențial să aveți o înțelegere profundă a acestui material, deoarece servește drept bază pentru restul limbajului JavaScript.

    JavaScript este proiectat pe o paradigmă simplă bazată pe obiecte. Un obiect este o colecție de proprietăți, iar o proprietate este o asociere între un nume (sau cheie) și o valoare. Valoarea unei proprietăți poate fi o funcție, caz în care proprietatea este cunoscută ca metodă. În plus față de obiectele care sunt predefinite în browser, puteți definiți-vă propriile obiecte. Acest capitol descrie cum să utilizați obiecte, proprietăți, funcții și metode și cum să vă creați propriile obiecte.

    Privire de ansamblu asupra obiectelor

    Obiectele din JavaScript, la fel ca în multe alte limbaje de programare, pot fi comparate cu obiectele din viața reală. Conceptul de obiecte în JavaScript poate fi înțeles cu obiecte reale, tangibile.

    În JavaScript, un obiect este o entitate independentă, cu proprietăți și tip. Compară-l cu o ceașcă, de exemplu. O ceașcă este un obiect, cu proprietăți. O ceașcă are o culoare, un design, greutate, un material din care este făcută etc. În același mod, obiectele JavaScript pot avea proprietăți, care le definesc caracteristicile.

    Obiecte și proprietăți

    Un obiect JavaScript are proprietăți asociate cu acesta. O proprietate a unui obiect poate fi explicată ca o variabilă care este atașată obiectului. Proprietățile obiectului sunt practic aceleași cu variabilele JavaScript obișnuite, cu excepția atașării la obiecte. Proprietățile unui obiect definesc caracteristicile obiectului. Accesați proprietățile unui obiect cu o simplă notație de puncte:

    ObjectName.propertyName

    La fel ca toate variabilele JavaScript, atât numele obiectului (care ar putea fi o variabilă normală), cât și numele proprietății sunt sensibile la majuscule și minuscule. Puteți defini o proprietate atribuindu-i o valoare. De exemplu, să creăm un obiect numit myCar și să-i dăm proprietăți numite make , model , and year, după cum urmează:

    Var myCar = obiect nou(); myCar.make = „Ford”; myCar.model = „Mustang”; myCar.year = 1969; myCar.color; // nedefinit

    Proprietățile obiectelor JavaScript pot fi, de asemenea, accesate sau setate folosind o notație paranteze (pentru mai multe detalii vezi Accesorii de proprietate). Obiectele sunt uneori numite tablouri asociative, deoarece fiecare proprietate este asociată cu o valoare șir care poate fi folosită pentru a o accesa. Deci, de exemplu, puteți accesa proprietățile obiectului myCar după cum urmează:

    MyCar["make"] = "Ford"; myCar["model"] = "Mustang"; myCar["anul"] = 1969;

    Numele unei proprietăți de obiect poate fi orice șir JavaScript valid sau orice poate fi convertit într-un șir, inclusiv șirul gol. Cu toate acestea, orice nume de proprietate care nu este un identificator JavaScript valid (de exemplu, un nume de proprietate care are un spațiu sau o cratimă sau care începe cu un număr) poate fi accesat numai folosind notația paranteze pătrate. Această notație este, de asemenea, foarte utilă atunci când numele proprietăților urmează să fie determinate dinamic (când numele proprietății nu este determinat până la runtime). Exemplele sunt următoarele:

    // patru variabile sunt create și atribuite dintr-o singură mișcare, // separate prin virgule var myObj = new Object(), str = "myString", rand = Math.random(), obj = new Object(); myObj.type = "Sintaxa punctului"; myObj["date created"] = "Șir cu spațiu"; myObj = „Valoare șir”; myObj = „Număr aleatoriu”; myObj = „Obiect”; myObj[""] = "Chiar și un șir gol"; console.log(myObj);

    Vă rugăm să rețineți că toate cheile din notația dintre paranteze drepte sunt convertite în șir, cu excepția cazului în care sunt simboluri, deoarece numele proprietăților obiectelor JavaScript (cheile) pot fi doar șiruri de caractere sau simboluri (la un moment dat, numele private vor fi adăugate și ca propunere de câmpuri de clasă). progresează, dar nu le vei folosi cu formă). De exemplu, în codul de mai sus, când cheia obj este adăugată la myObj , JavaScript va apela metoda obj.toString() și va folosi acest șir de rezultat ca nouă cheie.

    De asemenea, puteți accesa proprietăți folosind o valoare șir care este stocată într-o variabilă:

    Var propertyName = "facă"; myCar = "Ford"; propertyName = "model"; myCar = „Mustang”;

    Folosind o funcție de constructor

    Alternativ, puteți crea un obiect cu acești doi pași:

  • Definiți tipul obiectului scriind o funcție de constructor. Există o convenție puternică, cu un motiv întemeiat, de a folosi o literă inițială majusculă.
  • Creați o instanță a obiectului cu new .

    • Pentru a defini un tip de obiect, creați o funcție pentru tipul de obiect care îi specifică numele, proprietățile și metodele. De exemplu, să presupunem că doriți să creați un tip de obiect pentru mașini. Doriți ca acest tip de obiect să se numească Car , și doriți să aibă proprietăți pentru marcă, model și an. Pentru a face acest lucru, ar trebui să scrieți următoarea funcție:

    Funcția Mașină (marcă, model, an) ( this.make = make; this.model = model; this.year = year; )

    Observați utilizarea acestuia pentru a atribui valori proprietăților obiectului pe baza valorilor transmise funcției.

    Acum puteți crea un obiect numit mycar după cum urmează:

    Var mycar = masina noua("Eagle", "Talon TSi", 1993);

    Această declarație creează mycar și îi atribuie valorile specificate pentru proprietățile sale. Apoi valoarea mycar.make este șirul „Eagle”, mycar.year este numărul întreg 1993 și așa mai departe.

    Puteți crea orice număr de obiecte Car prin apeluri la noi. De exemplu,

    Var kenscar = mașină nouă ("Nissan", "300ZX", 1992); var vpgscar = masina noua("Mazda", "Miata", 1990);

    Un obiect poate avea o proprietate care este el însuși un alt obiect. De exemplu, să presupunem că definiți un obiect numit persoană după cum urmează:

    Funcție Persoană (nume, vârstă, sex) ( this.name = nume; this.age = vârstă; this.sex = sex; )

    și apoi instanțiați două noi obiecte persoană după cum urmează:

    Var rand = new Person("Rand McKinnon", 33, "M"); var ken = new Person("Ken Jones", 39, "M");

    Apoi, puteți rescrie definiția Car pentru a include o proprietate de proprietar care ia un obiect persoană, după cum urmează:

    Funcția Mașină (marcă, model, an, proprietar) ( this.make = make; this.model = model; this.year = year; this.owner = proprietar; )

    Pentru a instanția noile obiecte, utilizați următoarele:

    Var car1 = new Car("Eagle", "Talon TSi", 1993, rand); var car2 = new Car("Nissan", "300ZX", 1992, ken);

    Observați că în loc să treacă un șir literal sau o valoare întreagă la crearea noilor obiecte, instrucțiunile de mai sus trec obiectele rand și ken ca argumente pentru proprietari. Apoi, dacă doriți să aflați numele proprietarului car2, puteți accesa următoarea proprietate:

    Auto2.nume.proprietar

    Rețineți că puteți adăuga oricând o proprietate unui obiect definit anterior. De exemplu, afirmația

    Car1.color = „negru”;

    adaugă o culoare de proprietate la car1 și îi atribuie o valoare „negru”. Cu toate acestea, acest lucru nu afectează niciun alt obiect. Pentru a adăuga noua proprietate la toate obiectele de același tip, trebuie să adăugați proprietatea la definiția tipului de obiect Car.

    Folosind metoda Object.create Vezi și
    • Pentru a explora mai adânc, citiți despre detaliile modelului de obiecte javaScript.
    • Pentru a afla despre clasele ECMAScript 2015 (o nouă modalitate de a crea obiecte), citiți capitolul Clasele JavaScript.

    Ultima actualizare: 04/08/2018

    Programarea orientată pe obiecte este una dintre paradigmele dominante în dezvoltarea aplicațiilor de astăzi, iar în JavaScript putem profita din plin de OOP. În același timp, în raport cu JavaScript, programarea orientată pe obiecte are câteva caracteristici.

    Obiecte

    În subiectele anterioare, am lucrat cu date primitive - numere, șiruri de caractere, dar datele nu reprezintă întotdeauna tipurile primitive. De exemplu, dacă în programul nostru trebuie să descriem esența unei persoane care are un nume, vârstă, sex și așa mai departe, atunci în mod natural nu vom putea reprezenta esența unei persoane ca un număr sau șir. Vom avea nevoie de câteva rânduri sau numere pentru a descrie corect persoana. În acest sens, o persoană va acționa ca o structură complexă complexă, care va avea proprietăți individuale - vârstă, înălțime, prenume, nume etc.

    Pentru a lucra cu astfel de structuri, JavaScript folosește . Fiecare obiect poate stoca proprietăți care îi descriu starea și metode care îi descriu comportamentul

    Crearea unui nou obiect

    Există mai multe moduri de a crea un obiect nou.

    Prima modalitate este să utilizați constructorul Object:

    Var user = obiect nou();

    În acest caz, obiectul se numește utilizator. Este definită în același mod ca orice variabilă obișnuită folosind cuvântul cheie var.

    Noua expresie Object() reprezintă un apel către un constructor, o funcție care creează un nou obiect. Noul operator este folosit pentru a apela constructorul. Apelarea unui constructor este, în esență, ca apelarea unei funcții obișnuite.

    A doua modalitate de a crea un obiect este prin utilizarea acoladelor:

    Var user = ();

    Astăzi, a doua metodă este mai comună.

    Proprietățile obiectului

    După crearea unui obiect, putem defini proprietățile acestuia. Pentru a defini o proprietate, trebuie să specificați numele proprietății după numele obiectului, separate printr-un punct, și să îi atribuiți o valoare:

    Var user = (); user.name = "Tom"; user.age = 26;

    În acest caz, două proprietăți numele și vârsta sunt declarate și li se atribuie valori corespunzătoare. După aceea, putem folosi aceste proprietăți, de exemplu, pentru a le afișa valorile în consolă:

    Console.log(nume.utilizator); console.log(user.age);

    De asemenea, puteți defini proprietăți atunci când definiți un obiect:

    Var user = (nume: „Tom”, vârsta: 26);

    În acest caz, un caracter două puncte este folosit pentru a atribui o valoare proprietății, iar după definiția proprietății este plasată o virgulă (mai degrabă decât un punct și virgulă).

    În plus, există o cale rapidă de a defini proprietățile:

    Var nume = "Tom"; var varsta = 34; var user = (nume, varsta); console.log(nume.utilizator); // Tom console.log(user.age); // 34

    În acest caz, numele variabilelor sunt și numele proprietăților obiectului. Și astfel puteți crea modele mai complexe:

    Var nume = "Tom"; var varsta = 34; var user = (nume, varsta); var profesor = (utilizator, curs: "JavaScript"); console.log(profesor.utilizator); // (nume: „Tom”, vârsta: 34) console.log(profesor.curs); // JavaScript

    Metode obiect

    Metodele unui obiect definesc comportamentul sau acțiunile pe care le efectuează. Metodele sunt funcții. De exemplu, să definim o metodă care să afișeze numele și vârsta unei persoane:

    Var user = (); user.name = "Tom"; user.age = 26; user.display = function())( console.log(user.name); console.log(user.age); ); // apelarea metodei user.display();

    Ca și în cazul funcțiilor, metodele sunt mai întâi definite și apoi apelate.

    De asemenea, metodele pot fi definite direct la definirea unui obiect:

    Var user = (nume: „Tom”, vârsta: 26, afișare: function())( console.log(this.name); console.log(this.age); ) );

    Ca și în cazul proprietăților, unei metode i se atribuie o referință de funcție folosind două puncte.

    Pentru a accesa proprietățile sau metodele unui obiect din acel obiect, utilizați cuvântul cheie this. Înseamnă o referire la obiectul curent.

    Puteți utiliza, de asemenea, o modalitate prescurtată de a defini metode, omițând două puncte și funcția:

    Var user = (nume: „Tom”, vârsta: 26, display())( console.log(this.name, this.age); ), move(place)( console.log(this.name, „goes to " , loc); user.display(); // Tom 26 user.move("magazinul"); //Tom merge la magazin

    Sintaxa matricei

    Există, de asemenea, o modalitate alternativă de a defini proprietăți și metode folosind sintaxa matricei:

    Var user = (); user["name"] = "Tom"; utilizator["varsta"] = 26; user["display"] = function())( console.log(user.name); console.log(user.age); ); // apelarea metodei user["display"]();

    Numele fiecărei proprietăți sau metode este cuprins între ghilimele și paranteze pătrate, apoi i se atribuie și o valoare. De exemplu, user["varsta"] = 26 .

    Când accesați aceste proprietăți și metode, puteți fie să utilizați notația cu puncte (user.name) fie să utilizați user["name"]

    Șiruri de caractere ca proprietăți și metode

    De asemenea, trebuie remarcat faptul că numele proprietăților și metodelor obiectelor sunt întotdeauna șiruri de caractere. Adică, am putea rescrie definiția anterioară a obiectului astfel:

    Var user = ( „nume”: „Tom”, „vârstă”: 26, „afișare”: function())( console.log(nume utilizator); console.log(user.varsta); ) ); // apel de metodă user.display();

    Pe de o parte, nu există nicio diferență între cele două definiții. Pe de altă parte, există cazuri în care includerea titlului într-o linie poate ajuta. De exemplu, dacă numele proprietății constă din două cuvinte separate printr-un spațiu:

    Var user = (nume: „Tom”, vârsta: 26, „nume complet”: „Tom Johns”, „afișează informații”: function())( console.log(user.name); console.log(user.age ) ; ) ); console.log(utilizator[„nume complet”]); utilizator["afișează informații"]();

    Numai în acest caz, pentru a accesa astfel de proprietăți și metode, trebuie să folosim sintaxa matricei.

    Îndepărtarea proprietăților

    Mai sus ne-am uitat la modul în care putem adăuga dinamic noi proprietăți unui obiect. Cu toate acestea, putem șterge și proprietăți și metode folosind operatorul de ștergere. Și la fel ca și în cazul adăugării, putem elimina proprietăți în două moduri. Prima modalitate este de a folosi notația punct:

    Șterge obiect.proprietate

    Sau utilizați sintaxa matricei:

    Șterge obiect[„proprietate”]

    De exemplu, să eliminăm proprietatea:

    Var user = (); user.name = "Tom"; user.age = 26; user.display = function())( console.log(user.name); console.log(user.age); ); console.log(nume.utilizator); // Tom șterge user.name; // ștergeți proprietatea // alternativă // ​​ștergeți utilizatorul["nume"]; console.log(nume.utilizator); // nedefinit

    După ștergere, proprietatea va fi nedefinită, așa că atunci când încercați să o accesați, programul va returna valoarea nedefinită.

    Sarcina :

    1. Sunt trei obiecte (trei mașini): primul_Mașină, al doilea_Mașină și al treilea_Mașină.

    2. Fiecare dintre obiecte (masini) are un set de proprietăți și valorile corespunzătoare acestora (caracteristicile mașinii).

    3. Luați în considerare unul dintre obiecte:

    var first_Car = (
    marca: "VAZ" , /* producător */
    model: 2106 , /* model */
    an: 1980 , /* an fabricatie */
    culoare: "bej", /* culoare */
    pasageri: 5 , /* numărul de pasageri */
    decapotabil: fals, /* capota decapotabilă */
    kilometraj: 80000 /* kilometraj */
    }

    Proprietățile marca și culoarea au valori de șir;

    Proprietățile modelului, anul, pasagerii și kilometrajul sunt valori numerice;

    Proprietatea convertibilă ia o valoare booleană.

    Trebuie să faceți următoarele:

    Scrieți o funcție care verifică o mașină folosind doi parametri (an fabricatie si kilometraj)și returnează valoarea booleană true sau false.

    Detalii:

    1. Funcția are un parametru mașină, care primește unul dintre cele 3 obiecte. De exemplu, mașina discutată mai sus este first_Car.

    2. Funcția trebuie să funcționeze cu orice obiect similar.

    Funcție de verificare a obiectului - adevărat sau fals

    /* primul obiect */
    var first_Car = (
    marca: "VAZ",
    model: 2106,
    Anul: 1980,
    culoare: "bej",
    pasageri: 5,
    convertibil: fals,
    kilometraj: 80000
    }

    /* al 2-lea obiect */
    var second_Car = (
    marca: "VW",
    model: "Passat b3",
    Anul: 1990,
    culoare: „neptun”,
    pasageri: 5,
    convertibil: fals,
    kilometraj: 160000
    }

    /* al treilea obiect */
    var a treia_Masina = (
    marca: "Hyundai",
    model: "Solaris",
    Anul: 2012,
    culoare: „asfalt umed”,
    pasageri: 5,
    convertibil: fals,
    kilometraj: 15000
    }


    function good_Car(masina) (
    dacă (maşină. an< 2000 ){
    returnează fals;
    }
    altfel dacă (kilometraj mașină > 50000 )(
    returnează fals;
    }
    altceva(
    returnează adevărat;
    }
    }

    /* Apelați o funcție și scoateți rezultatul */
    var rezultat = good_Car ( a treia_Masina );

    document.

    scrie (rezultat);

    • Comentarii despre solutie: Deci avem trei obiecte(trei mașini)
    • , fiecare dintre acestea putând fi analizat folosind funcția good_Car. (masini) Funcția good_Car are un parametru car , care poate fi oricare dintre obiecte
    • : primul_Mașină , al doilea_Mașină sau al treilea_Mașină : funcția bună_Mașină(mașină) .

      Caroseria funcției good_Car conține o condiție conform căreia: Dacă valoarea anului proprietății obiectului auto este mai mică de 2000(cu alte cuvinte: dacă mașina are mai puțin de 2.000 de ani)

      , atunci funcția returnează false; În caz contrar, dacă valoarea proprietății de kilometraj a obiectului mașinii este mai mare de 50000(cu alte cuvinte: dacă mașina are mai puțin de 2.000 de ani)

      (dacă kilometrajul mașinii este mai mare de 50.000)

    • În caz contrar, funcția returnează true. Apoi, apelăm funcția și specificăm obiectul third_Car ca parametru(a treia mașină)
      , care trece testul cu succes. Rezultatul funcției este stocat în variabila rezultat:
    • var rezultat = good_Car(a treia_Masina); .
    • Variabila rezultată este afișată pe ecran; Alte două obiecte(mașină)
    nu va îndeplini cerințele condițiilor.

    Optimizarea codului

    Să continuăm să lucrăm cu obiecte în javascript. (masini) Deci, funcția discutată mai sus la verificarea obiectelor returnează adevărat sau fals.

    (adevărat sau fals)

    /* primul obiect */
    var first_Car = (
    marca: "VAZ",
    model: 2106,
    Anul: 1980,
    culoare: "bej",
    pasageri: 5,
    convertibil: fals,
    kilometraj: 80000
    }

    /* al 2-lea obiect */
    var second_Car = (
    marca: "VW",
    model: "Passat b3",
    Anul: 1990,
    culoare: „neptun”,
    pasageri: 5,
    convertibil: fals,
    kilometraj: 160000
    }

    /* al treilea obiect */
    var a treia_Masina = (
    marca: "Hyundai",
    model: "Solaris",
    Anul: 2012,
    culoare: „asfalt umed”,
    pasageri: 5,
    convertibil: fals,
    kilometraj: 15000
    }

    Puteți îmbunătăți ușor calitatea percepției soluției la problema luată în considerare, adică, în loc de adevărat sau fals, afișați un text. Pentru a face acest lucru, vom crea o condiție pentru analiza rezultatului.
    function good_Car(masina) (
    /* Funcție pentru verificarea unui obiect */< 2000 ){
    dacă (maşină. an
    }
    returnează fals;
    dacă (maşină. an
    }
    altfel dacă (kilometraj mașină > 50000)(
    altceva(
    }
    }


    returnează adevărat;

    var rezultat = good_Car ( a treia_Masina );
    dacă (rezultat) (
    }
    altfel dacă (kilometraj mașină > 50000)(
    document. scrie ("Ai o mașină bună: " + a treia_Mașină . an + " an de fabricație, cu kilometraj " + a treia_Mașină .kilometraj + " km." );
    }

    document. scrie ("Nu vom vorbi despre masina ta....");

    Condiția de analiză a rezultatului este următoarea.

    • Expresia if(rezult) este o formă scurtă a expresiei
      if(rezultat == adevărat) .
    • Dacă rezultatul funcției good_Car este adevărat, atunci afișăm fraza: „Ai o mașină bună: 2012, cu un kilometraj de 15.000 km”, unde

      2012 și 15000 sunt valorile anului și proprietățile de kilometraj ale celui de-al treilea obiect_Car.

    • Dacă condiția de verificare a rezultatului produce o valoare falsă false , atunci vom vedea: „Nu vom vorbi despre mașina ta...”. Adică obiectul în cauză (auto) nu a trecut testul.
    Optimizarea codului - Continuarea - Adăugarea unei funcții

    Dar asta nu este tot. Aruncă o privire atentă la fragmentul de cod pentru apelarea funcției și analizarea rezultatului:

    /* Apelați funcția și analizați rezultatul */
    var rezultat = good_Car( a treia_Masina );

    var rezultat = good_Car ( a treia_Masina );
    document.write("Ai o mașină bună: " + a treia_Mașină .an + " an de fabricație, cu kilometraj " + a treia_Mașină .kilometraj + " km.");
    }
    altceva(
    document.write("Nu vom vorbi despre masina ta....");
    }

    Aici este al treilea obiect_Car Apoi, apelăm funcția și specificăm obiectul third_Car ca parametru indicat de trei ori:

    • Prima dată când funcția good_Car este apelată, aceasta este specificată ca parametru: good_Car(third_Car) .
    • Și apoi mai apare de două ori când îl accesăm pentru a indica proprietățile sale: third_Car.year și third_Car.mileage .

    Nu mi-a plăcut asta pentru că atunci când analizez un alt obiect Alte două obiecte va trebui sa-i indicam si numele de trei ori!!!

    Pentru a obține o indicație unică a obiectului analizat, aveți nevoie atât de rezultatul funcției good_Car, cât și de o analiză a acestui rezultat (asta e tot) pus într-o altă funcție.

    /* primul obiect */
    var first_Car = (
    marca: "VAZ",
    model: 2106,
    Anul: 1980,
    culoare: "bej",
    pasageri: 5,
    convertibil: fals,
    kilometraj: 80000
    }

    /* al 2-lea obiect */
    var second_Car = (
    marca: "VW",
    model: "Passat b3",
    Anul: 1990,
    culoare: „neptun”,
    pasageri: 5,
    convertibil: fals,
    kilometraj: 160000
    }

    /* al treilea obiect */
    var a treia_Masina = (
    marca: "Hyundai",
    model: "Solaris",
    Anul: 2012,
    culoare: „asfalt umed”,
    pasageri: 5,
    convertibil: fals,
    kilometraj: 15000
    }

    Puteți îmbunătăți ușor calitatea percepției soluției la problema luată în considerare, adică, în loc de adevărat sau fals, afișați un text. Pentru a face acest lucru, vom crea o condiție pentru analiza rezultatului.
    function good_Car(masina) (
    daca (masina .an< 2000){
    dacă (maşină. an
    }
    altfel dacă (mașină .kilometraj > 50000)(
    dacă (maşină. an
    }
    altfel dacă (kilometraj mașină > 50000)(
    altceva(
    }
    }

    /* Introduceți rezultatul funcției good_Car și Analiza rezultatului într-o altă funcție */
    funcția itog(mașină)(
    var rezultat = good_Car(masina);

    Dacă (rezultat) (
    document.write("Ai o mașină bună: " + mașină .an + " an fabricație, cu kilometraj " + mașină .kilometraj + " km.");
    }
    altfel dacă (kilometraj mașină > 50000)(
    document.write("Nu vom vorbi despre masina ta....");
    }
    }

    itog( a treia_Masina );

    Soluție folosind altă funcție - Rezultat...

    Ai o mașină bună: fabricată în 2012, cu un kilometraj de 15.000 km.




    Obiectele sunt unul dintre conceptele de bază în JavaScript. Când am început să le studiez, mi s-au părut destul de simple: doar perechi de chei și valori, așa cum este descris în teorie.

    Abia după ceva timp am început să înțeleg că subiectul era mult mai complex decât credeam. Și apoi am început să studiez informații din diferite surse. Unii dintre ei au dat bună emisiune despre subiect, dar nu am reușit să văd întreaga imagine imediat.

    În această postare, am încercat să acopăr toate aspectele lucrului cu obiecte în JS, fără a intra prea adânc în detalii specifice, dar și fără a omite detalii importante care vă vor ajuta să înțelegeți subiectul și să vă simțiți mai încrezători pe măsură ce îl studiați mai departe.

    Deci, să începem cu elementele de bază.

    ObjectAn obiect în JavaScript este pur și simplu o colecție de proprietăți, fiecare dintre acestea fiind o pereche cheie-valoare. Puteți accesa tastele folosind un punct ( obj.a) sau notația paranteze ( obj["a"]).

    Rețineți că trebuie folosite paranteze dacă cheia este:

    • nu este un identificator JavaScript valid (are un spațiu, o liniuță, începe cu un număr...)
    • este o variabilă.
    Una dintre proprietățile pe care obiectele din JS le primesc atunci când sunt create este apelată Prototip, iar acesta este un concept foarte important Prototip Fiecare obiect din JavaScript are o proprietate internă numită Prototip. În majoritatea browserelor vă puteți referi la el prin notație __proto__.

    Prototip este o modalitate de a impune moștenirea proprietăților în JavaScript. În acest fel, puteți partaja funcționalitatea fără a duplica codul din memorie. Metoda funcționează prin crearea unei conexiuni între două obiecte.

    Mai simplu spus, Prototype creează un indicator de la un obiect la altul.

    Lanț prototip

    De fiecare dată când JS caută o proprietate într-un obiect și nu o găsește direct pe obiectul în sine, verifică prezența proprietății în obiectul prototip. Dacă nu există nicio proprietate în el, atunci JS va continua să caute în prototipul obiectului asociat. Acest lucru va continua până când JS găsește o proprietate potrivită sau ajunge la sfârșitul lanțului.

    Să ne uităm la un exemplu:

    Var cons = function () ( this.a = 1; this.b = 2; ) var obj = new cons(); cons.prototype.b = 3; cons.prototype.c = 4;
    contra este un constructor (pur și simplu o funcție care poate fi apelată folosind operatorul nou).

    Pe a cincea linie creăm un nou obiect - o nouă copie contra. Imediat după creare obj primește și proprietatea prototipului.

    Și acum adăugăm proprietăți ( "b", "c") prototip de obiect contra.
    Sa luam in considerare obj:

    obj.a // 1 - totul este la fel aici, obj.a este inca 1.
    obj.c? - y obj nicio proprietate c! Cu toate acestea, așa cum sa menționat anterior, JS îl va căuta acum în prototip objși va returna valoarea 4.

    Acum să ne gândim care este sensul obj.bși cum va fi când vom elimina obj.b?

    Obj.b este egal cu 2. Am atribuit proprietatea b, dar am făcut-o pentru un prototip contra, deci când verificăm obj.b, atunci obținem în continuare 2. Cu toate acestea, imediat după eliminare obj.b JS nu va mai putea găsi b y o B j, și, prin urmare, va continua căutarea în prototip și va returna valoarea 3.

    Crearea unui obiect obiectLiteral: fie obj = (a: 1);
    Am creat un obiect cu următorul lanț de prototipuri: obj ---> Object.prototype ---> null
    După cum poți ghici, obiect.prototip este prototipul obiectului și, de asemenea, capătul lanțului de prototipuri.

    Object.create(): var newObj = Object.create(obj);
    U nouObj va exista următorul lanț de prototipuri: newObj ---> obj ---> Object.prototype ---> null

    Constructor. Ca și în exemplul de mai sus, constructorul este pur și simplu o funcție JS care ne permite să profităm de operator nou pentru a crea noi instanțe ale acestuia.

    Clasele ES6:

    Clasa dreptunghi ( constructor(height, width) ( this.height = height; this.width = width; ) getArea() ( return this.height * this.width; ) ) let square = new rectangle(2, 2);
    Pătrat- instanță de constructor dreptunghi, și așa putem suna square.getArea() //4, pătrat.lăţime, precum și toate funcțiile moștenite de la obiect.prototip.

    Care este mai bine? Dacă intenționați să creați mai multe instanțe, puteți utiliza ES6 sau designerul. Dacă intenționați să creați obiectul o dată, atunci este mai bine să specificați un literal, deoarece acesta este cel mai simplu mod.

    Și acum că am aflat despre prototipși după ce ne-am familiarizat cu toate modalitățile de a crea noi obiecte, putem trece la discutarea despre unul dintre cele mai confuze aspecte asociate obiectelor.

    Compararea și modificarea obiectelor În JavaScript, obiectele sunt tipuri de referință.

    Când creăm un obiect fie obj = (a: 1);, variabil obj primește adresa de memorie a obiectului, dar nu valoarea acestuia! Este extrem de important să înțelegeți această diferență, altfel pot apărea erori. Când creăm un alt obiect let newObj = obj, de fapt creăm un pointer către o anumită zonă de memorie obj, și nu un obiect complet nou.

    Aceasta înseamnă că făcând newObj.a = 2, ne schimbam de fapt obj astfel încât obj.a devine egal cu 2!

    Această abordare duce cu ușurință la erori, motiv pentru care multe companii lucrează cu obiecte imuabile. În loc să modificați un obiect deja creat, va trebui să creați din nou un obiect nou (o copie a originalului) și să-i faceți modificări. Acesta este cât de importante funcționează bibliotecile precum Redux și este unul dintre conceptele de bază ale programării funcționale în general. Puteți citi mai multe.

    Egalitatea

    De asemenea, din cele de mai sus rezultă că două obiecte nu pot fi niciodată egale, chiar dacă au aceleași proprietăți. Acest lucru se datorează faptului că JS compară de fapt locația de memorie a obiectelor și două obiecte nu se află niciodată în aceeași locație de memorie.

    // Două obiecte distincte cu aceleași proprietăți nu sunt egale var fruit = (nume: „măr”); var fruitbear = (nume: „măr”); fruct === fructbear; // returnează fals // aici fruit și fruitbear indică același obiect var fruit = (nume: „măr”); var fruitbear = fruct; fruct === fructbear; // returnează adevărat
    Deci, cel mai probabil v-ați întrebat deja cum puteți compara obiecte sau cum să efectuați diverse manipulări cu obiecte, având în vedere cerința de imuabilitate a acestora.

    Să luăm în considerare mai multe posibilități.

    Schimbarea unui obiect

    Să presupunem că este clar că nu ar trebui să schimbăm obiectele, așa că vrem să creăm o copie a obiectului corespunzător și să-i schimbăm proprietățile. Vine la salvare Object.assign().

    Var obj = (a: 1, b: 2); var newObj = Object.assign((), obj,(a:2)) // (a: 2, b: 2 )
    Daca vrem sa schimbam valoarea proprietatii A obiect obj, poți să folosești obiect.atribuie pentru a crea o copie objși modificările ei.

    În exemplu, puteți vedea că mai întâi creăm un obiect gol, apoi copiam valorile objși facem modificările noastre, obținând în cele din urmă un obiect nou și gata de utilizare.

    Vă rugăm să rețineți că această metodă nu va funcționa pentru copierea profundă. Când vorbim despre copierea profundă, ne referim la faptul că trebuie să copiem un obiect cu una sau mai multe proprietăți.

    Const obj = (a: 1, b: ( a: 1 ) ); // proprietatea b este un obiect
    Object.assign() copiează proprietățile unui obiect, deci dacă valoarea proprietății este un pointer către un obiect, atunci doar pointerul este copiat.

    O copie profundă necesită o operație recursivă. Aici puteți scrie o funcție sau pur și simplu utilizați o metodă _.cloneDeep din biblioteca Lodash.

    Compararea obiectelor

    Există o tehnică grozavă de lucru cu obiecte - conversia șirurilor. În următorul exemplu, convertim ambele obiecte în șiruri de caractere și le comparăm:

    JSON.stringify(obj1) === JSON.stringify(obj2)
    Această abordare are sens, deoarece ajungem să comparăm șiruri care sunt un pointer către un tip de valoare. Vestea proastă este că nu funcționează întotdeauna, în principal pentru că ordinea proprietăților obiectului nu este garantată.

    O altă soluție bună este folosirea metodei _.este egal de la Lodash, care realizează o comparație profundă a obiectelor.

    Și înainte de a încheia, să trecem peste câteva întrebări frecvente despre obiecte. Acest lucru vă va ajuta să vă scufundați mai adânc în subiect și să aplicați cunoștințele dobândite în practică.

    Încercați să vă gândiți la soluție înainte de a citi răspunsul.

    Cum să afli lungimea unui obiect? Pentru a obține răspunsul, trebuie să parcurgeți toate proprietățile obiectului una câte una și să le numărați. Există mai multe moduri de a efectua o astfel de iterație:
    • pentru in. Această metodă acoperă toate proprietățile numărabile ale unui obiect și lanțurile sale prototip. Am văzut prototipul (și sperăm că am învățat materialul), așa că ar trebui să fie clar că aplicația pentru in nu va fi întotdeauna adevărat pentru obținerea proprietăților unui obiect.
    • Obiect.chei. Această metodă returnează o matrice cu cheile tuturor proprietăților de numărare native (care aparțin obiectului specificat). Această abordare este mai bună deoarece lucrăm doar pe proprietățile obiectului, fără a accesa proprietățile prototip. Există, totuși, situații în care ați atribuit un atribut enumerabil unele proprietăți sunt false și obiect.chei ajunge să o săriți peste el și obțineți un rezultat incorect. Acest lucru se întâmplă rar, dar în astfel de cazuri va fi util getOwnPropertyNames.
    • getOwnPropertyNames returnează o matrice care conține toate cheile proprii ale obiectului (atât numărabile, cât și nenumărabile).
    De asemenea, merită menționat:
    • Obiect.valori iterează peste propriile proprietăți de numărare și returnează o matrice cu valorile corespunzătoare.
    • Obiect.intrari iterează peste propriile proprietăți de numărare și returnează o matrice cu cheile și valorile acestora.
    Cred că ați observat că majoritatea metodelor enumerate mai sus returnează o matrice. Aceasta este o oportunitate de a profita din plin de tehnicile de matrice JavaScript.

    O astfel de metodă este matrice.lungime. Drept urmare, putem scrie pur și simplu

    Fie objLength = Object.getOwnPropertyNames(obj).length;

    Cum se verifică dacă un obiect este gol?
  • JSON.stringify(myObj) === „()”?. Aici folosim din nou instrumentul de conversie a șirurilor pentru a verifica cu ușurință dacă un obiect este gol (comparând șiruri, nu obiecte).
  • !Object.keys(myobj).length // adevărat?.? După cum am menționat, conversia cheilor unui obiect într-o matrice poate fi foarte utilă. Aici folosim proprietatea convenabilă lungime, moștenit de la Array.prototip, folosindu-l pentru a verifica lungimea cheilor din matrice. În JS 0 se transformă în fals, deci adăugând ! îl transformăm în adevărat. Orice alte numere vor fi convertite în false.
    • În concluzie, sper că acum vă simțiți mai încrezători în crearea și lucrul cu obiecte. Să rezumăm:
    • Rețineți că obiectele sunt de tip referință, ceea ce înseamnă că este recomandat să lucrați cu ele fără a modifica obiectele originale.
    • Fă-ți prieteni cu proprietatea prototipși un lanț de prototipuri.
    • Cunoașteți instrumentele care vă ajută să lucrați cu obiecte. Amintiți-vă că puteți transforma obiectele în șiruri de caractere, puteți obține o matrice a cheilor lor sau pur și simplu puteți repeta proprietățile lor folosind setul de metode la care am fost introdus.
    Succes în învățarea obiectelor JavaScript.