Obiekty JavaScript w przykładach

Obiekty są kamieniem węgielnym javascript. Wiele wbudowanych typów danych jest reprezentowanych jako obiekty. Aby odnieść sukces jako programista JavaScript, musisz mieć jasny obraz tego, jak działają. Bloki konstrukcyjne obiektu nazywane są jego polami lub właściwościami obiektu JavaScript. Są używane do opisania dowolnego aspektu obiektu. Właściwość może opisywać długość listy, kolor nieba lub datę urodzenia osoby. Tworzenie obiektów to łatwy proces. Język zapewnia składnię znaną jako literały obiektowe, które są oznaczone przez nawiasy klamrowe.

Dostęp do nieruchomości

Język zawiera dwa wpisy dotyczące dostępu do właściwości. Pierwszy i najczęstszy znany jest jako notacja kropkowa. W notacji kropkowanej dostęp do zasobu można uzyskać, podając nazwę obiektu hosta, po którym następuje kropka i nazwa właściwości. Na przykład, gdy obiekt object.foo został początkowo przypisany wartości jednego, to jego wartość stanie się 2 po wykonaniu operatora JavaScript obiektów.

Alternatywna składnia dostępu jest nazywana nawiasami. W notacji po nazwie obiektu następuje zestaw nawiasów kwadratowych. W nich nazwa właściwości jest określona jako ciąg:

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

Jest bardziej wyrazisty niż notacja punktowa, ponieważ pozwala zmiennej wskazać całą lub część nazwy właściwości. Jest to możliwe, ponieważ interpreter obiektów JavaScript automatycznie konwertuje to wyrażenie na ciąg znaków, a następnie pobiera odpowiednią właściwość. Nazwy właściwości tworzone są w locie poprzez połączenie zawartości zmiennej f z ciągiem "oo":

var f = "f";

object [f + "oo"] = "bar".

Oznaczenie nawiasów pozwala, by nazwy właściwości zawierały znaki niedozwolone w notacji kropkowanej. Na przykład poniższa instrukcja jest całkowicie legalna w nawiasach. Jeśli jednak użytkownik spróbuje utworzyć tę samą nazwę właściwości w notacji kropkowanej, napotka błąd składni:

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

Dostęp do właściwości zagnieżdżonych obiektów JavaScript można uzyskać, łącząc punkty i / lub nawiasy. Na przykład następujący obiekt zawiera osadzony obiekt o nazwie baz zawierający inny obiekt o nazwie foo, który ma właściwość o nazwie pasek zawierający wartość pięć:

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

Następujące wyrażenia mają dostęp do dołączonej właściwości paska. Pierwsze wyrażenie używa notacji kropkowej, podczas gdy drugie wyrażenie używa notacji kwadratowej. Trzecie wyrażenie łączy obie pozycje, aby osiągnąć ten sam wynik:

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

Wyrażenia takie jak te pokazane w poprzednim przykładzie mogą prowadzić do słabej wydajności, gdy są niewłaściwie używane i wyłączać obiekt JavaScript. Ocena każdego wyrażenia punktu lub nawiasu wymaga czasu. Jeśli ta sama właściwość jest używana kilka razy, to ma sens, aby uzyskać dostęp do właściwości raz, a następnie przechowywać wartość w zmiennej lokalnej dla wszystkich przyszłych celów.

Funkcja jako metoda

Gdy funkcja jest używana jako właściwość obiektu, nazywa się ją metodą. Podobnie jak właściwości, są one określone w notacji literalnej obiektu. Na przykład:

var object = {sum: function (foo, bar) {return foo + bar; }}.

Metody obiektów JavaScript można wywoływać za pomocą etykiet i nawiasów. Poniższy przykład wywołuje metodę sum () z poprzedniego przykładu, używając obu wpisów:

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

Nazewnictwo literału obiektowego jest przydatne do tworzenia nowych obiektów, ale nie może dodawać właściwości ani metod do istniejących. Na szczęście dodawanie nowych danych jest tak proste, jak tworzenie instrukcji przypisania. Tworzony jest pusty obiekt. Następnie za pomocą operatorów przypisania dodawane są dwie właściwości, foo i bar, a także metoda baz:

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

Program enkapsulacji

Główną ideą programowania obiektowego jest podzielenie programu na mniejsze części i sprawienie, aby każdy z nich był odpowiedzialny za zarządzanie własnym stanem. W związku z tym pewna wiedza na temat działania części programu może być lokalna dla tej części. Ktoś, kto pracuje nad resztą programu, nie powinien pamiętać ani nawet o tym wiedzieć. Ilekroć te lokalne dane się zmieniają, tylko kod natychmiast wokół niego musi zostać zaktualizowany.

Różne części tego programu współdziałają ze sobą za pośrednictwem interfejsów, ograniczonych zestawów funkcji lub powiązań, które zapewniają użyteczną funkcjonalność na bardziej abstrakcyjnym poziomie, ukrywając ich dokładną implementację. Takie części programu są modelowane przy użyciu obiektów. Ich interfejs składa się z określonego zestawu metod i właściwości. Właściwości, które są częścią interfejsu, są nazywane publicznymi. Reszta, która nie powinna dotykać kodu zewnętrznego, nazywana jest prywatną.

Wiele języków umożliwia rozróżnianie własności publicznych i prywatnych i uniemożliwia dostęp do kodu prywatnego przez kod zewnętrzny. JavaScript, ponownie stosując podejście minimalistyczne, nie został jeszcze osiągnięty. Obecnie trwają prace nad dodaniem tego języka. Dlatego programiści JavaScript z powodzeniem wykorzystają ten pomysł. Z reguły dostępny interfejs jest opisany w dokumentacji lub komentarzach. Zwyczajowo umieszcza się podkreślenie (_) na początku nazw właściwości, aby wskazać, że te właściwości są prywatne. Oddzielenie interfejsu od implementacji to świetny pomysł. Zwykle nazywa się to enkapsulacją.

Właściwości

Obiekt z nawiasami {...} jest nazywany literałem obiektu. Możesz od razu umieścić pewne właściwości w nawiasach {...}. Na przykład pary "klucz: wartość itd.":

niech user = {// nazwa obiektu: "John", // wg klucza "nazwa" wartość sklepu "John" wiek: 30 // wg klucza "wiek" wartość sklepu 30}.

Właściwość ma klucz (znany również jako "nazwa" lub "identyfikator") przed dwukropkiem ":" i wartość po prawej stronie. Istnieją dwie właściwości w obiekcie użytkownika. Powstały obiekt JavaScript użytkownika z dwoma podpisanymi plikami ze słowami "nazwa" i "wiek". W dowolnym momencie możesz dodawać, usuwać i czytać pliki. Wartości właściwości są dostępne za pomocą notacji kropkowej. Może być dowolnego rodzaju. Możesz dodać wartość boolowską. Aby usunąć właściwość, użyj delete w przypadku błędu JavaScript obiektu.

Wszystkie obiekty błędów JavaScript są potomkami obiektu Error lub dziedziczonego obiektu:

1. Obiekt błędu składni jest dziedziczony z obiektu Error.
2. Błąd analizy składni JSON określonego typu obiektu błędu składni.

Aby jeszcze głębiej zrozumieć, w jaki sposób aplikacje radzą sobie z błędami JavaScript, lepiej poznać Airbrake JavaScript - narzędzie do śledzenia błędów do alertów w czasie rzeczywistym i natychmiastowego zrozumienia, co poszło nie tak z kodem JavaScript.

Komunikaty o błędach, które użytkownik może otrzymać przed usunięciem obiektu JavaScript:

1. Zły znak kontrolny w literale łańcuchowej.
2. Zła postać w literale ciąg.
3. Złe wyjście Unicode.
4. Zła postać ucieczki.
5. Niezakończony ciąg.
6. Nieoczekiwany kod nienumeryczny.
7. Brakujące cyfry po przecinku.
8. Niezakończona liczba ułamkowa.
9. Brak numerów po wskaźniku stopni.
10. Brakujące cyfry po znaku potęgi.
11. Część wykładnicza nie ma numeru.
12. Niespodziewane zakończenie danych.
13. Nieoczekiwane słowo kluczowe.
14. Nieoczekiwany charakter.
15. Koniec danych podczas odczytu zawartości obiektu.
16. Oczekiwana nazwa właściwości lub "}".

Właściwości obliczeniowe

Możesz użyć nawiasów kwadratowych w literale obiektu. Nazywa się to właściwościami obliczeniowymi. Przykład podano poniżej.

Wartość własności obliczalnej jest prosta: [owoc] oznacza, że ​​nazwa właściwości musi pochodzić z owoców. Jeśli odwiedzający wejdzie w "jabłko", torba stanie się {jabłko: 5}. Możesz użyć bardziej złożonych wyrażeń w nawiasach kwadratowych:

niech owoc = "jabłko";

niech torba = {

[owoce + "Komputery"]: 5 // bag.appleComputers = 5

};

Wsporniki są o wiele potężniejsze niż symbole kropek. Pozwalają one na nazwy i zmienne własności. Ale są też bardziej kłopotliwe w pisaniu. Dlatego w większości przypadków, gdy nazwy właściwości są znane i proste, używana jest kropka. A jeśli potrzebujesz czegoś bardziej skomplikowanego, przełącz się na kwadratowe nawiasy.

Rezerwacje słów

Zmienna nie może mieć nazwy równej jednemu z zarezerwowanych słów, takich jak "for", "let", "return", itp. Ale nie ma takiego ograniczenia podczas sortowania obiektów JavaScript.

Zasadniczo każda nazwa jest dozwolona, ​​ale jest specjalna: "__proto__" otrzymuje specjalny apel ze względów historycznych. Na przykład nie można ustawić wartości innej niż obiekt:

niech obj = {};

obj .__ proto__ = 5;

alert (obj .__ proto__); // [obiekt obiektu] nie działał zgodnie z przeznaczeniem

Jak widać z kodu, przypisanie prymitywu 5 jest ignorowane. Może to być źródłem błędów, a nawet słabych punktów, jeśli operator zamierza przechowywać dowolne pary klucz-wartość w obiekcie i umożliwiać odwiedzającym określenie klawiszy. W takim przypadku użytkownik może wybrać "proto" jako klucz i dodać JavaScript do obiektu. Istnieje sposób na przetwarzanie obiektów przez __proto__ jako zwykłą właściwość. Istnieje również inna mapa struktury danych, która obsługuje dowolne klucze.

Właściwości całkowite

Termin "własność całkowita" oznacza tutaj ciąg, który można przekształcić z całości bez modyfikacji. Na przykład "49" to nazwa właściwości całkowitej, ponieważ po przekonwertowaniu jej na liczbę całkowitą iz powrotem pozostaje taka sama. Ale "+49" i "1.2" nie są. Z drugiej strony, jeśli klucze nie są liczbami całkowitymi, są one wymienione w kolejności tworzenia. Przykład poniżej.

Aby rozwiązać problem za pomocą kodów telefonicznych, możesz "oszukać", podając kody nie będące liczbą całkowitą. Dodanie znaku "+" (plus) przed każdym kodem jest wystarczające. Teraz będzie działać zgodnie z przeznaczeniem.

Różnica między obiektami i prymitywami polega na tym, że są one przechowywane i kopiowane "przez odniesienie". Wartości pierwotne są przypisywane i kopiowane "jako wartość całkowita". Zmienna przechowuje "adres w pamięci", a nie sam obiekt lub "link" do niego. Możesz użyć dowolnej zmiennej, aby uzyskać dostęp i zmienić jej zawartość.

Powyższy przykład pokazuje, że jest tylko jeden obiekt i administrator, aby go wprowadzić. Następnie, jeśli później użyty zostanie inny klucz (użytkownik), użytkownik wykryje zmiany.

Operatory równości == i ścisła równość === działają dla obiektów w ten sam sposób. Dwa obiekty są równe tylko wtedy, gdy są tym samym obiektem. Dla porównań takich jak obj1> obj2 lub dla porównania z prymitywnym obj == 5, obiekty są konwertowane na prymitywy. Szczerze mówiąc, takie porównania są bardzo rzadko potrzebne i zwykle są wynikiem błędu w kodowaniu.

Sprawdzanie poprawności obiektów JavaScript

Obiekty mają dostęp do dowolnej własności. Jeśli jednak w ogóle nie istnieje, nie będzie to pomyłka. Tylko dostęp do nieistniejącej właściwości zwraca niezdefiniowane. Zapewnia bardzo popularny sposób testowania właściwości i porównywania jej z niezdefiniowanym. Poniżej znajduje się przykład.

Użyj "in" dla właściwości, które przechowują niezdefiniowane. Zwykle ścisłe sprawdzanie porównania "=== undefined" działa dobrze. Jest specjalny przypadek, gdy zawiedzie, a "w" działa poprawnie. Jest to wtedy, gdy właściwość obiektu istnieje, ale zapisuje niezdefiniowane.

W powyższym kodzie własność obiektu obj.test istnieje. Dlatego operator in działa poprawnie. Takie sytuacje zdarzają się bardzo rzadko, ponieważ niezdefiniowane zwykle nie są przypisywane. Stosowane są głównie wartości zerowe "nieznane" lub "puste". Tak więc instrukcja in jest w rzeczywistości gościem w kodzie.

Cykl "For..in"

Aby poruszać się wszystkimi kluczami od obiektu do obiektu, istnieje specjalna forma pętli: for..in. Jest to zupełnie inna sprawa niż dla konstrukcji (;;).

Poniżej znajduje się przykład.

Należy zauważyć, że wszystko dla konstruktorów pozwala na zadeklarowanie zmiennych pętli w pętli jako kluczu let. Zamiast tego możesz użyć innej nazwy zmiennej kluczowej.

Na przykład dla (let prop in obj) jest również szeroko stosowany.

Istnieje alternatywny "nawias kwadratowy", który działa z dowolnym ciągiem znaków.

W tym przypadku kropka wymaga, aby klucze obiektu JavaScript były poprawnym identyfikatorem zmiennej, to znaczy, że nie ma spacji i innych ograniczeń. Należy uważać, aby sznur wewnątrz nawiasów był prawidłowo zacytowany. Nawiasy zapewniają również sposób na uzyskanie nazwy właściwości w wyniku dowolnego wyrażenia, w przeciwieństwie do literału, ze zmiennej:

let key = "lubi ptaki";

// tak samo jak użytkownik ["likes birds"] = true;

user [key] = true.

W tym miejscu zmienna kluczowa może zostać obliczona w czasie wykonywania i zależy od danych wprowadzonych przez użytkownika, a następnie zostanie wykorzystana do uzyskania dostępu do właściwości. Daje to programistom większą elastyczność. Notacji kropkowanej nie można używać w podobny sposób, ponieważ wystąpi iteracja obiektu JavaScript. Poniżej znajduje się przykład.

Obiekt Const

Deklarowany obiekt const można zmodyfikować. Przykład podano poniżej.

Może się wydawać, że obiekt JavaScript w ciągu znaków (*) spowoduje błąd, ale tak nie jest. Dzieje się tak, ponieważ const przechwytuje wartość samego użytkownika. I tutaj użytkownik przez cały czas utrzymuje link do tego samego obiektu. Linia (*) przechodzi do obiektu, nie jest ponownie przypisana do użytkownika. Const da błąd, jeśli spróbujesz zainstalować użytkownika i coś innego. Klonowanie i łączenie powoduje, że Object.assign tworzy kolejne łącze do tego samego obiektu, jeśli chcesz go powielić. Jest to również wykonalne, ale nieco bardziej skomplikowane, ponieważ JavaScript nie ma wbudowanej metody. W rzeczywistości rzadko jest to konieczne. Kopiowanie według odniesienia jest używane w większości przypadków. Ale jeśli naprawdę tego potrzebujesz, musisz utworzyć obiekt JavaScript i zreplikować strukturę istniejącego obiektu, kopiując jego właściwości na poziomie pierwotnym. Poniżej znajduje się przykład.

Możesz także użyć do tego metody Object.assign. Argumenty dest i src1, ..., srcN są obiektami. Kopiuje właściwości wszystkich src1, ..., srcNINTO dest. Innymi słowy, właściwości wszystkich argumentów, począwszy od drugiego, są kopiowane do pierwszej. Następnie wraca do dest. Można na przykład użyć go do połączenia kilku obiektów w jeden.

Możesz także użyć Object.assign, aby zastąpić prostą pętlę klonowania. Kopiuje wszystkie właściwości użytkownika do pustego obiektu i zwraca go, podobnie jak pętlę, ale w skrócie. Do tej pory zakładano, że wszystkie właściwości użytkownika są prymitywne. Ale właściwości mogą być odniesieniami do innych obiektów.

Aby to naprawić, musisz użyć cyklu klonowania, który sprawdza każdą wartość użytkownika [klucz], a jeśli jest to obiekt, replikuje jego strukturę. Nazywa się to "głębokim klonowaniem".

Istnieje standardowy algorytm głębokiego klonowania, który obsługuje powyższy przypadek i bardziej złożone przypadki, zwane algorytmem klonowania Strukturalnego. Aby nie odkrywać na nowo koła, możesz użyć działającej implementacji z biblioteki JavaScript LASA, metody o nazwie _.cloneDeep (obj).

Zaawansowane metody

Jeśli programista zapętli się nad obiektem i spróbuje uzyskać wszystkie właściwości w tej samej kolejności, w jakiej zostały dodane, może polegać na "porządkowaniu w specjalny sposób", gdy właściwości liczb całkowitych są sortowane, a inne tworzone są w kolejności tworzenia obiektu JavaScript.

Zaawansowane metody obiektowe radzą sobie z pojęciami rzadko używanymi w JavaScriptingu. Wynika to z faktu, że w normalnych sytuacjach te potężne funkcje nie są potrzebne. Niektóre z tych metod mogą nie działać w starszych przeglądarkach, takich jak wczesne wersje Netscape 4.

Używając prototypu można zastosować do tworzenia obiektów JavaScript i wszystkich metod mycircle, a nie tylko nowych. Daje to mieszany ładunek wydajności. Nie muszą przechowywać oddzielnych kopii metod dla każdej instancji obiektu, więc może to zająć mniej pamięci do pracy, ale przeglądarka musi wyszukać bieżące i nadrzędne obszary, aby je znaleźć. Może to spowodować maksymalne opóźnienie. Zazwyczaj użytkownik powinien używać tego, co jest odpowiednie dla kodu, a nie opierać tej decyzji na wydajności, chyba że ma do czynienia z bardzo ściśle kontrolowanym środowiskiem.

Zwróć true

W niektórych przypadkach może być konieczne, aby właściwość obiektu była związana z samym obiektem lub gdzieś w łańcuchu prototypów. W JavaScript wszystkie obiekty korzystają z metody hasOwnProperty, która zwraca wartość true, jeśli ta właściwość jest powiązana z wystąpieniem pojedynczego obiektu. W tym przypadku możliwe jest sprawdzenie, czy konstruktor obiektu ma tę samą właściwość o tej samej wartości, co sama instancja obiektu. Może to dać nieprawidłowy wynik, jeśli istnieją oddzielne właściwości obiektu JavaScript o tej samej wartości zarówno dla instancji obiektu, jak i łańcucha prototypów. Metoda hasOwnProperty przyjmuje jeden parametr - nazwę właściwości jako ciąg.

Podobnie możesz tworzyć prywatne metody. Jest to po prostu funkcja, która jest tworzona wewnątrz funkcji konstruktora. Niektórym może wydawać się zagmatwany, ale tak to działa. Funkcja prywatna może być wywoływana tylko przez sam konstruktor lub przez metody zdefiniowane w łańcuchu. Mogą być używane jako metody publiczne, jeśli są przypisane do publicznego konstruktora i są dostępne za pomocą publicznych metod obiektów JavaScript.

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

} var secretValue = '';

this.method1 = function () {secretValue = "bez niespodzianek";

cantBeSeen ();

};

this.method2 = cantBeSeen;

} var oneOb = new myob ();

oneOb.method1 ();

// powiadamia "nie ma niespodzianek" oneOb.method2 ();

// powiadamia "żadnych niespodzianek".

Wzór polecenia

Obiekty poleceń pozwalają luźno powiązanym systemom oddzielać te, które pobierają żądania od obiektów i w rzeczywistości przetwarzają żądanie. Te żądania są nazywane zdarzeniami, a kod obsługujący żądania nazywa się procedurami obsługi zdarzeń.

Załóżmy, że tworzone są aplikacje obsługujące akcje schowka Wytnij, Kopiuj i Wklej. Te działania można uruchamiać na różne sposoby w całej aplikacji: system menu, menu kontekstowe, na przykład klikając prawym przyciskiem myszy pole tekstowe lub używając skrótu. Obiekty poleceń umożliwiają scentralizowanie przetwarzania tych działań, po jednym dla każdej operacji, gdy potrzebujesz tylko jednego polecenia do przetworzenia wszystkich żądań wycięcia, jednego dla wszystkich żądań kopiowania i jednego dla wszystkich żądań wklejania.

Ponieważ polecenia centralizują całe przetwarzanie, często uczestniczą również w przetwarzaniu funkcji cofania dla całej aplikacji. Znaczące usprawnienia można osiągnąć dzięki zastosowaniu nowoczesnych metod JavaScript, co prowadzi do tworzenia bardziej wydajnych, niezawodnych i obsługiwanych aplikacji.

Aby dowiedzieć się, jak to zrobić, możesz użyć szablonów JavaScript + jQuery. Ten unikalny pakiet zawiera zoptymalizowany JavaScript dla wszystkich szablonów GoF przy użyciu bardziej zaawansowanych funkcji, takich jak przestrzenie nazw, prototypy, moduły, obiekty funkcjonalne, zamknięcia, funkcje anonimowe i inne. Jeśli użytkownicy potrzebują najnowszych narzędzi i metod dla szablonów JavaScript, szablonów jQuery i architektur szablonów, to jest to najlepszy przypadek użycia. Ten pakiet zawiera cenne i aktualne informacje dla programistów JavaScript. Oto, co zawiera:

1. Zoptymalizowane pod kątem JavaScript szablony GoF.
2. Nowoczesne wzorce projektowe JavaScript.
3. Wzorce projektowe widoku modelu.
4. Szablony projektów JQuery.
5. Szablony architektoniczne Idiomy języka JavaScript.
6. Przykłady zastosowań (MVC, SPA itp.)

Proponowane podstawy składni obiektów JavaScript są bardzo ważne dla początkujących programistów. Najpierw musisz zrozumieć obiekty, wtedy będzie wiedza o programowaniu obiektowym. Niezwykle ważne jest, aby mieć głębokie zrozumienie tego materiału, ponieważ jest to podstawa dla pozostałej części języka JavaScript.