JavaScript objekti u primjerima

Objekti su kamen temeljac javascripta. Mnogi ugrađeni tipovi podataka predstavljeni su kao objekti. Da biste bili uspješan JavaScript programer, morate imati jasnu ideju o tome kako funkcioniraju. Građevni blokovi objekta se nazivaju njegova polja ili svojstva JavaScript objekta. Koriste se za opisivanje bilo kojeg aspekta nekog objekta. Objekt može opisati duljinu popisa, boju neba ili datum rođenja osobe. Stvaranje objekata je jednostavan proces. Jezik nudi sintaksu poznatu kao objektni literali, koji su označeni vitičastim zagradama.

Pristup svojstvima

Jezik pruža dva unosa za pristup svojstvima. Prvi i najčešći je poznat kao točkasti zapis. U točkastoj notaciji, pristup resursu može se dobiti navođenjem naziva glavnog računala, nakon čega slijedi razdoblje i naziv svojstva. Na primjer, kada je object.foo inicijalno dodijeljena vrijednost jedne, tada će njegova vrijednost postati 2 nakon izvršenja JavaScript operatora objekata.

Alternativna sintaksa za pristup poznata je kao zagrada. U oznaci, naziv objekta slijedi skup uglastih zagrada. U njima je ime svojstva navedeno kao niz:

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

On je izraženiji od oznake točaka jer dopušta varijabli da označi cijelo ili dio naziva svojstva. To je moguće jer interpreter JavaScript objekata automatski pretvara taj izraz u niz i zatim dobiva odgovarajuće svojstvo. Imena svojstava stvaraju se u letu tako da se sadržaj varijable f poveže s nizom "oo":

var f = "f";

objekt [f + "oo"] = "traka".

Označavanje zagrada omogućuje imenima da sadrže znakove koji nisu dopušteni u točkastoj notaciji. Na primjer, sljedeća je izjava u zagradama potpuno legalna. Međutim, ako korisnik pokuša stvoriti isto ime svojstva u točkastoj oznaci, naići će na sintaktičku pogrešku:

object ["! @ # $% & * ()."] = true.

Pristup svojstvima ugniježđenih JavaScript objekata može se dobiti povezivanjem točaka i / ili zagrada. Na primjer, sljedeći objekt sadrži ugrađeni objekt pod imenom baz koji sadrži drugi objekt pod nazivom foo, koji ima svojstvo bar, koje sadrži vrijednost pet:

var objekt = {baz: {foo: {bar: 5}}}.

Sljedeći izrazi pristupaju svojstvu priključene trake. Prvi izraz koristi notaciju točaka, dok drugi izraz koristi kvadratni zapis. Treći izraz kombinira oba unosa kako bi se postigao isti rezultat:

• object.baz.foo.bar;
• objekt ["baz"] ["foo"] ["bar"];
• objekt ["baz"]. foo ["bar"].

Izrazi poput onih prikazanih u prethodnom primjeru mogu dovesti do loše izvedbe kada se nepravilno koriste i onemogućuju JavaScript objekt. Za procjenu svake točke ili izražavanja zagrada treba vremena. Ako se isto svojstvo koristi nekoliko puta, onda ima smisla jednom pristupiti svojstvu, a zatim pohraniti vrijednost u lokalnu varijablu za sve buduće svrhe.

Funkcija kao metoda

Kada se funkcija koristi kao svojstvo nekog objekta, to se naziva metodom. Kao i svojstva, oni su specificirani u zapisu knjiženja objekta. Na primjer:

var objekt = {sum: funkcija (foo, bar) {povratak foo + bar; }}.

JavaScript objektne metode mogu se pozivati ​​pomoću oznaka i zagrada. Sljedeći primjer poziva metodu sum () iz prethodnog primjera, koristeći oba unosa:

• objekt.sum (1, 2);
• objekt ["sum"] (1, 2).

Imenovanje objektnog literala korisno je za stvaranje novih objekata, ali ne može dodavati svojstva ili metode postojećim objektima. Srećom, dodavanje novih podataka je jednostavno kao i kreiranje izjave o zadatku. Stvoren je prazan objekt. Zatim, pomoću operatora dodjele, dodaju se dva svojstva, foo i bar, također metoda baz:

• var objekt = {};
• object.foo = 1;
• object.bar = null;
• object.baz = function () {povratak "hello from baz ()"; }.

Enkapsulacija programa

Glavna ideja objektno orijentiranog programiranja je podjela programa na manje dijelove i svako od njih je odgovorno za upravljanje vlastitom državom. Stoga, određeno znanje o tome kako dio programa funkcionira može biti lokalno u tom dijelu. Netko tko radi na ostatku programa ne bi se trebao sjećati ili čak znati za njega. Kad god se ovi lokalni podaci promijene, potrebno je ažurirati samo kôd koji se odmah nalazi oko njega.

Različiti dijelovi takvog programa međusobno djeluju preko sučelja, ograničenih skupova funkcija ili veza, koji pružaju korisnu funkcionalnost na apstraktnijoj razini, skrivajući njihovu točnu implementaciju. Takvi dijelovi programa modelirani su pomoću objekata. Njihovo sučelje sastoji se od određenog skupa metoda i svojstava. Svojstva koja su dio sučelja nazivaju se javnim. Ostatak, koji ne smije dirati vanjski kod, naziva se privatnim.

Mnogi jezici omogućuju razlikovanje javnih i privatnih svojstava i ne dopuštaju vanjskom kodu pristup privatnim svojstvima. JavaScript, koji opet ima minimalistički pristup, još nije postignut. Trenutno se radi na dodavanju ovog jezika. Stoga će JavaScript programeri uspješno koristiti ovu ideju. Dostupno sučelje u pravilu je opisano u dokumentaciji ili komentarima. Također je uobičajeno da podvlačenje (_) na početku imena svojstava ukazuje da su ta svojstva privatna. Odvajanje sučelja od implementacije je odlična ideja. Obično se naziva enkapsulacija.

nekretnine

Objekt s zagradama {...} naziva se objektnom literalom. Neke osobine možete odmah staviti u takve zagrade {...}. Na primjer, parovi "ključ: vrijednost i tako dalje":

neka user = {// ime objekta: "John", // ključem "name" pohranite vrijednost "John" dob: 30 // po ključu "age" pohranite vrijednost 30}.

Svojstvo ima ključ (također poznat kao "ime" ili "identifikator") prije dvotočke ":" i vrijednost s desne strane. Postoje dva svojstva u korisničkom objektu. Rezultirajući JavaScript objekt s dvije potpisane datoteke s riječima "name" i "age". Datoteke možete dodavati, brisati i čitati u bilo kojem trenutku. Vrijednosti svojstava dostupne su pomoću notacije točaka. Može biti bilo koje vrste. Možete dodati boolean vrijednost. Da biste izbrisali svojstvo, upotrijebite delete u slučaju objekta JavaScript JavaScript.

Svi predmeti JavaScript pogreške su potomci objekta Error ili naslijeđenog objekta:

1. Objekt sintaktičke pogreške nasljeđuje se od objekta Error.
2. JSON Analiza pogreške određene vrste sintakse objekta Greška.

Da biste još dublje shvatili kako se aplikacije bave JavaScript pogreškama, bolje je da se upoznate s Airbrake JavaScriptom - alatom za praćenje bugova za upozorenja u stvarnom vremenu i trenutno razumijevanje onoga što je pošlo po zlu s JavaScript kodom.

Poruke o pogreškama koje korisnik može primiti prije uklanjanja JavaScript objekta:

1. Loš kontrolni znak u literalnom nizu.
2. Loš znak u literalnom nizu.
3. Loš Unicode izlaz.
4. Loš znak za bijeg.
5. Neprekinuti niz.
6. Neočekivani nenumerički kod.
7. Nedostaju znamenke nakon decimalne točke.
8. Neprekinuti frakcijski broj.
9. Nema brojeva nakon pokazatelja stupnja.
10. Nedostaju znamenke nakon znaka eksponenta.
11. Eksponencijalni dio nema broj.
12. Neočekivani kraj podataka.
13. Neočekivana ključna riječ.
14. Neočekivani znak.
15. Kraj podataka prilikom čitanja sadržaja objekta.
16. Očekivano ime svojstva ili '}'.

Računalna svojstva

Možete koristiti uglatu zagradu u objektnoj literalnoj datoteci. To se zove računska svojstva. U nastavku je dan primjer.

Vrijednost izračunatog svojstva je jednostavna: [voće] znači da se ime imovine mora uzeti iz voća. Dakle, ako posjetitelj uđe u "jabuku", vrećica će postati {jabuka: 5}. Složeniji izrazi možete koristiti u uglatim zagradama:

neka voće = 'jabuka';

neka vreća = {

[voće + 'računala']: 5 // bag.appleComputers = 5

};

Zagrade su mnogo snažnije od točkastih simbola. Dopuštaju imena i varijable svojstava. Ali oni su i više nezgodni za pisanje. Stoga, većinu vremena kada su imena nekretnina poznata i jednostavna, koristi se točka. A ako vam treba nešto kompliciranije, onda se prebacite na uglate zagrade.

Riječ rezervacije

Varijabla ne može imati ime jednako jednoj od rezerviranih riječi, kao što su "za", "dopustiti", "vratiti", itd. Ali ne postoji takvo ograničenje kod sortiranja JavaScript objekata.

U načelu je dopušteno bilo koje ime, ali postoji i jedno posebno: "__proto__" dobiva posebnu žalbu zbog povijesnih razloga. Na primjer, ne možete ga postaviti za vrijednost koja nije objekt:

neka obj = {};

obj .__ proto__ = 5;

upozorenje (obj .__ proto__); // [objekt Object], nije radio kako je planirano

Kao što se može vidjeti iz koda, dodjeljivanje primitivnog 5 se zanemaruje. To može biti izvor pogrešaka, pa čak i ranjivosti ako operator namjerava pohraniti proizvoljne parove ključ / vrijednost u objekt i dopustiti posjetitelju da odredi ključeve. U tom slučaju, posjetitelj može odabrati "proto" kao ključ i dodati JavaScript u objekt. Postoji način da objekte koje obrađuje __proto__ napravite kao uobičajenu osobinu. Tu je i druga mapa strukture podataka koja podržava proizvoljne tipke.

Svojstva cijelog broja

Pojam "cjelobrojno svojstvo" ovdje označava niz koji se može pretvoriti iz cjeline bez modifikacije. Tako je, na primjer, "49" cijelo ime svojstva, jer kada je pretvoreno u cijeli broj i natrag, ono je i dalje isto. Ali "+49" i "1.2" nisu. S druge strane, ako ključevi nisu cijeli, oni su navedeni u redoslijedu stvaranja. Primjer ispod.

Da biste ispravili problem uz pomoć telefonskih kodova, možete "varati" tako što ćete kodove učiniti ne-brojevima. Dodavanje "+" (znak plus) prije nego što je svaki kôd dovoljan. Sada će raditi kako je zamišljeno.

Razlika između objekata i primitiva je u tome što se pohranjuju i kopiraju "prema referenci". Primitivne vrijednosti se dodjeljuju i kopiraju "kao cjelobrojne vrijednosti". Varijabla pohranjuje “adresu u memoriji”, a ne sam objekt ili “vezu” s njom. Možete koristiti bilo koju varijablu za pristup i promjenu njezinog sadržaja.

Gornji primjer pokazuje da postoji samo jedan objekt i administrator koji ga može unijeti. Zatim, ako se drugi ključ (korisnik) koristi kasnije, korisnik će otkriti promjene.

Operatori jednakosti == i stroga jednakost === rade za objekte na isti način. Dva objekta su jednaka samo ako su isti objekt. Za usporedbe poput obj1> obj2 ili za usporedbu s primitivnim obj == 5, objekti se pretvaraju u primitive. Iskreno, takve usporedbe su vrlo rijetko potrebne i obično su rezultat pogreške kodiranja.

Provjera JavaScript objekata

Objekti imaju pristup bilo kojoj imovini. Međutim, ako uopće ne postoji, to neće biti pogreška. Samo pristup nepostojećem svojstvu vraća se nedefinirano. On pruža vrlo uobičajen način testiranja svojstva i usporedbe s nedefiniranim. U nastavku je primjer.

Upotrijebite "in" za svojstva koja se pohranjuju kao nedefinirana. Obično stroga "=== undefined" usporedba provjerava radi dobro. Postoji poseban slučaj kada ne uspije i "in" radi ispravno. To je kada svojstvo objekta postoji, ali se sprema nedefinirano.

U gornjem kodu, objekt obj.test tehnički postoji. Stoga operator in radi ispravno. Takve se situacije događaju vrlo rijetko, jer obično nisu dodijeljene nedefinirane. Uglavnom se koriste null "unknown" ili "empty" vrijednosti. Dakle, u izjavi je zapravo gost u kodu.

"Za .. u" ciklusu

Da biste se kretali kroz sve tipke od objekta do objekta, postoji poseban oblik petlje: za .. u. To je potpuno drugačija stvar od konstrukcije za (;;).

U nastavku je primjer.

Valja napomenuti da sve za konstruktore dopuštaju deklariranje varijabli petlje unutar petlje kao tipka Let. Umjesto toga možete koristiti drugo ime varijable ključa.

Na primjer, za (neka prop u obj) je također široko korišten.

Postoji alternativna "kvadratna zagrada" koja radi s bilo kojim nizom.

U ovom slučaju, točka zahtijeva da ključevi JavaScript objekta budu valjani identifikatori varijable, to jest, da nema razmaka i drugih ograničenja. Mora se paziti da je nit unutar zagrada ispravno navedena. Zagrade također pružaju način dobivanja naziva svojstva kao rezultat bilo kojeg izraza, za razliku od literalnog niza, iz varijable:

neka ključ = "voli ptice";

// isto kao korisnik ["likes birds"] = true;

user [tipka] = true.

Ovdje se ključna varijabla može izračunati u vrijeme izvođenja i ovisi o korisničkom unosu, a zatim će se koristiti za pristup imovini. To daje programerima veću fleksibilnost. Točkasta se notacija ne može koristiti na sličan način, budući da će postojati iteracija JavaScript objekta. U nastavku je primjer.

Const objekt

Deklarirani const objekt može se mijenjati. U nastavku je dan primjer.

Može se činiti da će JavaScript objekt u nizu (*) uzrokovati pogrešku, ali nije. To je zato što const bilježi vrijednost samog korisnika. Ovdje korisnik stalno drži vezu s istim objektom. Linija (*) ulazi u objekt, nije dodijeljena korisniku. Const će dati pogrešku ako pokušate instalirati korisnika i nešto drugo. Kloniranje i spajanje, Object.assign stvara drugu vezu na isti objekt ako ga želite duplicirati. To je također izvodljivo, ali malo kompliciranije, jer JavaScript nema ugrađenu metodu. Zapravo, to je rijetko potrebno. U većini slučajeva koristi se kopiranje pomoću reference. Ali ako vam je stvarno potrebna, onda morate stvoriti JavaScript objekt i replicirati strukturu postojećeg tako što ćete kopirati njegova svojstva na primitivnoj razini. U nastavku je primjer.

Za to također možete koristiti metodu Object.assign. Argumenti dest i src1, ..., srcN su objekti. Kopira svojstva svih src1, ..., srcNINTO dest. Drugim riječima, svojstva svih argumenata, počevši od drugog, kopiraju se u 1. Zatim se vraća u dest. Na primjer, možete ga koristiti za kombiniranje nekoliko objekata u jedan.

Također možete koristiti Object.assign za zamjenu jednostavne klonske petlje. Kopira sva korisnička svojstva na prazan objekt i vraća je, baš kao i petlja, ali ukratko. Do sada se pretpostavljalo da su sva korisnička svojstva primitivna. Ali svojstva mogu biti reference na druge objekte.

Da biste to popravili, morate koristiti klonski ciklus, koji provjerava svaku vrijednost korisnika [key] i, ako je objekt, onda replicira njegovu strukturu. To se naziva "duboko kloniranje".

Postoji standardni algoritam dubokog kloniranja koji se bavi gore navedenim slučajem i složenijim slučajevima, koji se nazivaju algoritam strukturiranog kloniranja. Kako ne bi ponovno izmislili točak, možete koristiti radnu implementaciju iz lodash JavaScript biblioteke, metodu koja se zove _.cloneDeep (obj).

Napredne metode

Ako programer prelazi preko objekta i nastoji dobiti sva svojstva u istom redoslijedu u kojem su dodani, on se može osloniti na “naručivanje na poseban način” kada su cjelobrojna svojstva sortirana, a druga se formiraju redoslijedom stvaranja JavaScript objekta.

Napredne objektne metode bave se konceptima koji se rijetko koriste u JavaScriptingu. To je zbog činjenice da u normalnim scenarijima ove moćne funkcije nisu potrebne. Neke od tih metoda možda neće raditi u starijim preglednicima, kao što su rana izdanja Netscapea 4.

Korištenje prototipa moglo bi se primijeniti za izradu JavaScript objekata i svih mycircle metoda, a ne samo novih. To daje mješovito opterećenje. Ne moraju pohranjivati ​​zasebne kopije metoda za svaku instancu objekta, tako da može zauzeti manje memorije za rad, ali preglednik mora tražiti trenutna i nadređena područja kako bi ih pronašao. To može uzrokovati maksimalno kašnjenje. Tipično, korisnik treba koristiti ono što je prikladno za kod, a tu odluku ne zasniva na izvedbi, osim ako se ne bavi vrlo specifičnim kontroliranim okruženjem.

Vrati istinu

U nekim slučajevima može biti potrebno da se svojstvo objekta veže za sam objekt ili negdje u lancu prototipa. U JavaScriptu, svi objekti koriste hasOwnProperty metodu, koja vraća true ako je ovo svojstvo vezano za instancu jednog objekta. U ovom slučaju, moguće je provjeriti ima li konstruktor objekta isto svojstvo s istom vrijednošću kao i sama instanca objekta. To može dati pogrešan rezultat ako postoje zasebna svojstva JavaScript objekta s istom vrijednošću i za objektnu instancu i za prototipski lanac. Metoda hasOwnProperty uzima jedan parametar - ime svojstva kao niz.

Slično tome, možete stvoriti privatne metode. To je jednostavno funkcija koja se stvara unutar konstruktorske funkcije. Nekima to može izgledati zbunjujuće, ali to je način na koji to funkcionira. Privatnu funkciju može pozvati samo konstruktor ili metode koje su definirane u nizu. Mogu se koristiti kao javne metode ako su dodijeljene javnom konstruktoru i dostupne su pomoću javnih metoda Javascript objekata.

funkcija myob () {funkcija cantBeSeen () {alert (secretValue);

} var secretValue = '';

this.method1 = function () {secretValue = 'nema iznenađenja';

cantBeSeen ();

};

this.method2 = cantBeSeen;

} var oneOb = novi myob ();

oneOb.method1 ();

// upozorava 'bez iznenađenja' oneOb.method2 ();

// upozorava "bez iznenađenja".

Uzorak naredbe

Objekti naredbi omogućuju labavo spojene sustave razdvajanjem onih koji prave zahtjeve od objekata i, zapravo, obrade zahtjeva. Ti se zahtjevi nazivaju događaji, a kôd koji obrađuje zahtjeve naziva se događajima.

Pretpostavimo da su aplikacije stvorene tako da podržavaju radnje međuspremnika Izreži, Kopiraj i Zalijepi. Ove akcije mogu se pokrenuti na različite načine u cijeloj aplikaciji: sustavu izbornika, kontekstnom izborniku, primjerice desnim klikom na tekstualno polje ili pomoću prečaca. Objekti naredbi omogućuju centraliziranje obrade tih radnji, jednu za svaku operaciju kada vam je potrebna samo jedna naredba za obradu svih zahtjeva za izrezivanjem, jedan za sve zahtjeve kopiranja i jedan za sve zahtjeve za lijepljenje.

Budući da naredbe centraliziraju svu obradu, one također često sudjeluju u obradi funkcija poništavanja za cijelu aplikaciju. Značajna poboljšanja mogu se postići korištenjem modernih JavaScript metoda, što dovodi do stvaranja učinkovitijih, pouzdanijih i podržanih aplikacija.

Da biste saznali kako to učiniti, možete koristiti JavaScript + jQuery predloške. Ovaj jedinstveni paket uključuje optimizirani JavaScript za sve GoF predloške koji koriste naprednije značajke kao što su prostori imena, prototipovi, moduli, funkcionalni objekti, zatvaranja, anonimne funkcije i još mnogo toga. Ako korisnici trebaju najnovije alate i metode za JavaScript predloške, jQuery predloške i arhitekture predložaka, onda je ovo najbolji način korištenja. Ovaj paket sadrži vrijedne, ažurne informacije za JavaScript programere. Evo što je uključeno:

1. GoF predlošci optimizirani za JavaScript.
2. Moderni JavaScript dizajn uzorci.
3. Obrasci dizajna za prikaz modela.
4. JQuery predlošci za dizajn.
5. Arhitektonski predlošci JavaScript idiomi.
6. Primjeri primjene (MVC, SPA, itd.)

Predložene sintaktičke osnove JavaScript objekata vrlo su važne za početnike programera. Prvo morate razumjeti objekte, tada će postojati znanje o objektno orijentiranom programiranju. Iznimno je važno imati duboko razumijevanje ovog materijala, jer to služi kao osnova za ostatak JavaScript jezika.