Primjeri JavaScript objekata

Objekti su kamen temeljac javascripta. Ugrađeni tipovi podataka predstavljeni su kao objekti. Da biste bili uspješni programer JavaScripta, morate imati jasnu ideju o tome kako rade. Građevni blokovi objekta nazivaju se svojstvima polja objekta javascript. 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 objektna književnost, koja je prikazana uvijenim zagradama.

Pristup svojstvima

Jezik pruža dva unosa za pristup svojstvima. Prvi i najčešće poznat kao točka označavanja. S oznakom točke pristup resursu može se dobiti navođenjem naziva hosta objekta, nakon čega slijedi razdoblje i naziv svojstva. Na primjer, kada je object.foo inicijalno dodijeljena vrijednost jedne, tada će njegova vrijednost biti 2 nakon izvršenja operatora javascript objekta.


Alternativna sintaksa za pristup je poznata kao unos u zagradama. U notaciji za naziv objekta slijedi skup uglatih zagrada. U njima je ime svojstva specificirano kao string: object ["foo"] = object ["foo"] + 1. On je izraženiji od point-notacije jer dopušta varijabli da specificira sve ili dio imena svojstva. To je moguće jer interpretator JavaScript objekta automatski pretvara izraz u niz i zatim prima odgovarajuće svojstvo. Svojstva imena su stvorena "u letu" spajanjem sadržaja varijable f s nizom "oo": var f = "f"; objekt [f + "oo"] = "traka". Omogućava označavanje zagradaImena svojstava sadrže znakove koji su zabranjeni oznakom točke. Na primjer, sljedeći je operator u zagradama potpuno legalan. Međutim, ako korisnik pokuša stvoriti isto ime svojstva oznake točke, naići će na sintaktičku pogrešku:

objekt ["! @ # $% & Amp; * ()."] = Istina. 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 još jedan objekt pod nazivom foo, koji ima svojstvo s nazivnom trakom od pet: {foo: {bar: 5}}}. Sljedeći izrazi imaju pristup ugniježđenom svojstvu bara. Prvi izraz koristi oznaku točke, dok drugi izraz koristi kvadratnu notaciju. 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 slični onima prikazanim u prethodnom primjeru mogu dovesti do pogoršanja performansi u slučaju zlouporabe i uzrokovati neuspjeh JavaScript objekta. Vrednovanje svake točke ili izražavanja zagrada zahtijeva vrijeme. Ako se isto svojstvo koristi nekoliko puta, onda ima smisla jednom pristupiti svojstvu, a zatim spremiti vrijednost lokalne varijable za sve buduće ciljeve.

    Funkcija kao metoda

    Kada se funkcija koristi kao svojstvo objekta, ona se naziva metoda. Slično svojstvima, oni su naznačeni u notaciji književnih objekata. Na primjer: var objekt = {sum: funkcija (foo bar) {povratak foo + bar;}}. Metode javascript-objekta mogu se pozvati izpomoću oznaka i zagrada. Sljedeći primjer poziva metodu sum () iz prethodnog primjera, koristeći oba unosa:
  • object.sum (1 2);
  • objekt ["sum"] (1 2). Stvarna oznaka objekta korisna je za stvaranje novih objekata, ali ne može dodati postojeća svojstva ili metode. Srećom, dodavanje novih podataka je jednostavno kao kreiranje operatora dodjele. Stvoren je prazan objekt. Zatim, koristeći operatore dodjele, dodaju se dva svojstva, foo i bar, kao i metoda baz:
  • var objekt = {};
  • object.foo = 1;
  • object.bar = nula;
  • object.baz = function () {return "hello from baz ()";}.
    Inkapsulacija programa
    Osnovna ideja objektno orijentiranog programiranja je podjela programa na manje dijelove i svaki od njih je odgovoran za upravljanje vlastitom državom. Stoga, određeno znanje o tome kako dio programa djeluje može biti lokalno u ovom 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, morate samo ažurirati kôd izravno oko njega. Različiti dijelovi takvih programa međusobno djeluju međusobno preko sučelja, ograničenih skupova funkcija ili vezova koji pružaju korisnu funkcionalnost na više apstraktnoj 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. Drugi koji to ne činetrebala bi se odnositi na vanjski kod, nazvan privatni.
    Mnogi jezici pružaju mogućnost razlikovanja javnih i privatnih svojstava i ne dopuštaju vanjskom kodu pristup privatnim svojstvima. javascript, opet je uzeo minimalistički pristup, još nije postignut. Trenutno je u tijeku rad na dodavanju ovog jezika. Stoga će javascript-programeri uspješno iskoristiti ovu ideju. Dostupno sučelje u pravilu je opisano u dokumentaciji ili komentarima. Također je uobičajeno postaviti simbol podvlačenja (_) na početku naziva svojstava kako bi ukazao na to da su ta svojstva privatna. Odvajanje sučelja od implementacije je odlična ideja. Obično se naziva enkapsulacija.

    http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_1.jpeg
    s zagradama {} se naziva literalom objekta. Neke osobine možete odmah staviti u takve zagrade {}. Na primjer, pari "ključ: vrijednost i tako dalje": neka korisnik = {//ime objekta: "Ivan", //ključ "ime" pohrani vrijednost "Ivan" dob: 30 //po ključu "dob" vrijednost pohrane 30}. Svojstvo ima ključ (također poznat kao "ime" ili "id") prije dvotočke ":" i vrijednost s desne strane. Korisnički objekt ima dva svojstva. Dobiveni objekt JavaScript korisnika s dvije potpisane datoteke s oznakom "ime" i "dob". Datoteke možete dodavati, brisati i čitati u bilo kojem trenutku. Vrijednosti svojstava dostupne su pomoću oznake točke. Može biti bilo koje vrste. Možete dodati logičku vrijednost. Da biste izbrisali svojstvo, upotrijebite delete u slučaju pogreške objekta javascript.

    Svi objekti JavaScript grešaka su potomci objekta Error ilinaslijeđeni objekt:
  • Sintaksa Greška objekt je naslijedio od pogreške objekta.
  • JSON Parse Greška određene vrste sintakse Greška objekta.
  • Za daljnje produbljivanje razumijevanja o tome kako se aplikacije bave javascript pogreškama, bolje je upoznati se s Airbrake javascriptom, alatom za praćenje pogrešaka u stvarnom vremenu i trenutnim razumijevanjem što je pošlo po zlu s javascript kodom. Poruke o pogreškama koje korisnik može primiti prije brisanja objekta javascript:
  • Loš kontrolni znak u literalnom nizu.
  • Loš lik u doslovnom doslovnom.
  • Loš Unicode izlaz.
  • Loš znak bijega.
  • Neprekidni niz.
  • Neočekivani nenumerički kod.
  • Nema decimalnih točaka.
  • Neprekidni frakcijski broj.
  • Nema pokazatelja nakon pokazatelja stupnja.
  • Nema znakova nakon znaka eksponenta.
  • Eksponencijalni dio nema brojeve.
  • Neočekivani kraj podataka.
  • Neočekivana ključna riječ.
  • Neočekivani simbol.
  • Kraj podataka pri čitanju sadržaja predmeta.
  • Očekivano ime svojstva ili '}'.
  • Računalna svojstva

    Možete koristiti kvadratne zagrade u objektnoj literali. To se zove računska svojstva. U nastavku je dan primjer. Vrijednost svojstva vichislima je jednostavna: [voće] znači da se ime imovine mora uzeti iz voća. Dakle, ako posjetitelj uđe u "jabuku", vreća će biti {apple: 5}. Složene izraze možete koristiti u uglatim zagradama: neka sad = 'jabuka'; neka vrećica = {[voće + 'Računala']: 5 //bag.appleComputers = 5};Kvadratne zagrade su mnogo snažnije od oznaka točaka. Dopuštaju imena i varijable svojstava. Ali oni su i više nezgodni za pisanje. Budući da većinu vremena, kada su nazivi svojstava poznati i jednostavni, koristi se točka. A ako trebate nešto složenije, onda se prebacite na uglate zagrade.

    Rezervacija riječi

    Varijabla ne može imati ime jednako jednoj od rezerviranih riječi, kao što su za, neka, vraćanje, itd. Ali pri sortiranju JavaScript objekata nema takvog ograničenja. ,
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_2.jpeg
    U načelu, svako je ime dopušteno , ali postoji jedna posebna: "__proto__" dobiva posebnu žalbu zbog povijesnih razloga. Na primjer, možete postaviti njegovu vrijednost različitu od objekta: let obj = {}; obj .__ proto__ = 5; upozorenje (obj .__ proto__); //[objekt Object], nije radio kako je planirano Kao što je jasno iz koda, svrha primitive 5 je zanemarena. 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 objekt javascripta. Postoji način da objekte tretirate od __proto__ kao uobičajenu imovinu. Tu je i druga kartica strukture podataka koja podržava proizvoljne tipke.

    Svojstva cijelih brojeva

    Pojam "cjelobrojno svojstvo" ovdje znači niz koji se može transformirati iz cjeline bez modifikacije. Tako je, na primjer, "49" cijelo ime svojstva, jer kada je konvertirano u cijeli broj i natrag, to je isto. Ali "+49" i "1.2" nisutakve. S druge strane, ako ključevi nisu cijeli brojevi, oni se pretvaraju u redoslijed stvaranja. Primjer ispod.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_3.jpeg
    Da biste riješili problem pomoću telefonskih kodova, možete " prevariti tako da kodovi budu neprihvatljivi. Dodavanje "+" (znaka plus) dovoljno je prije svakog koda. Sada će raditi kao sastanak. Razlika između objekata od primitivnih je da se pohranjuju i kopiraju "putem veze". 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 izmjenu njezinog sadržaja.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_4.jpeg
    U gornjem primjeru, pokazano je da postoji samo jedan objekta i administratora za unos. Zatim, ako kasnije koristi drugi ključ (korisnik), korisnik će otkriti promjene. Operatori jednakosti == i stroga jednakost === za objekte rade na isti način. Dva objekta su jednaka, samo ako su isti objekt. Za usporedbe poput obj1 & gt; obj2 ili za usporedbu s primitivnim obj == 5 objekata pretvaraju se u primitive. Iskreno, takve usporedbe su vrlo rijetke i obično su rezultat pogrešaka kodiranja.

    Provjera objekta javascript

    Objekti imaju pristup bilo kojem svojstvu. Međutim, ako uopće ne postoji, to neće biti pogreška. Povratak nedefiniran je samo pristup nepostojećim svojstvima. On pruža vrlo uobičajen način testiranja svojstva i usporedbe s nedefiniranim.U nastavku je primjer.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_5.jpeg
    Upotreba "in" za svojstva koja ostaju nedefinirana , Obično je stroga provjera usporedbe "=== nedefinirana". Postoji poseban slučaj kada ne uspije i "in" radi ispravno. To je kada postoji svojstvo objekta, ali ono ostaje nedefinirano.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_6.jpeg
    U gornjem kodu, svojstvo obj.test postoji tehnički. , Stoga operater radi ispravno. Slične situacije događaju se vrlo rijetko, jer se nedefinirano obično ne namjerava. Obično se koriste null "unknown" ili "empty" vrijednosti. Dakle, operator u, zapravo, je gost u kodu.

    Forinov ciklus

    Kako bi se kretali svim ključevima od objekta do objekta, postoji poseban oblik petlje: forin. To je potpuno drugačija stvar za (;;) dizajn. U nastavku je primjer.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_7.jpeg
    Potrebno je obratiti pozornost da svi konstruktori «za» omogućuju vam da proglasite varijablu petlje unutar petlje kao što je neka neka. Umjesto toga možete upotrijebiti i drugi ključ imena varijable. Na primjer, za (neka prop u obj) je također široko korišten. Postoji alternativna "kvadratna zagrada" koja radi s bilo kojom linijom.
    http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_8.jpeg
    Ova točka zahtijeva da ključevi javascript-svjesni Objekt je bio važeći ID varijable, to jest, nema razmaka ili drugih ograničenja. Potrebno je obratiti pozornost da je linija unutar zagrada ispravno citirana. Kvadratne zagrade također pružaju način da ga dobijetenaziv imovine kao rezultat bilo kojeg izraza, za razliku od doslovne crte - s varijablom: let key = "voli ptice"; //isto kao korisnik ["likes birds"] = true; user [tipka] = true Ovdje se varijabilni ključ može izračunati tijekom izvršenja i ovisi o korisničkom unosu, a zatim će se koristiti za pristup imovini. To daje programerima veću fleksibilnost. Pjegavi zapis se ne može koristiti na isti način, jer će se izvršiti parsiranje JavaScript objekta. U nastavku je primjer.
    http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_9.jpeg

    Const objekt

    Navedeni const objekt može se promijeniti. U nastavku je dan primjer.
    http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_10.jpeg
    Možda se čini da je javascript objekt na liniji (*) će uzrokovati pogrešku, ali nije. To je zato što const bilježi vrijednost samog korisnika. A onda korisnik stalno drži vezu s istim objektom. Linija (*) ulazi u objekt, ne zauzima korisnika. Const će pogriješiti ako pokušate instalirati korisnika i nešto drugo. Kloniranje i spajanje, Object.assign stvara drugu vezu na isti objekt ako je želite kopirati. To je također moguće, ali malo kompliciranije, jer javascript nema ugrađenu metodu. Zapravo, ovo je rijetko. U većini slučajeva koristi se kopiranje putem veze. Ali ako stvarno trebate, onda morate stvoriti JavaScript objekt i kopirati strukturu postojećeg tako što ćete kopirati njegova svojstva na primitivnoj razini. U nastavku je primjer.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_11.jpeg
    I za to također možete koristiti metodu Object.assign. , Argumenti dest i src1, srcN su objekti.Kopira svojstva svih objekata src1, srcNINTO dest. Drugim riječima, svojstva svih argumenata, počevši od drugog, kopiraju se u prvom. Tada se vraća u dest. Na primjer, možete ga koristiti za spajanje više objekata u jedan.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_12.jpeg
    I također možete koristiti Object.assign za zamjenu petlje jednostavno kloniranje. Kopira sva svojstva korisnika u prazan objekt i vraća ga, baš kao i petlja, ali kraća. Do sada se pretpostavljalo da su sva korisnička svojstva primitivna. Ali svojstva mogu biti veze s drugim objektima. Da biste to riješili, morate koristiti petlju za kloniranje koja provjerava svaku vrijednost korisnika [ključ] i, ako je objekt, ponavlja svoju strukturu. To se naziva "duboko kloniranje". Postoji standardni algoritam za duboko kloniranje koji se bavi gore navedenim slučajem i složenijim slučajevima, nazvanim Strukturirani klonski algoritam. Kako ne bi ponovno izmislili točak, možete koristiti radnu implementaciju iz javascript lodash knjižnice, metoda se zove _.cloneDeep (obj).

    Napredne tehnike

    Ako programer padne preko nekog 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 se razvrstavaju cjelobrojna svojstva i drugi se formiraju u redoslijedu stvaranja javascript-objekta. Napredne objektne tehnike bave se konceptima koji se rijetko koriste u javascriptingu. To je zbog činjenice da u normalnim situacijama ove moćne značajke nisu potrebne. Neke od tih metoda možda nećerad u starijim preglednicima, kao što su rana izdanja Netscapea 4. Korištenje prototipa može se koristiti za stvaranje javascript objekata i svih mycircle metoda, a ne samo novih. To daje mješovito opterećenje na performanse. Ne moraju držati zasebne kopije metoda za svaku instancu objekta, tako da može biti potrebno manje memorije za rad, ali da bi ih pretražili, preglednik bi trebao tražiti trenutna i nadređena područja. To može dovesti do maksimalne odgode. U pravilu, korisnik mora koristiti ono što je prikladno za kod, umjesto da ga temelji na izvedbi, osim ako ima vrlo specifično kontrolirano okruženje.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_13.jpeg

    Return true

    U nekim u nekim slučajevima može biti nužno da se svojstvo objekta veže za sam objekt ili negdje u lancu prototipa. U javascriptu svi objekti koriste metodu hasOwnProperty, koja vraća true ako je ovo svojstvo vezano za instancu pojedinačnog objekta. U ovom slučaju moguće je provjeriti ima li konstruktor objekta isto svojstvo s istom vrijednošću kao i instanca samog objekta. To može dati nevažeći rezultat ako postoje zasebna svojstva objekta javascript s istom vrijednošću i za instancu objekta i za prototip lanca. Metoda hasOwnProperty uzima jedan parametar - ime svojstva u obliku niza.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_14.jpeg
    Slično tome, možete stvoriti privatne metode. Ovo je samo funkcija koja je stvorenaunutar konstruktorske funkcije. Možda se nekome čini zbunjujuće, ali tako funkcionira. Privatnu funkciju može pozivati ​​samo konstruktor ili metode definirane u retku. Mogu se koristiti kao javne metode ako se dodjeljuju javnom konstruktoru i mogu se koristiti otvorenim metodama javascript objekata. funkcija myob () {funkcija cantBeSeen () {alert (secretValue); } može privateValue = "; this.method1 = function () {secretValue = 'nema iznenađenja'; cantBeSeen ();}; this.method2 = cantBeSeen;} može oneOb = new myob (); oneOb.method1 (); //upozorenja 'bez iznenađenja' oneOb.method2 (); //upozorava 'bez iznenađenja'.

    Predložak naredbi

    Objekti naredbi dopuštaju labavo povezane sustave, dijeleći one koji izdaju zahtjeve od objekata i, u stvari, proces Upit: Ovi se upiti nazivaju događaji, a kod obrađuje zahtjeve naziva se događajima za rukovanje događajima. Pretpostavimo da kreirate programe koji podržavaju radnje isječka, isječka i lijepljenja međuspremnika. na primjer, klik Desnim klikom na tekstualni okvir ili kombinaciju ključeva Objekti naredbi omogućuju centralizaciju obrade tih radnji, jednu za svaku operaciju, kada je potrebna samo jedna naredba za obradu svih zahtjeva za izrezivanje, jedan za sve zahtjeve za kopiranje i jedan za sve zahtjeve za lijepljenje. Budući da timovi centraliziraju svu obradu, oni su također često uključeni u obradu funkcija otkazivanja za cijeli program. Značajna poboljšanja mogu se postići primjenom naprednih javascript tehnika, što rezultira učinkovitijim, pouzdanim i podržanim aplikacijama. Da bi saznali kako je tomož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, zatvaranje, anonimne funkcije i još mnogo toga. Ako korisnici trebaju najnovije gadgete i tehnike predložaka za javascript, jQuery predloške i arhitekture predložaka, ovo je najbolja opcija. Ovaj paket sadrži vrijedne, ažurne informacije za programere JavaScripta. Evo što uključuje:
  • JavaScript-optimizirane GoF predloške.
  • Predlošci suvremenog dizajna za javascript.
  • Predlošci za dizajn modela.
  • jQuery predlošci dizajna.
  • Arhitektonski predlošci javascript-idiomi.
  • Primjeri primjene (MVC, SPA, itd.)
  • Predložene osnove sintakse javascript objekta 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 služi kao osnova za ostatak jezika javascripta.

    Povezane publikacije

    Object Javascript: stvaranje objekata i rad Transformacija CSS-a: teorija i primjeri transformacije objekata JavaScript: Primjeri aplikacija JavaScript sintaksa parseInt: primjeri uporabe JavaScript platno: opis, značajke, primjeri, recenzije Javascript XMLHttpRequest, povijest stvaranja, standardi, primjeri