Salutări tuturor celor care citesc această publicație. Astăzi vreau să vă ghidez printr-un instrument cheie de limbaj - obiectele JavaScript. Permiteți-mi să vă reamintesc că js este cross-browser și funcționează în toate sistemele de operare (windows, mac os etc.). Spre deosebire de limbajele de programare orientate pe obiecte, în js, implementarea obiectelor este semnificativ diferită de funcționalitatea obișnuită și variațiile de utilizare a instanțelor, de exemplu, în C #.

Prin urmare, după ce ați citit articolul curent, veți afla principalele caracteristici distinctive ale obiectelor scriptate, veți afla cum să le creați, să le actualizați și să le ștergeți. Voi aborda și subiectul proprietăților, metodelor și constructorilor, voi vorbi despre comenzi utile și, bineînțeles, puțin despre moștenire. Cred că este timpul să începi să înveți!

Ce este un obiect în JavaScript și ce caracteristici are?

În js, obiectele sunt simple tablouri asociative (numite și hash-uri).

Ce este un tablou asociativ?

Este o structură de date care stochează o anumită cantitate de informații legate de și care descrie un anumit element. Toate datele sunt structurate și legate ca „cheie => valoare”.

De exemplu, trebuie să descrii mașini. Apoi creați un obiect avto și descrieți caracteristicile acestuia într-o matrice. Am decis să descriu marca mașinii (numele), culoarea (culoarea) și costul (prețul). Mai jos am atașat codul pentru implementarea sarcinii descrise.

1 2 3 4 5

var avto = (nume: "BMW 116i", culoare: "negru", pret: 588000);

var avto = (nume: "BMW 116i", culoare: "negru", pret: 588000);

Aici vedeți una dintre modalitățile de a crea un obiect numit „avto”. Numele, culoarea și prețul sunt cheile care pot fi accesate în timpul scrierii aplicației.

Cu acest exemplu, am alergat înainte, așa că acum vom analiza totul în ordine.

Există mai multe moduri de a crea un obiect:

var avto = (); sau var avto = obiect nou ();

În ambele cazuri, este creat un obiect gol cu ​​un nume cunoscut, dar prima opțiune este folosită mult mai des, deoarece este mai scurt și mai convenabil de scris.

Totul despre proprietăți

Acum trebuie să umplem obiectul gol cu ​​parametri. Pentru a face acest lucru, trebuie să adăugați proprietăți, pe care le-am numit și chei mai sus. Din nou, există două moduri de a declara proprietăți.

Vreau să subliniez că JavaScript nu are un cadru strict pentru crearea și inițializarea unor astfel de parametri. Pot apărea noi proprietăți în întregul cod, așa cum pot fi șterse și actualizate.

Astfel, puteți crea toate cheile simultan sau le puteți declara pe măsură ce devin disponibile. Și chiar dacă în timpul scrierii programului te referi la chei inexistente, nu va exista nicio eroare. În acest caz, „nedefinit” va fi returnat.

Prima cale.

Crearea și accesarea proprietăților printr-un punct. Pentru a implementa această opțiune, trebuie să scrieți numele obiectului, apoi să îi atribuiți numele cheii printr-un punct și apoi să atribuiți o valoare prin semnul egal:

avto.name = „BMW 116i”

Dar în acest fel, adăugați încă un element la cheile existente:

Această metodă este folosită atunci când numele proprietății este deja cunoscut și este necesar să se efectueze anumite acțiuni cu valorile.

A doua cale.

Nimic diferit de primul, dacă le compari scopul. Cu toate acestea, această metodă are un mic avantaj. Pentru această opțiune, se folosesc paranteze drepte:

avto [„nume”] = „BMW 116i”

Un plus frumos este capacitatea de a crea nume de proprietăți sub forma oricărui șir. De exemplu,

avto [„numele mașinii”] = „BMW 116i”

Lucrul cu cheile prin paranteze pătrate este folosit atunci când unii parametri sunt introduși de utilizator și stocați în variabile sau când numele proprietăților nu sunt cunoscute în prealabil. De exemplu, utilizatorul solicită costul mașinii selectate. Elementul care a fost apelat este scris în variabilă, iar prețul este transmis ca răspuns:

var avto = (); avto.name = "BMW_116i"; avto.price = 588000; var cheie = „preț”; // prețul mașinii a fost solicitat alertă (avto);

Acum să trecem la eliminarea proprietăților. Totul este foarte simplu aici. Pentru a șterge, utilizați comanda șterge... Deci, dacă adăugați următoarele 2 rânduri la ultimul exemplu de mai jos:

șterge avto.price;

alertă (avto);

Apoi, când alerta este apelată a doua oară, dialogul va reveni „nedefinit”.

Câteva cuvinte despre compactitate

În etapa actuală, v-am spus cum să creați un obiect și să descrieți proprietățile acestuia. Am atașat cazuri de testare la aceasta, dar cei mai atenți dintre voi, dragi cititori, ați observat că primul cod de program este oarecum diferit de toate celelalte.

Și totul pentru că folosește o reprezentare compactă a datelor. Aceasta este o metodă foarte populară pentru declararea cheilor, deoarece este mai scurtă de scris și mai ușor de citit vizual.

Să repetăm ​​proprietățile noastre

În JavaScript, puteți itera rapid peste proprietățile generate. Pentru aceasta a fost prevăzut un mecanism special, mai cunoscut ca ciclu.

Dacă sunteți familiarizat cu alte limbaje de programare, atunci știți că cel mai adesea buclele sunt create folosind cuvântul pentru, apoi intre paranteze se scrie conditia de enumerare a elementelor.

În js, arată ca o buclă pentru fiecare din limbajul C #. Consultați vederea generală a structurii:

pentru (var obj în obiect) (// repetare peste)

unde obj este responsabil pentru numele cheilor enumerate,

obiect – pentru valorile lor.

Și acum iată un exemplu concret pentru tine.

1 2 3 4 5 6 7 8

var avto = (nume: "BMW 116i", culoare: "negru", pret: 588000); pentru (var obj în obiect) (alertă (obj + ":" + obiect))

var avto = (nume: "BMW 116i", culoare: "negru", pret: 588000); pentru (var obj în obiect) (alertă (obj + ":" + obiect))

Este timpul să vă familiarizați cu metodele

Limbajul de scripting prevede crearea de metode. Acesta este un mecanism absolut simplu prin care în orice moment puteți adăuga o metodă sau metode la orice obiect care extind capacitățile tablourilor asociative create. Ele sunt numite și proprietăți ale funcției.

Js în sine este foarte dinamic și minunat într-o oarecare măsură. Acesta este modul în care puteți crea elemente de diferite tipuri. Când învățați această limbă, nu trebuie să memorați construcții complexe, deoarece multe reclame sunt foarte asemănătoare între ele.

Deci, pentru a crea o metodă, trebuie să declarați un obiect și apoi să începeți să scrieți o comandă care este exact ca și crearea proprietăților. Totuși, după „=", nu mai este scrisă valoarea, ci funcția de cuvânt cheie (variabilă). Și apoi, în acolade, există o listă de acțiuni.

Iată implementarea acestui mecanism:

var avto = () avto.name = „BMV” avto.year = 1999 avto.drive = funcția (k) (alertă („Vehicul trecut” + n + „km”)) avto.drive (300) avto.drive ( 450)

După cum puteți vedea, acest exemplu conține proprietăți și metode, ale căror apeluri sunt inițial identice.

JS are și constructori?

Da domnule! În această limbă, tot ce folosește cuvântul cheie " nou", devine automat un constructor. Deci, mai sus ați văzut declarația unui obiect gol sub forma: avto = new Object () ;. Acesta este constructorul.

Pentru claritate, luați în considerare rândurile de mai jos.

var bob = obiect nou ();

bob.name = "Bob Smith";

Cu toate acestea, acesta nu este întregul arsenal de posibilități. În js, vă puteți crea propriii constructori și apoi îi puteți folosi pentru a declara obiecte noi.

Deci, vreau să „realizez” un constructor personalizat pentru mașini deja native. Rețineți că numele trebuie scris cu majuscule. Acesta este semnul distinctiv al funcțiilor. Pentru a face acest lucru, scriu următoarea implementare software:

funcția Avto (nume, preț) (

this.name = nume;

this.price = pret;

Acum, când creați un număr nelimitat de obiecte și le aplicați acest constructor, toate vor aparține aceleiași clase. De exemplu:

var car1 = nou Avto ("BMW", 650000);

var car2 = nou Avto ("Audi", 520000);

În plus, metodele pot fi create în interiorul constructorului.

Caracteristici ale moștenirii în JavaScript

De obicei, în multe limbi, moștenirea se bazează pe clase care se pot moșteni unele de la altele. Apoi puteți auzi expresii precum „clasa strămoșilor”, „clasa copiilor”, etc.

Cu toate acestea, totul este diferit în js. Obiectele sunt moștenite aici.

Toată moștenirea se bazează pe o referință internă între obiecte, care este cunoscută sub numele de „prototip”. Dacă atribuiți „.prototype” metodei printr-un punct și apoi scrieți numele prototipului, atunci toate obiectele metodei selectate vor moșteni din acest prototip.

Să trecem la un exemplu.

function Transport (name) (this.name = name this.canDrive = true) var transport = new Transport ("avto") // a creat un obiect de transport function Bike (name) (this.name = name) Bike.prototype = transport // indicăm că toate obiectele noi din această clasă vor folosi transport bike1 = bicicletă nouă ("for_sport") bike2 = bicicletă nouă ("for_child") console.log (bicicletă1.nume) console.log (bicicletă2.nume) console . jurnal (bike1.canDrive)

În acest moment, probabil că voi termina. V-am povestit despre aspectele fundamentale ale limbajului de scripting. Totuși, aceasta este doar cunoștințe superficiale. Mai departe vom merge mai adânc. Între timp, nu uitați să vă alăturați rândurilor abonaților mei și să distribuiți prietenilor tăi linkul către articol. Noroc!

Pa! Pa!

Cu stima, Roman Chueshov

Citit: de 97 de ori

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ă. Elementele de bază ale unui obiect se numesc câmpurile sale sau proprietățile obiectului JavaScript. Sunt folosite pentru a descrie orice aspect al unui obiect. Proprietatea poate descrie lungimea listei, culoarea cerului sau data nașterii unei persoane. Crearea obiectelor este un proces ușor. Limbajul oferă 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. Cu notația punct, o resursă poate fi accesată specificând numele obiectului gazdă, urmat de punct și numele proprietății. De exemplu, atunci când obiect.foo i s-a atribuit inițial valoarea unu, atunci valoarea sa va deveni 2 după ce instrucțiunea JavaScript a obiectelor este executată.

O sintaxă alternativă pentru acces este cunoscută sub numele de notație de paranteză. În notație, numele obiectului este urmat de un set de paranteze drepte. Acestea specifică numele proprietății 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 al unui nume de proprietate. Acest lucru este posibil deoarece interpretul de obiect JavaScript convertește automat această expresie într-un șir și apoi preia proprietatea corespunzătoare. Numele proprietăților sunt create din mers prin concatenarea conținutului variabilei f cu șirul „oo”:

obiect = „bară”.

Notația cu paranteze permite numelor de proprietăți să conțină caractere care nu sunt permise î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 punctată, va întâlni o eroare de sintaxă:

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

Proprietățile obiectelor JavaScript imbricate pot fi accesate prin legarea 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ă bara de proprietăți imbricată. 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 cea prezentată în exemplul anterior pot degrada performanța dacă sunt utilizate greșit și pot face obiectul JavaScript inutilizabil. 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 scopurile 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 folosind notația literală a obiectului. De exemplu:

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

Metodele de obiect JavaScript pot fi apelate folosind etichete și paranteze. Următorul exemplu apelează metoda sum () din exemplul anterior folosind ambele notații:

• 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 instrucțiunile de atribuire, sunt adăugate două proprietăți, foo și bar, precum și metoda baz:

• var obiect = ();
• obiect.foo = 1;
• obiect.bar = nul;
• obiect.baz = functie () (return "bună ziua din baz ()";).

Programe de încapsulare

Ideea de bază din spatele programării orientate pe obiect este de a împărți programele în bucăți mai mici și de a face pe fiecare 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 trebuie 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 de funcții sau legături, care oferă funcționalitate utilă la un nivel mai abstract, ascunzând implementarea lor exactă. Astfel de părți ale programului 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 proprietăți 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 proprietățile private. JavaScript, care adoptă din nou o abordare minimalistă, nu a fost încă realizat. În prezent se lucrează pentru adăugarea acestei limbi. Prin urmare, programatorii JavaScript vor folosi această idee cu succes. De regulă, interfața disponibilă este descrisă în documentație sau comentarii. De asemenea, este 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ă. Este denumită în mod obișnuit încapsulare.

Proprietăți

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

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

Proprietatea are o cheie (cunoscută și sub denumirea de „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 disponibile folosind notația cu puncte. Poate fi de orice tip. Booleanul poate fi adăugat. Pentru a șterge o proprietate, utilizați delete în cazul Eroare al unui obiect JavaScript.

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

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

Pentru a explora ș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 înțelegere instantanee a ce a mers prost cu codul JavaScript.

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

1. Caracter de control greșit în literal șir.
2. Caracter greșit într-un șir literal.
3. Ieșire Unicode greșită.
4. Personaj de evadare prost.
5. Șir neterminat.
6. Cod nenumeric neașteptat.
7. Nu există cifre după virgulă zecimală.
8. Număr fracționar neterminat.
9. Nu există numere după indicatorul de grad.
10. Nu există cifre după semnul exponentului.
11. Partea exponențială nu are număr.
12. Sfârșitul neașteptat al datelor.
13. Un cuvânt cheie neașteptat.
14. Un simbol neașteptat.
15. Sfârșitul datelor în timpul citirii conținutului obiectului.
16. Numele de proprietate așteptat sau „)”.

Proprietăți de calcul

Puteți folosi paranteze drepte într-un obiect literal. Aceasta se numește proprietăți calculate. Un exemplu este prezentat mai jos.

Valoarea proprietății calculată este simplă: înseamnă că numele proprietății ar trebui luat din fructe. Deci, dacă un vizitator introduce „măr”, sacul devine (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. Acceptă nume de proprietăți și variabile. Dar sunt și mai greoaie de scris. Prin urmare, de cele mai multe ori, atunci când numele de proprietate 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, let, return și așa mai departe. Dar nu există o astfel de limitare la sortarea obiectelor JavaScript.

Î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 obiect:

obj .__ proto__ = 5;

alertă (obj .__ proto__); //, "nu a funcționat așa cum a fost prevăzut

După cum puteți vedea din cod, atribuirea primitivei 5 este ignorată. Aceasta poate deveni o sursă de erori și chiar vulnerabilități dacă operatorul intenționează să stocheze perechi cheie-valoare arbitrare în obiect și să permită vizitatorului să specifice cheile. În acest caz, vizitatorul poate alege „proto” ca cheie și îl poate adăuga la obiectul JavaScript. 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. Pe de altă parte, dacă cheile nu sunt întregi, atunci ele sunt listate în ordinea creării. Vezi exemplul de mai jos.

Pentru a remedia problema cu codurile de zonă, puteți „trișa” făcând codurile să nu fie întregi. Adăugarea unui „+” (semnul plus) în fața fiecărui 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”, nu obiectul în sine sau o „referință” la acesta. Puteți folosi 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 autentifice la el. Apoi, dacă mai târziu folosește o cheie diferită (utilizator), utilizatorul va detecta modificarea.

Operatorii egalitate == și egalitate strictă === funcționează la fel pentru obiecte. Două obiecte sunt egale numai dacă sunt același obiect. Pentru comparații precum obj1> obj2 sau pentru 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.

Validare obiect JavaScript

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

Utilizarea „în” pentru proprietățile care stochează nedefinite. De obicei, verificarea de comparație strictă „=== 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 de acest fel sunt foarte rare, deoarece undefined nu este de obicei atribuit. În cea mai mare parte, sunt utilizate valori „necunoscute” sau „vide” nule. Astfel, operatorul in este, de fapt, un invitat în cod.

Buclă „for..in”

Pentru a parcurge toate cheile 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.

Trebuie remarcat faptul că toți constructorii „for” vă permit să declarați variabila de buclă în interiorul buclei ca o cheie let. Alternativ, puteți utiliza o cheie diferită pentru nume de variabilă.

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

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

Acestea fiind spuse, punctul necesită ca cheile obiectului JavaScript să fie un identificator de variabilă valid, adică nu există spații sau alte restricții. Trebuie să acordați atenție că linia din interiorul parantezelor este corect citată. Parantezele pătrate oferă, de asemenea, o modalitate de a obține un nume de proprietate din orice expresie, spre deosebire de un șir literal dintr-o variabilă:

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

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

utilizator = adevărat.

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

Const obiect

Obiectul const declarat poate fi modificat. Un exemplu este prezentat mai jos.

Poate părea că un obiect JavaScript pe linie (*) va genera o eroare, dar nu va fi. 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ă de utilizator. 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 în cazul în care acesta trebuie duplicat. Acest lucru este, de asemenea, realizabil, dar puțin mai complicat, deoarece nu există o metodă încorporată în JavaScript. De fapt, acest lucru este rareori necesar. Copierea prin referință este utilizată în majoritatea cazurilor. Dar dacă chiar aveți nevoie de el, atunci trebuie să creați un obiect JavaScript și să replicați structura celui 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 cu 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 este, de asemenea, posibil să utilizați Object.assign pentru a înlocui bucla de clonă simplă. 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 utiliza o implementare funcțională din biblioteca JavaScript lodash numită _.cloneDeep (obj).

Tehnici avansate

Dacă un programator trece peste un obiect și încearcă să recupereze toate proprietățile în aceeași ordine în care au fost adăugate, 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 rar utilizate în JavaScript. Acest lucru se datorează faptului că aceste caracteristici puternice nu sunt necesare în scenariile normale. Este posibil ca unele dintre aceste metode să nu funcționeze în browserele mai vechi, cum ar fi versiunile timpurii ale Netscape 4.

Utilizarea prototipului ar putea fi folosită pentru a crea obiecte JavaScript și toate metodele mycircle, nu doar altele noi. Acest lucru oferă o sarcină de performanță mixtă. Ei nu trebuie să păstreze copii separate ale metodelor pentru fiecare instanță a obiectului, așa că ar putea 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 mod obișnuit, 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 o proprietate a 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ă această proprietate este legată de o singură instanță de obiect. În acest caz, devine posibil să se verifice dacă constructorul obiectului are aceeași proprietate cu aceeași valoare ca și instanța obiectului în sine. Acest lucru poate da un rezultat greșit dacă există proprietăți separate ale obiectului JavaScript cu aceeași valoare atât pentru instanța obiectului, cât și pentru prototipul lanțului. Metoda hasOwnProperty ia un singur parametru, numele proprietății ca șir.

Metodele private pot fi create în același mod. Este doar 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 constructorul însuși sau prin metode care sunt definite în șir. Ele pot fi folosite ca metode publice dacă sunt atribuite unui constructor public și accesate folosind metode publice ale obiectelor Javascript.

funcția myob () (funcția cantBeSeen () (alertă (secretValue);

) var secretValue = "";

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

this.method2 = cantBeSeen;

) var oneOb = myob nou ();

oneOb.method1 ();

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

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

Șablon de comandă

Obiectele de comandă permit sisteme cuplate liber, separându-le pe cele care emit cererea de obiecte și, de fapt, procesează cererea. Aceste cereri se numesc evenimente, iar codul care se ocupă de cereri se numește handler de evenimente.

Să presupunem că construiți aplicații care acceptă acțiunile Clipboard Cut, Copy și Paste. Aceste acțiuni pot fi declanșate în diferite moduri în cadrul aplicației: prin sistemul de meniuri, meniuri contextuale, de exemplu, făcând clic dreapta pe un câmp de text sau prin comenzile rapide de la tastatură. Obiectele de comandă vă permit să centralizați procesarea acestor acțiuni, câte una pentru fiecare operațiune când aveți nevoie de o singură comandă pentru a procesa toate cererile de tăiere, una pentru toate cererile de copiere și una pentru toate cererile de lipire.

Deoarece comenzile centralizează toată procesarea, ele sunt adesea implicate în procesarea 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.

Șabloanele JavaScript + jQuery pot fi folosite pentru a vedea cum să faceți acest lucru. 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 doresc cele mai recente instrumente și tehnici pentru șabloane JavaScript, șabloane jQuery și arhitecturi de șabloane, atunci acesta este cel mai bun caz de utilizare. Acest pachet conține informații valoroase și relevante pentru dezvoltatorii JavaScript. Iată ce este inclus:

1. Șabloane GoF optimizate pentru JavaScript.
2. Modele moderne de design JavaScript.
3. Model-View modele de design.
4. Șabloane de design JQuery.
5. Modele arhitecturale Idiomuri JavaScript.
6. Exemple de aplicații (MVC, SPA etc.)

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

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 este mult mai complicat decât credeam. Și apoi am început să studiez informații din diverse surse. Unii dintre ei au dat o idee bună despre subiect, dar nu am reușit să văd întreaga imagine deodată.

În această postare, am încercat să acopăr toate aspectele lucrului cu obiecte în JS, fără a intra prea adânc în detalii individuale, dar și fără a rata 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 explorați mai departe.

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

Un obiect

Un obiect în JavaScript este pur și simplu o colecție de proprietăți, fiecare dintre acestea fiind o pereche cheie-valoare. Puteți face referire la taste folosind punctul ( obj.a) sau notația paranteze ( obj ["a"]).

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

• nu este un identificator JavaScript valid (conține un spațiu, 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 numită Prototipși 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 furniza 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 legături î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 prototip obiectul aferent. Acest lucru va continua până când JS găsește o proprietate potrivită sau ajunge la sfârșitul lanțului.

Să luăm 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 (doar 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.
Considera obj:

obj.a // 1- totul este la fel aici, obj.a este inca 1.
obj.c?- la 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 la semnificație 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 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 mai poate găsi b la o B j, și, prin urmare, va continua căutarea în prototip și va returna valoarea 3.

Crearea obiectelor

Literal obiect: 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, precum și sfârșitul lanțului de prototipuri.

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

Constructor. Ca și în exemplul de mai sus, un constructor 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:

Dreptunghi de clasă (constructor (înălțime, lățime) (this.height = înălțime; this.width = width;) getArea () (return this.height * this.width;)) let square = nou dreptunghi (2, 2);
Pătrat- instanță de constructor dreptunghi si asa putem suna square.getArea () // 4, pătrat.lăţime precum și toate funcțiile moștenite de la obiect.prototip.

Care este cea mai bună cale? Dacă intenționați să creați mai multe instanțe, puteți utiliza ES6 sau constructorul. 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 ne-am familiarizat cu toate modalitățile de a crea noi obiecte, putem trece la discutarea despre unul dintre cele mai confuze momente asociate obiectelor.

Compararea și modificarea obiectelor

În JavaScript, obiectele sunt de tip referință

Când creăm un obiect fie obj = (a: 1);, variabil obj primește adresa de memorie a obiectului, dar nu și valoarea acestuia! Este imperativ să înțelegeți această diferență, altfel pot apărea erori. Când creăm un alt obiect let newObj = obj, noi de fapt creăm indicator la o anumită zonă de memorie obj mai degrabă decât 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ă faceți modificări deja în el. Acesta este cât de importante funcționează bibliotecile precum Redux și, în general, este unul dintre conceptele de bază ale programării funcționale. Puteți citi mai multe despre el.

Egalitate

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 obiectelor în memorie ș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ă spunem că este clar că nu ar trebui să schimbăm obiectele într-un mod amiabil, așa că dorim 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 acesteia.

În exemplu, puteți vedea că mai întâi creăm un obiect gol, apoi copiam valorile objși faceți 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ă copiați 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 metoda _.cloneDeep din biblioteca Lodash.

Compararea obiectelor

Un truc interesant pentru lucrul cu obiecte este conversia șirurilor. În exemplul următor, convertim ambele obiecte în șiruri de caractere și le comparăm:

JSON.stringify (obj1) === JSON.stringify (obj2)
Această abordare este justificată, deoarece în final comparăm șiruri de caractere care reprezintă 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 făcând o comparație profundă a obiectelor.

Și înainte de a închide, să trecem peste câteva întrebări frecvente despre obiecte. Acest lucru va ajuta la aprofundarea subiectului și la aplicarea cunoștințelor dobândite în practică.

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

Cum știu lungimea unui obiect?

Pentru a obține un răspuns, trebuie să repetați toate proprietățile obiectului una câte una și să le numărați. Există mai multe moduri de a efectua această iterație:

• pentru in... Această metodă acoperă toate proprietățile numărabile ale unui obiect și lanțurile sale prototip. Am ajuns să cunoaștem 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 corect pentru a obține proprietățile unui obiect.
• Obiect.chei... Această metodă returnează o matrice cu cheile tuturor proprii(aparținând obiectului specificat) socoteală proprietăți. Această abordare este mai bună, deoarece lucrăm doar pe proprietățile obiectului, nu ne referim la proprietăți. prototip... Există, totuși, situații în care ați atribuit un atribut enumerabil unele proprietate la fals și obiect.chei ca urmare, îl omite ș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 proprii chei obiect (atât numărabile, cât și nenumărabile).

De asemenea, merită menționat:

• Obiect.valori iterează peste propriile proprietăți numărabile și returnează o matrice cu potrivire valorile.
• Obiect.intrari iterează peste propriile proprietăți numărabile și returnează o matrice cu cheile și valorile acestora.

Cred că ați observat că majoritatea metodelor de mai sus returnează o matrice. Aceasta este o oportunitate de a profita din plin de metodele JavaScript pentru a lucra cu matrice.

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?

1. 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).
2. ! 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 verificând cu ea lungimea cheilor din matrice. În JS 0 se transformă în fals, deci adăugând ! îl transformăm adevărat. Orice alte numere vor deveni false.

In cele din urma

Sperăm că acum vă simțiți mai încrezători în crearea și lucrul cu obiecte. Să rezumam:

• Rețineți că obiectele sunt de tip referință, ceea ce înseamnă că este recomandat să lucrați cu ele fără a schimba obiectele originale.
• Fă-ți prieteni cu proprietatea prototipși un lanț prototip.
• Consultați instrumentele Object Assistant. Amintiți-vă că puteți transforma obiectele în șiruri de caractere, puteți obține o matrice cu cheile lor sau pur și simplu puteți itera proprietățile lor folosind setul de metode cu care suntem familiarizați.

Succes în învățarea obiectelor JavaScript.

În acest articol, vreau să vorbesc cât mai complet și consecvent despre ce este un obiect în JavaScript, care sunt capabilitățile acestuia, ce relații pot fi construite între obiecte și ce metode de moștenire „nativă” decurg din aceasta, cum afectează toate acestea. performanta si ce fac toate :)

Articolul NU va spune un cuvânt despre: emularea paradigmei tradiționale clasă-obiect, zahăr sintactic, wrappers și cadre.

Complexitatea materialului va crește de la începutul până la sfârșitul articolului, așa că pentru profesioniști primele părți pot părea plictisitoare și banale, dar în continuare va fi mult mai interesant :)

Obiecte în JavaScript

Multe articole conțin expresia „În JavaScript, totul este un obiect”. Din punct de vedere tehnic, acest lucru nu este în întregime adevărat, dar face impresia corectă începătorilor :)

Într-adevăr, mult într-o limbă este un obiect și chiar și ceea ce nu este un obiect poate avea unele dintre capacitățile sale.

Este important de înțeles că cuvântul „obiect” este folosit aici nu în sensul „un obiect al unei anumite clase”. Un obiect din JavaScript este în primul rând doar o colecție de proprietăți (dacă este mai ușor pentru cineva, îl puteți numi o matrice asociativă sau o listă), constând din perechi cheie-valoare. Mai mult, cheia poate fi doar un șir (chiar și pentru elemente de matrice), dar valoarea poate fi orice tip de date enumerat mai jos.

Deci sunt 6 în JavaScript tipuri de bază datele sunt Nedefinite (nu indică nicio valoare), Null, Boolean (boolean), String (șir), Number (număr) și Object (obiect).
Mai mult, primele 5 sunt primitiv tipuri de date, dar Object nu este. În plus, se poate presupune în mod convențional că tipul Object are „subtipuri”: o matrice (Matrice), o funcție (Funcție), o expresie regulată (RegExp) și altele.
Aceasta este o descriere oarecum simplificată, dar în practică este de obicei suficientă.

În plus, tipurile primitive String, Number și Boolean sunt asociate într-un fel cu „subtipurile” neprimitive ale Object: String, Number și, respectiv, Boolean.
Aceasta înseamnă că șirul „Hello, world”, de exemplu, poate fi creat atât ca valoare primitivă, cât și ca obiect de tip String.
Pe scurt, acest lucru se face astfel încât programatorul să poată folosi metode și proprietăți atunci când lucrează cu valori primitive ca și cum ar fi obiecte. Puteți citi mai multe despre acest lucru în secțiunea corespunzătoare a acestui articol.

Lucrați prin referință

Un link este un mijloc de accesare a unui obiect sub diferite nume. Lucrul cu orice obiect se efectuează exclusiv prin referință.
Să demonstrăm acest lucru cu un exemplu:

test = funcția () (alertă ("Bună ziua!")) // Creați o funcție (alertă ("Bună ziua!")) (Și funcția, după cum ne amintim, este un obiect cu drepturi depline) și faceți din variabila de test o referință la ea
test_link = test; // test_link se referă acum și la funcția noastră
Test (); // Buna ziua!
link_test (); // Buna ziua!

După cum putem vedea, atât prima legătură cât și a doua dau același rezultat.
Este necesar să ne dăm seama că nu avem nicio funcție numită test și că variabila de test nu este un fel de legătură „principală” sau „principală”, iar „test_link” este una minoră.

Funcția noastră, ca orice alt obiect, este doar o zonă din memorie și toate referințele la această zonă sunt absolut echivalente. Mai mult decât atât, este posibil ca obiectul să nu aibă deloc referințe - în acest caz, se numește anonim și poate fi folosit numai imediat după creare (de exemplu, trecut la o funcție), altfel va fi imposibil să-l accesezi și în curând va fi distrus de garbage collector (colectare de gunoi), care este ceea ce șterge obiectele fără referințe.

Să vedem de ce este atât de important să înțelegem asta:

test = (prop: „un text”) // Creați un obiect cu o proprietate prop
test_link = test; // Creați un alt link către acest obiect

Alertă (test.prop); // un text

// Schimbați proprietatea obiectului
test_link.prop = "text nou";

Alertă (test.prop); // text nou
alertă (test_link.prop); // text nou
/ * S-ar putea spune că proprietatea s-a schimbat ici și colo - dar nu este.
Obiectul este unul singur. Deci proprietatea s-a schimbat o dată în ea, iar link-urile continuă să indice unde indică. * /

// Adăugați o nouă proprietate și eliminați-o pe cea veche
test.new_prop = „bună ziua”;
şterge test.prop;

Alertă (test_link.prop); // nedefinit - această proprietate nu mai există
alertă (test_link.new_prop);

// Eliminați linkul
sterge testul;
alertă (test.new_prop);
/ * În acest moment, scriptul va arunca o eroare, deoarece testul nu mai există, iar test.new_prop nu există cu atât mai mult * /
alertă (test_link.new_prop); // Buna ziua
/ * dar aici totul este în ordine, pentru că nu am șters obiectul în sine, ci doar un link către el. Acum obiectul nostru este indicat de un singur link test_link * /

// Creați un obiect nou
test = test_link; // Mai întâi, creați din nou legătura de testare
test_link = (prop: „un text”) // Și aici este noul obiect

Alertă (test_link.prop); // un text
alertă (test.prop); // nedefinit
/ * Crearea unui nou obiect rupe legătura, iar acum test și test_link indică diferite obiecte.
De fapt, aceasta echivalează cu eliminarea test_link și re-crearea lui, dar indicând deja către un alt obiect * /
alertă (test.new_prop); // salut - acum testul conține un link către primul nostru obiect

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

Acest comportament al obiectelor ridică adesea o mulțime de întrebări pentru dezvoltatorii începători, așa că sper că acest text va aduce puțină claritate. Dacă dorim să creăm o copie cu adevărat nouă, independentă a obiectului, și nu o legătură, atunci singura modalitate de a face acest lucru este să creăm un nou obiect și să copiați proprietățile necesare acolo.

De asemenea, merită remarcat faptul că lucrul cu obiecte prin referință, pe lângă efectele amuzante menționate mai sus, oferă și economii semnificative de memorie, ceea ce este important atunci când un obiect este utilizat pe scară largă în diferite locuri din program.

Valori primitive

După cum am menționat mai sus, tipurile de date String și Number pot fi atât obiecte, cât și valori primitive.

obj = new String („bună ziua”); // Creați șir ca obiect
simplu = „bună ziua”; // Creați o valoare primitivă

Alertă (obj); // Buna ziua
alertă (simplu); // salut - până acum totul este previzibil

Alerta (lungimea obiectului); // 6 - un obiect de tip String are o proprietate length care stochează lungimea șirului
alertă (simple.lungime); // 6
/ * Deși simplu nu este un obiect, putem accesa același set de proprietăți ca și un obiect String. Este destul de util */

Obj.prop = „text”;
simple.prop = „text”;

Alertă (obj.prop); // text - deoarece obj este un obiect obișnuit, atunci îi putem oferi cu ușurință încă o proprietate
alertă (simple.prop); // nedefinit - dar simplu nu este un obiect, iar acest număr nu va funcționa pentru noi

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

Același lucru este valabil atât pentru Number, cât și pentru Boolean (ei bine, pe lângă faptul că nu au o proprietate de lungime, dar există o serie de alte proprietăți minunate).
Folosirea șirurilor și numerelor ca obiecte nu are nicio utilitate practică. valorile primitive sunt mai convenabile de lucrat, dar păstrează în același timp toată funcționalitatea necesară. Cu toate acestea, de dragul completității, este necesar să înțelegem acest mecanism.

Nu confundați utilizarea valorilor primitive cu utilizarea literalelor - de exemplu, indiferent dacă creăm o matrice ca „test = new Array ()” sau ca „test =", rezultatul va fi în continuare același obiect . Nu vom obține nicio valoare primitivă.

Crearea și utilizarea obiectelor

Deci, spre deosebire de limbile în care este implementată paradigma clasă-obiect, nu trebuie să creăm mai întâi o clasă, apoi să creăm un obiect al clasei. Putem crea imediat un obiect, ceea ce vom face în următorul exemplu:

test = (
simple_property: „Bună ziua”,
proprietate_obiect: (
user_1: „Petya”,
user_2: „Vasya”
},
function_property: function (utilizator) (
alertă (acest .simple_property + "," + acest .object_property);
}
}

Test.function_property ("utilizator_1"); // Bună, Petya.

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

În fața noastră se află obiectul de testare, care are 3 proprietăți, ale căror nume, sper, vorbesc de la sine. Ceea ce ne interesează cel mai mult este proprietatea function_property, care conține funcția. O astfel de funcție poate fi numită o metodă a unui obiect.

Funcția noastră folosește de două ori cuvântul cheie this, care este un pointer (adică o referință) la obiectul de la care este apelată funcția. Astfel, this.simple_property = test.simple_property = „Bună ziua”, și this.object_property = test.object_property = „Peter”.

Ar trebui să se înțeleagă clar că aceasta se referă întotdeauna la obiectul de la care este numită funcția și nu la obiectul căruia îi aparține. Deși acestea sunt același obiect în acest exemplu, acesta nu este întotdeauna cazul.

test.function_property ("utilizator_1"); // Bună, Petya.

Test2 = obiect nou (); // O altă formă de creare a unui nou obiect, similar cu test2 = ()

Test.function_property.call (test2, „utilizator_1”); //eroare
/ * Metoda de apel vă permite să apelați o funcție în numele altui obiect. În acest caz, numim metoda function_property a obiectului de testare, iar aceasta nu mai indică obiectul de testare, ci obiectul test2. Și de când nu are proprietatea object_property, atunci când încercați să obțineți this.object_property, scriptul va da o eroare * /

// încearcă să remedieze situația
test2.simple_property = „O zi bună”;
test2.object_property = test.object_property; // În acest caz, vom folosi specificarea obiectului prin referință pentru a nu duplica codul

Test.function_property.call (test2, „utilizator_1”); // Bună ziua, Petya.

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

De asemenea, ar trebui să fie clar din exemplu că nu există pași clari pentru crearea și utilizarea unui obiect. Obiectul poate fi modificat în orice mod în orice moment - înainte, după și chiar în timpul utilizării. Aceasta este, de asemenea, o diferență importantă față de OOP „tradițional”.

Constructor

În exemplul de mai sus, am creat 2 obiecte care au unele asemănări. Au fost prezente ambele proprietăți simple_property și object_property. Evident, atunci când scrieți cod real, apare adesea sarcina de a crea obiecte identice sau doar similare. Și, desigur, nu trebuie să creăm manual fiecare astfel de obiect.

Un constructor ne va veni în ajutor. Un constructor în JavaScript nu face parte dintr-o clasă (pentru că nu există clase), ci doar o funcție în sine. Cea mai comună funcție.

make_me = functie (_nume) (
alertă („Am fost lansat”);
acest .nume = _nume;

}

/ * Să vedem ce se întâmplă aici. Interpretul vede noul operator și verifică ce este în dreapta acestuia. pentru că make_me este o funcție și poate fi folosită ca constructor, apoi un nou obiect este creat în memorie și funcția make_me este executată, iar acest lucru indică acest nou obiect. Apoi, acestui obiect i se adaugă proprietatea nume, căruia i se atribuie valoarea din argumentul _name și metoda show_name. De asemenea (nu știu în ce moment exact, dar nu contează) variabila copil începe să indice către noul nostru obiect abia născut * /

Alertă (nume.copil); //Vasya
copil.show_name (); //Vasya

copil2.show_name (); //Petru

Child2.show_name = funcția () (alertă ( „Nu îmi voi spune numele”);} // Nu uitați că ne putem schimba obiectele în orice moment
copil2.show_name (); // Nu-mi voi spune numele

Child.show_name (); // Vasya - copiii nu se influențează în niciun fel între ei

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

De asemenea, puteți compara constructorul cu un tată - el dă naștere unui copil, înzestrându-l cu anumite calități, dar imediat după creare, copilul devine complet independent de părinte și poate deveni foarte diferit de frații săi.

Dacă ne amintim descrierea tipurilor de date de la începutul articolului, atunci devine clar că Object și subtipurile sale (Funcție, Matrice și altele) sunt de fapt constructori care conferă obiectului creat capabilitățile unei funcții, unui tablou etc.

Deci asta e mult mai bine. Acum avem capacitatea de a crea obiecte după un anumit model. Cu toate acestea, nu totul este bine. În primul rând, fiecare obiect pe care îl creăm și toate proprietățile și metodele sale ocupă un loc separat în memorie, deși în multe feluri sunt repetate. În al doilea rând, dacă vrem să păstrăm legătura dintre părinte și copil și să putem schimba toate obiectele copil simultan. Un prototip ne va veni în ajutor.

Prototip

Așa cum fiecare copil are un tată și o mamă (cel puțin din punct de vedere biologic), la fel și orice obiect din JavaScript. Și dacă tatăl, așa cum am decis, lucrează ca designer, atunci mama este doar un prototip. Să vedem cum se întâmplă asta:

make_me = functie (_nume) (
alertă („Am fost lansat”);
acest .nume = _nume;
this .show_name = function () (alerta (acest .name);)
}
/*
Văzând cuvântul cheie al funcției, interpretul verifică codul din dreapta acestuia și de atunci totul este ok - creează un nou obiect în memorie, care este și funcția noastră. Apoi, automat (fără participarea programatorului) este creată o proprietate prototip pentru această funcție, care se referă la un obiect gol. Dacă am face-o manual, ar arăta ca make_me.prototype = new Object ();

Apoi, obiectul dat (indicat de proprietatea prototip) este de asemenea adăugat automat cu o proprietate de constructor care indică înapoi către funcție. Se pare că aceasta este o legătură circulară.

Acum acest obiect, care poate fi descris ca (constructor: ... aici este o referință la funcția ...) - este prototipul funcției.
*/

// Obiectul este într-adevăr un obiect
alertă (typeof make_me.prototype.constructor); // Funcția este funcția noastră
alertă (make_me.prototype.constructor === make_me); // Adevărat

// Adăugați o nouă metodă la prototipul funcției make_me

Copil = nou make_me ("Vasya"); // m-au lansat
/ * Acum, pe lângă tot ceea ce este descris în exemplul anterior, o proprietate ascunsă suplimentară [] este creată în obiectul copil, care indică același obiect ca make_me.prototype. pentru că proprietatea este ascunsă, nu putem nici să-i vedem valoarea, nici să o schimbăm - cu toate acestea, joacă un rol important în lucrările ulterioare * /

Alertă (nume.copil); //Vasya
copil.show_name (); //Vasya

Child.set_name ("Kolya");
/ * În primul rând, interpretul caută metoda set_name pe obiectul copil. Deoarece nu este acolo, continuă să caute copilul. [] Proprietate, o găsește acolo și o conduce. * /
copil.arata_nume (); // Kolya - acum numele lui Vasya este Kolya :)

Make_me.prototype.show_name2 = funcția () (alertă ("Bună ziua," + acest .nume;) //T.k. prototipul este un obiect obișnuit, îl putem schimba și din mers

Copil2 = nou make_me ("Petya");
copil2.show_name2 (); // Bună, Petya
copil.show_name2 (); // Bună Kolya - modificările în prototip afectează nu numai obiectele nou create, ci și pe toate cele vechi

Child2.show_name2 = funcția () (alertă ( „Nu îmi voi spune numele”);} // Putem încă schimba obiectul în sine, în timp ce noua metodă show_name2 din acest obiect (și numai în el) va „suprascrie” vechea metodă din prototip
copil2.show_name2 (); // Nu-mi voi spune numele – pentru că acum avem propria noastră metodă show_name2, apoi este numită și nu are loc nicio căutare în prototip

Child.show_name2 (); // Bună, Kolya - totul este încă aici

Make_me.prototype = (prop: „bună ziua”) // Să încercăm să recreăm prototipul din nou

Alertă (copil.prop); // nedefinit
copil.show_name2 (); //Bună Kolya
/ * Dacă vă amintiți ce este lucrul prin referință, atunci totul este clar. Recrearea prototipului întrerupe conexiunea, iar acum proprietatea [] a obiectelor copil și child2 indică către un obiect (care a fost prototipul funcției make_me), iar proprietatea make_me.prototype către un alt obiect, care este noul prototipul funcției make_me * /

Child3 = nou make_me ("Oleg");
alertă (copil3.prop); // salut - așa cum era de așteptat

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

După cum se poate observa din exemplu, în timp ce tatăl rămâne fidel mamei (adică în timp ce prototipul funcției rămâne același), toți copiii depind de mamă și sunt sensibili la toate schimbările din ea. Totuși, de îndată ce părinții divorțează (designerul schimbă prototipul cu altul), copiii împrăștie imediat cine unde și nu mai există nicio legătură cu ei.

Un pic despre terminologie
Până la ruperea conexiunii primare dintre constructor și prototip, putem observa următoarea imagine:

make_me = functie (_nume) (
alertă („Am fost lansat”);
acest .nume = _nume;
this .show_name = function () (alerta (acest .name);)
}

Make_me.prototype.set_name = funcție (_name) (acest .name = _name;)
copil = nou make_me ("Vasya");

Alertă (tip de make_me.prototype); // obiect - funcția are o proprietate prototip
alertă (tip de copil.prototip); // nedefinit - obiectul creat nu are nicio proprietate prototip
alertă (child.constructor.prototype === make_me.prototype); // adevărat - dar obiectul are o proprietate de constructor, care indică funcția de constructor make_me, care, la rândul său, are o proprietate de prototip

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

După cum am observat după ce am citit numeroase forumuri pe acest subiect, principalele probleme pe care le întâmpină oamenii atunci când confundă proprietatea prototip a unei funcții și proprietatea ascunsă [] a unui obiect creat cu acea funcție.
Ambele proprietăți sunt referințe la același obiect (atâta timp cât legătura primară dintre prototip și constructor nu este întreruptă), dar sunt totuși proprietăți diferite, cu nume diferite, una dintre ele fiind disponibilă programatorului și altul nu este.

Este întotdeauna necesar să înțelegem clar că, dacă vorbim despre prototipul unui constructor, atunci aceasta este întotdeauna proprietatea prototipului, iar dacă despre prototipul obiectului creat, atunci aceasta este o proprietate ascunsă [].

Moştenire

Știm acum că fiecare obiect are o referință de prototip ascunsă și fiecare prototip este un obiect obișnuit.
Cei mai perspicaci cititori au prins deja mirosul recursiunii :)
Într-adevăr, din moment ce un prototip este un obiect obișnuit, apoi el, la rândul său, are o legătură cu prototipul său și așa mai departe. Acesta este modul în care este implementată ierarhia prototipului.

pasăre = funcția () () // Acesta este constructorul birdie
bird.prototype.cry = functie () (alerta ("Cree!");) // Pasărea poate țipa
bird.prototype.fly = funcție () (alertă („zboară!”);) // și zboară

Rață = funcție () ()
rață.prototip = pasăre nouă ();
duck.prototype.cry = funcție () (alertă („Cărlatan!”);) // Rața țipă altfel
duck.prototype.constructor = rață; // Forțați proprietatea prototype.constructor să fie setată la duck, deoarece altfel se va referi la pasăre

Billy = rață nouă (); // Billy este rata noastră
billy.fly (); //Eu zbor! - Billy poate zbura pentru că este o pasăre
billy.cry (); //Cărlatan, şarlatan! - Billy țipă șarlatan pentru că este o rață

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

În acest fel puteți implementa o ierarhie a oricărui nivel de imbricare.

Problema cu asteriscul

Acum, din moment ce știm atât de multe despre toate acestea, să încercăm să ne dăm seama cât de multe se întâmplă în aceste trei rânduri.

make_me = funcția () ()
copil = nou make_me ();
alertă (child.toString ()); // iese

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

Pe prima linie, creăm o nouă funcție și o variabilă make_me care indică această funcție. Acest lucru creează un prototip pentru funcție, make_me.prototype, care conține o proprietate de constructor care indică către make_me.
Dar asta nu este tot :)
pentru că funcția make_me este, de asemenea, un obiect, apoi are, la rândul său, un tată și o mamă, i.e. constructor și prototip. Constructorul său este o funcție nativă a limbajului Function (), iar prototipul său este un obiect care conține metode call, apply etc. - datorită acestui prototip putem folosi aceste metode în orice funcție. Acest lucru dă funcției make_me o proprietate [] care indică Function.prototype.

La rândul său, prototipul constructorului Function este și un obiect, al cărui constructor este (surpriză!) Object (adică Function.prototype. []. Constructor === Object), iar prototipul este un obiect care conține proprietățile standard. și metode ale obiectului, cum ar fi toString, hasOwnProperty și altele (cu alte cuvinte - Function.prototype. [] ["hasOwnProperty"] - aceasta este exact aceeași metodă pe care o putem folosi în toate obiectele derivate - și aceasta este exact metoda proprie a acestui obiect și nu moștenită). Așa aflăm într-un mod interesant că tot felul de obiecte sunt derivate din Object.

Putem continua mai departe? Se dovedește că nu. Object.prototype conține proprietățile de bază ale unui obiect tocmai pentru că nu are propriul prototip. Object.prototype [] = Null; În acest moment, călătoria prin lanțul de prototipuri pentru a găsi o proprietate sau o metodă se oprește.

Un alt fapt interesant este că constructorul Object este Function. Acestea. Obiect. []. Constructor === Funcție.
Există o altă referință circulară - constructorul pentru Object este Function, iar constructorul pentru Function.prototype este Object.

Să revenim la exemplul nostru. Am înțeles deja cum este creată funcția, acum să trecem la a doua linie. Acolo creăm un obiect copil al cărui constructor este funcția make_me, iar prototipul este make_me.prototype.

Ei bine, în a treia linie vedem cum interpretul urcă în lanț, de la copil la copil. [] (Aka make_me.prototype), apoi la copil. [] [] (Aka Object.prototype), și deja găsește acolo metoda toString, care se lansează pentru execuție.

Impurităţi

S-ar putea părea că moștenirea prin prototipuri este singura modalitate prin care JavaScript este posibil. Nu este adevarat.
Avem de-a face cu un limbaj foarte flexibil care oferă nu atât reguli, cât posibilități.

De exemplu, dacă vrem, nu putem folosi prototipuri deloc, ci programăm folosind conceptul de mixin. Pentru aceasta, vechii noștri prieteni buni - constructori vor veni de folos.

// Acesta este un constructor uman
om = functie () (
this .live = function () (alerta ("Eu traiesc");) // O persoană știe să trăiască
this .walk = function () (alerta ("Eu merg");) // O persoană poate merge
}

// Acesta este constructorul poetului
poet = functie () (
acest .kill = funcție () (alertă ( „Poetul a ucis un om”);} // Un poet poate ucide o persoană
this .live = function () (alerta ("Sunt mort");) // Aceasta va face ca persoana să moară
}

Vladimir = om nou (); // Vladimir este bărbat
vladimir.live (); // Eu trăiesc - el este viu
vladimir.plimbare (); // Eu merg - el merge

Poet.call (vladimir); // Execută poetul constructor pentru obiectul vladimir
vladimir.kill (); // Poetul a ucis omul
vladimir.live (); //Sunt mort

// Și acum focalizarea
om.chemare (vladimir);
vladimir.live (); //Eu traiesc

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

Ce vedem în acest exemplu? În primul rând, este capacitatea de a moșteni de la mai multe obiecte care nu se află în aceeași ierarhie. În exemplu, sunt 2, dar pot fi câte doriți.
În al doilea rând, aceasta este absența oricărei ierarhii. Suprascrierea proprietăților și metodelor este determinată numai de ordinea în care sunt apelați constructorii.
În al treilea rând, aceasta este capacitatea de a schimba un obiect și mai dinamic și este un obiect separat și nu toți descendenții, ca atunci când se schimbă prototipul.

Actualizare: Închideri și proprietăți private

Pentru a nu umfla acest articol deja destul de mare, dau un link către postarea Închideri în JavaScript, unde este scris în detaliu despre el.

Ce să faci cu toate astea acum

După cum am spus mai sus, modificarea arbitrară a obiectelor individuale și utilizarea constructorilor și a mixin-urilor și flexibilitatea prototipurilor sunt doar instrumente, oportunități care permit unui programator să creeze cod care este atât teribil, cât și frumos din toate punctele de vedere. Este important doar să înțelegem ce sarcini rezolvăm, prin ce mijloace, ce obiective atingem și ce preț plătim pentru asta.

Mai mult decât atât, întrebarea prețului este destul de nebanală, mai ales dacă vorbim de dezvoltare pentru versiunile Internet Explorer 6 și 7.
1. Memorie - totul este simplu aici. În toate browserele, moștenirea pe prototipuri necesită de câteva ori mai puțină memorie decât atunci când se creează metode prin constructori. Mai mult, cu cât avem mai multe metode și proprietăți, cu atât diferența este mai mare. Cu toate acestea, merită să ne amintim că, dacă nu avem o mie de obiecte identice, ci doar unul, atunci consumul de memorie va fi în orice caz mic, deoarece mai sunt si alti factori de luat in considerare aici.
2. Timpul procesorului - aici principalele subtilități sunt legate de browserele de la Microsoft.
Pe de o parte, obiectele în care metodele și proprietățile sunt create printr-un constructor pot fi create de multe ori (în unele cazuri de zeci sau sute de ori) mai încet decât printr-un prototip. Cu cât mai multe metode, cu atât mai lent. Deci, dacă IE-ul tău se blochează pentru câteva secunde în timpul inițializării script-ului - există un motiv pentru a săpa în această direcție.

Pe de altă parte, metodele proprii ale unui obiect (create prin intermediul unui constructor) se pot executa puțin mai rapid decât cele prototipate. Dacă aveți nevoie disperată de a accelera execuția unei metode în acest browser, atunci trebuie să țineți cont de acest lucru. Rețineți că apelul metodei (adică căutarea acestuia în obiect) este accelerat, și nu execuția sa. Deci, dacă metoda în sine rulează pentru o secundă, atunci nu veți observa o creștere specială a performanței.

În alte browsere, se observă probleme similare, unde timpul pentru crearea obiectelor și apelarea metodelor acestora este aproximativ același pentru ambele abordări.

P.S. De obicei, în articole de acest gen, autorul oferă un fel de înveliș, fie încercând să implementeze moștenirea obiectului de clasă bazată pe prototip, fie doar zahărul sintactic pentru moștenirea prototipală. Nu fac asta intenționat, pentru că Cred că o persoană care înțelege semnificația acestui articol este capabilă să scrie orice pachet pentru sine și multe alte lucruri interesante :)

Etichete: Adăugați etichete

JavaScript este un limbaj orientat obiect... Cu excepția constructelor de limbaj de bază, cum ar fi bucle și operațiuni relaționale, aproape toate caracteristicile JavaScript sunt implementate într-un fel sau altul folosind obiecte.

Obiectele sunt uneori utilizate în mod explicit pentru a efectua sarcini specifice, cum ar fi procesarea (X) documentelor HTML și XML pe baza modelului de obiecte de document. În alte cazuri, rolul obiectelor este mai puțin evident, cum ar fi rolul obiectului String atunci când se lucrează cu date șiruri primitive.

Capitolele anterioare au oferit deja exemple care demonstrează în mod clar utilitatea obiectelor încorporate, dar în acest capitol vom începe să explorăm direct obiectele JavaScript.

Obiecte în JavaScript

Obiectele din JavaScript pot fi împărțite în patru grupuri.

1. Obiecte personalizate create de un programator și având o structură și o entitate care corespund unei sarcini de programare specifice. Vom discuta despre posibilitățile de a crea și utiliza astfel de obiecte în acest capitol.
2. Obiectele încorporate sunt oferite de JavaScript însuși. Acestea includ obiecte asociate cu tipuri de date (String, Number și Boolean), obiecte care vă permit să creați obiecte personalizate și tipuri compuse (Object și Array) și obiecte care simplifică sarcinile comune (cum ar fi Data, Math și RegExp). Capacitățile obiectelor încorporate sunt reglementate de standardul de limbaj ECMA-262 și, într-o măsură mai mică, de specificațiile producătorilor de browser.
3. Obiecte browser care nu fac parte din limbajul JavaScript, dar sunt acceptate de majoritatea browserelor. Exemple de obiecte browser sunt Window, care controlează ferestrele browserului și interacționează cu utilizatorul și Navigator, care oferă informații de configurare a clientului. Deoarece cele mai multe aspecte ale obiectelor browser nu sunt standardizate, proprietățile și comportamentul acestora pot varia semnificativ între browser și versiune. Obiectele de acest tip vor fi discutate mai târziu.
4. Obiectele document fac parte din Document Object Model (DOM), așa cum este definit de W3C. Astfel de obiecte oferă programatorului o interfață structurată pentru (X) documente HTML și XML. Aceste obiecte oferă JavaScript abilitatea de a manipula foi de stil imbricate (CSS - Cascade Style Sheet) și de a simplifica implementarea HTML dinamic (DHTML). Obiectele document sunt accesate de browser prin proprietatea document a obiectului Window (fereastră. Document). Vom vorbi mai multe despre DOM mai târziu.

Principii de lucru cu obiecte

Un obiect Este o colecție neordonată de date care include tipuri de date primitive, funcții și chiar alte obiecte. Avantajul obiectelor este că ele concentrează într-un singur loc toate datele și logica necesare pentru a îndeplini o anumită sarcină. Obiectul String stochează date text și oferă multe dintre funcțiile de care aveți nevoie pentru a-l manipula. În timp ce obiectele nu sunt necesare într-un limbaj de programare (nu există obiecte în C, de exemplu), ele cu siguranță fac limbajul mai ușor de utilizat.

Crearea obiectelor

Un obiect este creat folosind un constructor, un tip special de funcție care pregătește un nou obiect pentru utilizare prin inițializarea memoriei ocupate de Obiect. Am văzut în capitolul 4 că obiectele pot fi create prin aplicarea noii operații la constructorii lor. Această operație determină constructorul să creeze un nou obiect, a cărui natură este determinată de constructorul care este apelat. De exemplu, constructorul String () creează obiecte String, iar constructorul Array () creează obiecte Array. Acesta este modul în care definiți numele tipurilor de obiect în JavaScript: după numele constructorului care creează obiectul.
Iată un exemplu simplu de creare a unui obiect:

var city = new String ();

Această instrucțiune creează un nou obiect String și plasează o referință la acesta în variabila oraș. Nu există argumente pentru constructor aici, așa că variabila oraș va avea o valoare implicită - în acest caz, șirul gol. Puteți face acest exemplu mai interesant prin transmiterea unui argument de valoare inițială către constructor:

var city = new String ("San Diego");