Objekty JavaScript v příkladech

Objekty jsou základním kamenem javascriptu. Mnoho vestavěných datových typů je reprezentováno jako objekty. Chcete-li být úspěšným vývojářem jazyka JavaScript, musíte mít jasnou představu o tom, jak fungují. Stavební bloky objektu se nazývají jeho pole nebo vlastnosti objektu JavaScript. Používají se k popisu jakéhokoli aspektu objektu. Vlastnost může popisovat délku seznamu, barvu oblohy nebo datum narození osoby. Vytváření objektů je snadný proces. Jazyk poskytuje syntaxi známou jako literály objektů, které jsou označeny křivkami.

Přístup k vlastnostem

Jazyk obsahuje dvě položky pro přístup k vlastnostem. První a nejčastější je známá jako bodová notace. V bodovém zápisu lze získat přístup k prostředku zadáním názvu hostitelského objektu, po němž následuje období a název vlastnosti. Například když objekt object.foo byl původně přiřazen hodnotě jedné, pak se jeho hodnota stane po provedení operátoru JavaScript objektů 2.

Alternativní syntaxe pro přístup je známa jako závorky. Označení objektu je následováno souborem hranatých závorek. V nich je název vlastnosti zadán jako řetězec:

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

Je výraznější než bodová notace, protože umožňuje proměnné označovat celý nebo část názvu vlastnosti. To je možné, protože překladač objektů jazyka JavaScript automaticky převede tento výraz na řetězec a poté získá příslušnou vlastnost. Názvy vlastností jsou vytvořeny za běhu spojením obsahu proměnné f s řetězcem "oo":

var f = "f";

objekt [f + "oo"] = "lišta".

Označení závorek umožňuje názvy vlastností obsahovat znaky, které nejsou povoleny v bodě notace. Například následující výrok je v závorkách zcela legální. Pokud se však uživatel pokusí vytvořit stejný název vlastnosti v tečkované notaci, narazí na chybu syntaxe:

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

Přístup k vlastnostem vnořených objektů jazyka JavaScript lze získat spojením bodů a / nebo závorek. Například následující objekt obsahuje vložený objekt s názvem baz obsahující jiný objekt s názvem foo, který má vlastnost s názvem bar obsahující hodnotu pět:

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

Následující výrazy mají přístup k vlastnostem připojené čáry. První výraz používá bodový zápis, zatímco druhý výraz používá čtvercový zápis. Třetí výraz kombinuje oba záznamy pro dosažení stejného výsledku:

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

Výrazy, které jsou uvedeny v předchozím příkladu, mohou vést k špatnému výkonu při nesprávném použití a zakázání objektu JavaScript. Vyhodnocení každého výřezu bodu nebo závorky zabere čas. Pokud se stejná vlastnost použije několikrát, pak má smysl přistupovat k objektu jednou a potom uložit hodnotu v místní proměnné pro všechny budoucí účely.

Funkce jako metoda

Když je funkce použita jako vlastnost objektu, nazývá se metodou. Stejně jako vlastnosti jsou zadány v doslovném zápisu objektu. Například:

var objekt = {součet: funkce (foo, bar) {return foo + bar; }}.

Objektové metody JavaScript lze vyvolat pomocí štítků a závorek. Následující příklad volá metodu sum () z předchozího příkladu pomocí obou položek:

• object.sum (1, 2);
• objekt ["součet"] (1, 2).

Pojmenování objektu literal je užitečné pro vytváření nových objektů, ale nemůže přidat vlastnosti ani metody k existujícím objektům. Naštěstí přidávání nových dat je stejně snadné jako vytváření příkazu k zadání. Vytvoří se prázdný objekt. Potom pomocí operátorů přiřazení jsou přidány dvě vlastnosti, foo a bar, také metodu baz:

• var objekt = {};
• object.foo = 1;
• object.bar = null;
• object.baz = funkce () {návrat "hello from baz ()"; }.

Zapouzdření programu

Hlavní myšlenkou objektově orientovaného programování je rozdělit program na menší části a udělit každému z nich odpovědnost za řízení vlastního stavu. Některé znalosti o tom, jak může fungovat část programu, mohou být pro tuto část lokální. Někdo, kdo pracuje na zbytku programu, by si o tom neměl pamatovat ani dokonce o něm vědět. Kdykoli se tyto místní údaje mění, je třeba aktualizovat pouze kód, který je bezprostředně kolem.

Různé části takového programu vzájemně komunikují prostřednictvím rozhraní, omezených sad funkcí nebo vazeb, které poskytují užitečnou funkcionalitu na abstraktnější úrovni a skrývají jejich přesnou implementaci. Tyto části programu jsou modelovány pomocí objektů. Jejich rozhraní se skládá ze specifické sady metod a vlastností. Vlastnosti, které jsou součástí rozhraní, se nazývají veřejné. Zbytek, který by se neměl dotýkat externího kódu, se nazývá soukromý.

Mnoho jazyků umožňuje rozlišovat mezi veřejnými a soukromými nemovitostmi a neumožňuje přístup k externím kódům soukromým. Javascript, opět s minimalistickým přístupem, dosud nebyl dosažen. V současné době probíhá práce na přidání tohoto jazyka. Proto programátoři jazyka JavaScript úspěšně použijí tuto myšlenku. Dostupné rozhraní zpravidla je popsáno v dokumentaci nebo komentářích. Je také obvyklé umístit podtržítko (_) na začátku názvů vlastností, které označuje, že tyto vlastnosti jsou soukromé. Oddělení rozhraní od implementace je skvělý nápad. Obvykle se nazývá zapouzdření.

Vlastnosti

Objekt s závorkami {...} se nazývá předmět doslovný. Do těchto závorek můžete okamžitě vložit některé vlastnosti {...}. Například páry "klíč: hodnota a tak dále":

Nechť uživatel = {// název objektu: "John", // klíčem "name" hodnota úložiště "John" věk: 30 // podle klíčové hodnoty "age age" 30}.

Vlastnost má klíč (také známý jako "jméno" nebo "identifikátor") před dvojtečkou ":" a hodnotou vpravo. V objektu uživatele jsou dvě vlastnosti. Výsledný uživatelský JavaScriptový objekt se dvěma podepsanými soubory se slovy "name" a "age". Soubory můžete kdykoli přidávat, mazat a číst. Hodnoty vlastností jsou k dispozici za použití notace bodů. Může být jakéhokoli typu. Můžete přidat booleovskou hodnotu. Chcete-li odstranit vlastnost, použijte smazání v případě objektu JavaScript Error.

Všechny chybné objekty jazyka JavaScript jsou potomky objektu Chyba nebo zděděného objektu:

1. Objekt chyby syntaxe je zděděn z objektu Chyba.
2. JSON Parse chyba určitého typu objektu Chyba syntaxe.

Abyste se ještě více seznámili s tím, jak se aplikace zabývají chybami jazyka JavaScript, je lepší se seznámit s nástrojem Airbrake JavaScript - nástrojem pro sledování chyb v reálném čase a okamžitým pochopením toho, co se stalo s kódem JavaScript.

Chybové zprávy, které může uživatel před odebráním objektu JavaScript:

1. Špatný kontrolní znak v řetězci doslova.
2. Špatný znak v řetězci doslova.
3. Špatný výstup Unicode.
4. Špatný útěk.
5. Neterminovaný řetězec.
6. Neočekávaný nečíselný kód.
7. Chybí číslice za desetinnou čárkou.
8. Neterminované zlomkové číslo.
9. Žádná čísla po ukazateli stupně.
10. Chybí číslice po znamení exponentu.
11. Exponenciální část nemá žádné číslo.
12. Neočekávaný konec dat.
13. Neočekávané klíčové slovo.
14. Neočekávaný znak.
15. Konec dat při čtení obsahu objektu.
16. Název očekávaného majetku nebo '}'.

Výpočtové vlastnosti

Hranaté závorky můžete použít v objektu literál. Toto se nazývá vypočítané vlastnosti. Příklad je uveden níže.

Hodnota vypočítatelné vlastnosti je jednoduchá: [ovoce] znamená, že název vlastnictví musí být převzat z ovoce. Pokud tedy návštěvník zadá "jablko", taška se stane {apple: 5}. Složitější výrazy můžete použít v hranatých závorkách:

ovoce = "jablko";

let bag = {

[ovoce + 'Počítače']: 5 // bag.appleComputers = 5

};

Konzoly jsou mnohem výkonnější než dotykové symboly. Umožňují jména a proměnné vlastností. Ale jsou také těžší psát. Proto většinu času, kdy jsou názvy vlastností známy a jednoduché, je použita tečka. A pokud potřebujete něco složitějšího, přepněte do hranatých závorek.

Slovní rezervace

Proměnná nemůže mít jméno stejné jako jedno z vyhrazených slov, například "pro", "let", "návrat" atd. Ale při třídění objektů jazyka JavaScript neexistuje žádné takové omezení.

V zásadě je povoleno jménem, ​​ale je zde zvláštní: "__proto__" obdrží zvláštní výzvu z historických důvodů. Například jej nelze nastavit pro jinou hodnotu než je objekt:

let obj = {};

obj. proto__ = 5;

upozornění (obj____ proto__); // [object Object], nefungovalo tak, jak bylo zamýšleno

Jak je zřejmé z kódu, přiřazení primitivních 5 se ignoruje. To může být zdrojem chyb a dokonce i zranitelností, pokud má operátor v úmyslu uložit v objektu libovolné páry klíč-hodnota a povolit návštěvníkovi zadat klíč. V takovém případě může návštěvník vybrat klíč "proto" a do objektu přidat JavaScript. Existuje způsob, jak objekty zpracovávat jako __proto__ jako regulární vlastnost. K dispozici je také další mapa struktury dat, která podporuje libovolné klávesy.

Integer vlastnosti

Termín "celočíselná vlastnost" zde znamená řetězec, který lze převést z celku bez úprav. Například "49" je celočíselné jméno vlastnosti, protože když je převedeno na celé číslo a zpět, je to stále stejné. Ale "+49" a "1.2" nejsou. Na druhou stranu, pokud nejsou klíče celé číslo, jsou uvedeny v pořadí vytvoření. Níže uvedený příklad.

Chcete-li problém vyřešit pomocí telefonních kódů, můžete "podvádět" tak, že kódy jsou celé číslo. Přidání znaku "+" (znaménko plus) před každým kódem postačí. Teď to bude fungovat tak, jak bylo zamýšleno.

Rozdíl mezi objekty a primitivami spočívá v tom, že jsou uloženy a kopírovány "odkazem". Primotivní hodnoty jsou přiřazeny a zkopírovány "jako celočíselná hodnota". Proměnná ukládá adresu do paměti, nikoliv samotný objekt nebo odkaz na něj. K přístupu a změně obsahu můžete použít libovolnou proměnnou.

Z výše uvedeného příkladu vyplývá, že je k zadání pouze jeden objekt a admin. Pokud je později použit jiný klíč (uživatel), uživatel zjistí změny.

Operátoři rovnosti == a přísná rovnost === pracují pro objekty stejným způsobem. Dva objekty jsou stejné, pokud jsou stejným objektem. Pro porovnání jako obj1> obj2 nebo pro porovnání s primitivním obj == 5 jsou objekty převedeny na primitivy. Abych byl upřímný, takové srovnání jsou velmi zřídka potřebné a jsou obvykle výsledkem chyby kódování.

Ověření objektu JavaScript

Objekty mají přístup ke všem vlastnostem. Pokud však vůbec neexistuje, nebude to chyba. Pouze přístup k neexistující vlastnosti vrátí undefined. Poskytuje velmi častý způsob testování vlastností a porovnání s nedefinovanou. Níže uvádíme příklad.

Použijte "in" pro vlastnosti, které ukládají nedefinované. Obvykle přísná kontrola "=== undefined" funguje dobře. Existuje zvláštní případ, kdy selže a "in" funguje správně. Toto je, když existuje vlastnost objektu, ale uloží se nedefinovaná.

Ve výše uvedeném kódu technicky existuje vlastnost obj.test. Operátor tedy pracuje správně. Takové situace se dějí velmi zřídka, protože nedefinované jsou obvykle přiřazeny. Používají se většinou nulové "neznámé" nebo "prázdné" hodnoty. Takže v prohlášení je ve skutečnosti host v kódu.

"Cyklus"

Aby bylo možné procházet všechny klíče od objektu k objektu, existuje zvláštní forma smyčky: for..in. To je úplně jiná věc než konstrukce pro (?).

Níže uvádíme příklad.

Je třeba poznamenat, že všechny konstruktory umožňují vymezení smyček pro smyčky ve smyčce za klíč. Případně můžete namísto toho použít jiné jméno proměnné klíče.

Například pro (let prop v obj) je také široce používán.

Existuje alternativní "hranatá závorka", která pracuje s libovolným řetězcem.

V tomto případě bod vyžaduje, aby klíče objektu JavaScript byly platným identifikátorem proměnné, tj. Neexistují mezery a další omezení. Je třeba dbát na to, aby řetězec uvnitř konzol byl správně citován. Konzoly také poskytují způsob, jak získat jméno vlastnosti jako výsledek jakéhokoli výrazu, na rozdíl od doslovného řetězce, z proměnné:

klíč = "rád ptáci";

// stejné jako u uživatele ["likes birds"] = true;

uživatel [klíč] = true.

Zde může být klíčová proměnná vypočítána za běhu a závisí na vstupu uživatele a pak bude použita pro přístup k vlastnosti. To dává programátorům větší flexibilitu. Bodovaná notace nemůže být použita podobným způsobem, jelikož bude probíhat iterace objektu JavaScript. Níže uvádíme příklad.

Objekt Const

Deklarovaný objekt const může být změněn. Příklad je uveden níže.

Může se zdát, že objekt JavaScript v řetězci (*) způsobí chybu, ale není. Je to proto, že const zachycuje hodnotu samotného uživatele. A tady uživatel stále udržuje odkaz na stejný objekt po celou dobu. Řádek (*) vstupuje do objektu, není uživatelovi znovu přidělen. Pokud se pokusíte nainstalovat uživatele a něco jiného, ​​zobrazí se chyba Const. Klonování a sloučení, objekt Object.assign vytvoří další odkaz na stejný objekt, pokud jej chcete duplikovat. To je také možné, ale trochu komplikovanější, protože JavaScript nemá vestavěnou metodu. Ve skutečnosti je to zřídka nutné. Kopírování odkazem se používá ve většině případů. Pokud je však skutečně potřebujete, musíte vytvořit objekt JavaScript a replikovat strukturu existujícího objektu kopírováním jeho vlastností na primitivní úroveň. Níže uvádíme příklad.

Můžete také použít metodu Object.assign. Argumenty dest a src1, ..., srcN jsou objekty. Zkopíruje vlastnosti všech souborů src1, ..., srcNINTO dest. Jinými slovy, vlastnosti všech argumentů, počínaje druhým, jsou zkopírovány do prvního. Pak se vrátí na dest. Můžete například použít kombinaci několika objektů do jednoho.

A můžete také použít objekt Object.assign nahradit smyčku jednoduchého klonu. Zkopíruje všechny uživatelské vlastnosti do prázdného objektu a vrací je, stejně jako smyčka, ale zkrátka. Až dosud se předpokládalo, že všechny uživatelské vlastnosti jsou primitivní. Vlastnosti však mohou být odkazy na jiné objekty.

Chcete-li to opravit, musíte použít cyklus klonování, který kontroluje každou hodnotu uživatele [klíč], a pokud je to objekt, replikuje jeho strukturu. Toto se nazývá "hluboké klonování".

Existuje standardní algoritmus hlubokého klonování, který se zabývá výše uvedeným případem a složitějšími případy, nazývanými Strukturovaný klonovací algoritmus. Abyste nerozvinuli kolo, můžete použít pracovní implementaci z lodash JavaScript knihovny, metodu nazvanou _.cloneDeep (obj).

Pokročilé metody

Pokud programátor přechází na objekt a snaží se získat všechny vlastnosti ve stejném pořadí, ve kterém byly přidány, může se spolehnout na "objednávání zvláštním způsobem", když jsou tříděny celočíselné vlastnosti a jiné jsou vytvořeny v pořadí vytvoření objektu JavaScript.

Pokročilé metody objektů se zabývají koncepty, které jsou zřídka využívány v jazyce JavaScript. To je způsobeno skutečností, že v normálních scénářích nejsou tyto výkonné funkce potřeba. Některé z těchto metod nemusí fungovat ve starších prohlížečích, jako jsou časné verze programu Netscape 4.

Použití prototypu by mohlo být použito k vytváření objektů jazyka JavaScript a všech metod mycircle, a to nejen nových. To dává smíšené výkonové zatížení. Nemusíte ukládat samostatné kopie metod pro každou instanci objektu, takže může dojít k menší práci, ale prohlížeč musí vyhledávat aktuální a nadřazené oblasti. To může způsobit maximální zpoždění. Obvykle by uživatel měl používat kód, který je pro daný kód vhodný, a nezakládat toto rozhodnutí na výkonnosti, pokud se nejedná o velmi specifické řízené prostředí.

Vraťte pravdu

V některých případech může být nutné, aby vlastnost objektu byla vázána na samotný objekt nebo někde v prototypovém řetězci. V jazyce JavaScript všechny objekty používají metodu hasOwnProperty, která vrací true, pokud je tato vlastnost vázána na instanci jednoho objektu. V tomto případě je možné zkontrolovat, zda konstruktor objektu má stejný vlastnost se stejnou hodnotou jako samotná instance objektu. To může způsobit nesprávný výsledek, pokud existují oddělené vlastnosti objektu JavaScript se stejnou hodnotou jak pro instanci objektu, tak pro řetězec prototypu. Metoda hasOwnProperty obsahuje jeden parametr - název vlastnosti jako řetězec.

Podobně můžete vytvořit soukromé metody. Jedná se jednoduše o funkci, která je vytvořena uvnitř funkce konstruktoru. Pro některé se to může zdát zmatené, ale to funguje. Soukromou funkci může zavolat pouze konstruktor samotný nebo metody definované v řetězci. Mohou být použity jako veřejné metody, pokud jsou přiřazeny veřejnému konstruktoru a jsou přístupné veřejnými metodami objektů Javascriptu.

funkce myob () {function cantBeSeen () {varování (secretValue);

var varValue = '';

this.method1 = funkce () {secretValue = 'žádné překvapení';

cantBeSeen ();

};

this.method2 = cantBeSeen;

} var oneOb = nová myob ();

oneOb.method1 ();

// varuje 'žádné překvapení' oneOb.method2 ();

// upozorňuje na "žádné překvapení".

Příkazový vzor

Příkazové objekty umožňují volně spojené systémy oddělením těch, které vytvářejí požadavky z objektů a ve skutečnosti zpracovávají požadavek. Tyto požadavky se nazývají události a kód, který zpracovává požadavky, se nazývá obsluha událostí.

Předpokládejme, že jsou vytvořeny aplikace, které podporují akce schránky Vyjmout, Kopírovat a Vložit. Tyto akce lze spustit různými způsoby v celé aplikaci: systémem nabídky, kontextovým menu, například klepnutím pravým tlačítkem na textové pole nebo pomocí zástupce. Příkazové objekty umožňují centralizovat zpracování těchto akcí, jednu pro každou operaci, když potřebujete pouze jeden příkaz pro zpracování všech požadavků na řezání, jednu pro všechny žádosti o kopírování a jednu pro všechny žádosti o vložení.

Protože příkazy centralizují veškeré zpracování, také se často účastní zpracování zpětných funkcí pro celou aplikaci. Významná zlepšení lze dosáhnout použitím moderních metod JavaScriptu, což vede k vytváření efektivnějších, spolehlivějších a podporovaných aplikací.

Chcete-li se dozvědět, jak to udělat, můžete použít šablony JavaScript + jQuery. Tento jedinečný balíček obsahuje optimalizovaný JavaScript pro všechny šablony GoF pomocí pokročilejších funkcí, jako jsou jmenné prostory, prototypy, moduly, funkční objekty, uzávěry, anonymní funkce a další. Pokud uživatelé potřebují nejnovější nástroje a metody pro šablony JavaScript, jQuery šablony a šablony architektury, pak je to nejlepší případ použití. Tento balíček obsahuje cenné a aktuální informace pro vývojáře jazyka JavaScript. Zde je to, co je součástí:

1. Šablony GoF optimalizované pomocí JavaScript.
2. Moderní vzory jazyka JavaScript.
3. Modelové vzory.
4. Šablony návrhu JQuery.
5. Architektonické šablony JavaScript idiomy.
6. Příklady aplikací (MVC, SPA atd.)

Navrhované syntaktické základy objektů jazyka JavaScript jsou pro začínající programátory velmi důležité. Nejprve musíte pochopit objekty, pak budou znalosti objektově orientovaného programování. Je nesmírně důležité hluboce porozumět tomuto materiálu, protože to slouží jako základ pro zbytek jazyka JavaScriptu.