Przykłady obiektów JavaScript

Obiekty są kamieniem węgielnym javascript. Wbudowane typy danych są reprezentowane jako obiekty. Aby odnieść sukces jako programista javascript, musisz mieć jasny obraz tego, jak działają. Bloki konstrukcyjne obiektu nazywane są jego właściwościami pola 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 udostępnia składnię, nazywaną literałem obiektu, która jest reprezentowana przez nawiasy klamrowe.

Dostęp do właściwości

Język zapewnia dwa wpisy dostępu do właściwości. Pierwszy i najbardziej znany jako znakowanie punktowe. W przypadku zapisu punktowego dostęp do zasobu można uzyskać, określając nazwę hosta obiektu, a następnie kropkę i nazwę właściwości. Na przykład, gdy obiektowi object.foo początkowo przypisano wartość 1, jego wartość będzie równa 2 po wykonaniu operatora obiektu javascript.


Alternatywna składnia dostępu jest znana jako nawias. W notacji nazwy obiektu wystę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 ekspresyjny niż notacja punktowa, ponieważ pozwala zmiennej określić całą nazwę lub jej część. Jest to możliwe, ponieważ interpreter obiektów javascript automatycznie konwertuje wyrażenie na ciąg znaków, a następnie otrzymuje odpowiednią właściwość. Nazwy właściwości tworzone są "w locie" poprzez łączenie zawartości zmiennej f za pomocą ciągu "oo": var f = "f"; object [f + "oo"] = "bar". Dopuszczalne znacznikiNazwy właściwości zawierają znaki, które są zabronione przez notację punktową. Na przykład następny operator jest całkowicie legalny w nawiasach. Jeśli jednak użytkownik spróbuje utworzyć tę samą nazwę właściwości notacji punktowej, napotka błąd składni:

obiekt ["! @ # $% & Amp; * ()."] = Prawda. 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ść z paskiem nazwy pięć: var object = {baz: {foo: {bar: 5}}}. Następujące wyrażenia mają dostęp do zagnieżdżonej właściwości paska. Pierwsze wyrażenie używa notacji punktowej, 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;
  • obiekt ["baz"] ["foo"] ["bar"];
  • obiekt ["baz"]. Foo ["bar"].
  • Wyrażenia podobne do przedstawionych w poprzednim przykładzie mogą spowodować pogorszenie wydajności w przypadku niewłaściwego użycia i spowodować, że obiekt javascript zawiedzie. 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 zapisać wartość zmiennej lokalnej dla wszystkich przyszłych celów.

    Funkcja as method

    Kiedy funkcja jest używana jako właściwość obiektu, nazywa się ją metodą. Podobnie jak właściwości, są one oznaczone w notacji literałów obiektowych. Na przykład: var object = {sum: function (foo bar) {return foo + bar;}}. Metody obiektu javascript mogą być wywoływane zza pomocą tagów 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 ["suma"] (1 2).
  • Dosłowne oznaczenie obiektu jest przydatne do tworzenia nowych obiektów, ale nie może dodawać istniejących właściwości ani metod. Na szczęście dodanie nowych danych jest tak proste, jak utworzenie operatora 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 = zero;
  • object.baz = function () {return "hello from baz ()";}.
  • Kapsułkowanie programów

    Podstawową ideą programowania obiektowego jest dzielenie programów na mniejsze części, a każda z nich jest odpowiedzialna za zarządzanie własnym państwem. Dlatego pewna wiedza o tym, jak część programu działa, może być lokalna w tej części. Ktoś, kto pracuje nad resztą programu, nie powinien pamiętać ani nawet o tym wiedzieć. Ilekroć te lokalne dane się zmieniają, wystarczy tylko zaktualizować kod bezpośrednio wokół niego. Różne części takich programów współdziałają ze sobą poprzez interfejsy, ograniczone zestawy funkcji lub powiązania, 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 pewnego zestawu metod i właściwości. Właściwości, które są częścią interfejsu, nazywają się publicznie. Inni, którzy niepowinien odnosić się do kodu zewnętrznego, zwanego prywatnym.
    Wiele języków stwarza okazję do rozróżnienia między własnością publiczną i prywatną i nie pozwala kodowi zewnętrznemu na dostęp do prywatnych. javascript, znów podjął minimalistyczne podejście, jeszcze nie został 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 opisano w dokumentacji lub komentarzach. Zwyczajowo umieszcza się także symbol podkreślenia (_) 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

    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_1.jpeg [/thumb]
    Obiekt w nawiasach {} jest nazywane literałem obiektu. Możesz natychmiast umieścić pewne właściwości w nawiasach {}. Na przykład pary "klucz: wartość i tak dalej": niech użytkownik = {//nazwa obiektu: "Jan", //według klucza "nazwa" wartość sklepu "Jan" wiek: 30 //według klucza "wiek" wartość sklepu 30}. Właściwość ma klucz (znany również jako "nazwa" lub "id") przed dwukropkiem ":" i wartość po prawej stronie. Obiekt użytkownika ma dwie właściwości. Wynikowy obiekt javascript użytkownika z dwoma podpisanymi plikami oznaczonymi "name" i "age". W dowolnym momencie możesz dodawać, usuwać i czytać pliki z niego. Wartości właściwości są dostępne za pomocą notacji punktowej. Może być dowolnego rodzaju. Możesz dodać wartość logiczną. Aby usunąć właściwość, użyj polecenia delete w przypadku błędu obiektu javascript.

    Wszystkie obiekty błędów javascript są potomkami obiektu Błąd lubdziedziczony obiekt:
  • Błąd składni obiekt jest dziedziczony po błędzie obiektu.
  • JSON Parse Błąd pewnego typu błędu składniowego obiektu.
  • Aby lepiej zrozumieć, w jaki sposób aplikacje radzą sobie z błędami javascript, lepiej zapoznać się z javascriptem Airbrake, narzędziem do śledzenia błędów w czasie rzeczywistym i natychmiastowym zrozumieniem, co poszło nie tak z kodem javascript. Komunikaty o błędach, które użytkownik może otrzymać przed usunięciem obiektu javascript:
  • Zły znak kontrolny w literale łańcuchowym.
  • Zła postać w dosłownym dosłownym.
  • Słaby wynik Unicode.
  • Zły charakter ucieczki.
  • Niezakłócony ciąg.
  • Nieoczekiwany kod nienumeryczny.
  • Brak cyfr po przecinku.
  • Niezakończona liczba ułamkowa.
  • Brak danych po wskaźniku stopni.
  • Brak cyfr po znaku wykładnika.
  • Część wykładnicza nie ma liczb.
  • Niespodziewany koniec danych.
  • Nieoczekiwane słowo kluczowe.
  • Nieoczekiwany symbol.
  • Koniec danych podczas odczytu zawartości obiektu.
  • Oczekiwana nazwa właściwości lub "}".
  • Właściwości obliczeniowe

    Można 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 vichislima jest prosta: [owoc] oznacza, że ​​nazwa nieruchomości musi pochodzić z owoców. Tak więc, jeśli użytkownik wejdzie w "jabłko", worek będzie {jabłko: 5}. Możesz użyć bardziej złożonych wyrażeń w nawiasach kwadratowych: niech owoc = "jabłko"; let bag = {[fruit + 'Computers']: 5 //bag.appleComputers = 5};Nawiasy kwadratowe są znacznie mocniejsze niż etykiety punktowe. Pozwalają na nazwy i zmienne właściwości. Ale są też bardziej kłopotliwe w pisaniu. Ponieważ przez większość czasu, gdy nazwy właściwości są znane i proste, używana jest kropka. A jeśli potrzebujesz czegoś bardziej złożonego, przełącz się na kwadratowe nawiasy.

    Zastrzeżenie słowa

    Zmienna nie może mieć nazwy równej jednemu z zarezerwowanych słów, na przykład dla, let, return itp. Ale przy sortowaniu obiektów javascript nie ma takiego ograniczenia. .
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_2.jpeg [/thumb]
    Zasadniczo każda nazwa jest dozwolona , ale jest specjalna: "__proto__" otrzymuje specjalny apel ze względów historycznych. Na przykład możesz ustawić jego wartość różną od obiektu: let obj = {}; obj .__ proto__ = 5; alert (obj .__ proto__); //[obiekt obiektowy] nie działał zgodnie z założeniami Jak wynika z kodu, cel operacji podstawowej 5 jest ignorowany. 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ć obiekt javascript. Istnieje sposób, aby obiekty traktowane przez __proto__ jako zwykła właściwość. Istnieje również inna karta struktury danych, która obsługuje dowolne klucze.

    Właściwości całkowite

    Termin "właściwość całkowita" oznacza tutaj ciąg, który można przekształcić z całości bez modyfikacji. Na przykład "49" jest nazwą całej właściwości, ponieważ po przekonwertowaniu na liczbę całkowitą iz powrotem jest taka sama. Ale "+49" i "1.2" nie sątaki. Z drugiej strony, jeśli klawisze nie są liczbami całkowitymi, są one wymienione w porządku stworzenia. Przykład poniżej.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_3.jpeg [/thumb]
    Aby rozwiązać ten problem przy użyciu kodów telefonicznych, można " oszukać ", czyniąc kody nieuprawnionymi. Dodanie znaku "+" (plus) wystarcza przed każdym kodem. Teraz będzie działać jako spotkanie. Różnica prymitywnych obiektów jest to, że są one przechowywane i skopiowane „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 modyfikować jej zawartość.
    [kciuk] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_4.jpeg [/kciuka]
    W powyższym przykładzie wykazują, że istnieje tylko jeden obiekt i administrator, aby go wprowadzić. Następnie, jeśli później użyje innego klucza (użytkownika), użytkownik wykryje zmiany. Operatory równości == i ścisła równość === dla obiektów działają w ten sam sposób. Te dwa obiekty są równe, tylko jeśli są tym samym obiektem. Do porównań, takich jak obj1 & gt; obj2 lub porównać z obiektami pierwotnymi obj == 5 przekształca się w pierwotnych. Szczerze mówiąc, takie porównania są bardzo rzadkie i zwykle są wynikiem błędów kodowania.

    Sprawdzanie obiektu javascript

    Obiekty mają dostęp do dowolnej właściwości. Jeśli jednak w ogóle nie istnieje, nie będzie to pomyłka. Tylko dostęp do nieistniejących 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.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_5.jpeg [/thumb]
    Używanie «w» na właściwości, które pozostają niezdefiniowane . Zwykle dokładne "=== niezdefiniowane" sprawdzenie porównawcze działa dobrze. Jest specjalny przypadek, gdy zawiedzie, a "w" działa poprawnie. Dzieje się tak, gdy istnieje właściwość obiektu, ale pozostaje niezdefiniowana.
    [kciuk] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_6.jpeg [/kciuka]
    W powyższym kodu, nie jest technicznie właściwość obj.test . Dlatego operator działa poprawnie. Podobne sytuacje występują bardzo rzadko, ponieważ niezdefiniowane zwykle nie są przeznaczone. Zwykle używane są wartości puste "nieznane" lub "puste". Tak więc operator jest w rzeczywistości gościem w kodzie.

    Cykl koniunkcji

    Aby poruszać się wszystkimi klawiszami od obiektu do obiektu, istnieje specjalna forma pętli: forin. Jest to zupełnie inna rzecz w projektowaniu (;;). Poniżej znajduje się przykład.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_7.jpeg [/thumb]
    Należy zauważyć, że wszyscy projektanci «dla» pozwala zadeklarować zmienną pętli w pętli jak klawisz let. Zamiast tego możesz użyć innego klucza nazwy zmiennej. Na przykład dla (let prop in obj) jest również szeroko stosowany. Istnieje alternatywny "nawias kwadratowy", który działa z każdą linią.
    [kciuk] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_8.jpeg [/kciuka]
    W tym punkcie wymaga Javascript klucza o Obiekt był prawidłowym identyfikatorem zmiennej, czyli nie ma spacji ani innych ograniczeń. Należy zwrócić uwagę, że linia w nawiasach została prawidłowo zacytowana. Nawiasy kwadratowe również zapewniają sposób na uzyskanie tegoNazwa właściwości w wyniku jakiegokolwiek wyrazu, w przeciwieństwie do dosłownych Strings - zmiennej: niech kluczowe = „lubi ptaki”; //tak samo jak użytkownik ["likes birds"] = true; user [key] = true Ta zmienna klucz może być obliczona w czasie wykonywania, w zależności od danych wprowadzonych przez użytkownika, i będą wykorzystywane do uzyskania dostępu do właściwości. Daje to programistom większą elastyczność. notacja precyzyjnego może być użyta w podobny sposób, jak biust obiekt JavaScript. Poniżej znajduje się przykład.
    [kciuk] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_9.jpeg [/kciuka],

    przeznaczony konstrukcyjna

    Deklarowany obiekt const można zmienić. Przykład podano poniżej.
    [kciuk] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_10.jpeg [/kciuka]
    Wydaje się, że linia przedmiotem JavaScript (*) spowoduje błąd, ale tak nie jest. Dzieje się tak, ponieważ const przechwytuje wartość samego użytkownika. A następnie użytkownik utrzymuje link do tego samego obiektu przez cały czas. Linia (*) trafia do wnętrza obiektu, nie zajmuje użytkownika. Const popełni błąd, jeśli spróbujesz zainstalować użytkownika i coś innego. Klonowanie i fusion, Object.assign tworzy inny link do tego samego obiektu, jeśli chcesz go powielać. Jest to również wykonalne, ale nieco bardziej skomplikowane, ponieważ javascript nie ma wbudowanej metody. W rzeczywistości jest to rzadkie. Kopiowanie według linku jest używane w większości przypadków. Ale jeśli naprawdę potrzebujesz, a następnie należy utworzyć javascript obiektu i skopiować istniejącą strukturę, kopiowanie właściwości na prymitywnym poziomie. Poniżej znajduje się przykład.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_11.jpeg [/thumb]
    Można również użyć tej metody Object.assign . Argumenty dest i src1, srcN są obiektami.Kopiuje właściwości wszystkich obiektów src1, srcNINTO dest. Innymi słowy, właściwości wszystkich argumentów, począwszy od drugiego, są kopiowane w pierwszym. Potem wraca do dest. Na przykład możesz go użyć do scalenia wielu obiektów w jeden.
    [kciuk] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_12.jpeg [/kciuka],
    , a także może być wykorzystywany do cyklu wymiany Object.assign proste klonowanie. kopiuje wszystkie właściwości pustego obiektu użytkownika i zwraca go, a także cyklu, ale krótszy. Do tej pory zakładano, że wszystkie właściwości użytkownika są prymitywne. Ale właściwości mogą być linkami do innych obiektów. Aby rozwiązać ten problem, musimy wykorzystać klonowanie cyklu, który sprawdza każdego użytkownika wartość klawisz [], a jeśli obiekt następnie powtarza jego strukturę. Nazywa się to "głębokim klonowaniem". Jest to standardowy algorytm do głębokiego klonowania, która obsługuje powyższy przypadku bardziej skomplikowanych przypadkach algorytm o nazwie klonowanie strukturyzowanych. Aby nie wyważać otwartych drzwi, można korzystać z biblioteki implementacja roboczej lodash JavaScript, metody nazywanej _.cloneDeep (obj).

    Zaawansowane metody

    Jeśli umocowania programator obiektu i poszukiwania wszystkie właściwości w kolejności, w jakiej są dodawane, mogą polegać na „organizuje specjalne”, gdy całkowite właściwości wymienione, podczas gdy inne tworzą w kolejności tworzenia obiektu javascript. Zaawansowane techniki 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 byćdziała w starszych przeglądarkach, takich jak wczesne wersje Netscape 4. Za pomocą prototypu można tworzyć obiekty javascript i wszystkie metody mycircle, a nie tylko nowe. Daje to mieszane obciążenie 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 aby je wyszukać, przeglądarka powinna szukać bieżących i nadrzędnych obszarów. Może to prowadzić do maksymalnego opóźnienia. Z reguły użytkownik musi używać tego, co jest odpowiednie dla kodu, a nie opierać go na wydajności, chyba że ma bardzo ściśle kontrolowane środowisko.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_13.jpeg [/thumb]

    Zwróć true

    W niektórych 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 prototypu. W javascript wszystkie obiekty korzystają z metody hasOwnProperty, która zwraca wartość true, jeśli ta właściwość jest powiązana z instancją pojedynczego obiektu. W takim przypadku możliwe jest sprawdzenie, czy konstruktor obiektu ma tę samą właściwość o tej samej wartości co instancja samego obiektu. Może to dać nieprawidłowy wynik, jeśli istnieją osobne właściwości obiektu javascript z tą samą wartością dla instancji obiektu i prototypu łańcucha. Metoda hasOwnProperty przyjmuje jeden parametr - nazwę właściwości w postaci ciągu.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-09/obyekti-javascript-prikladi_14.jpeg [/thumb]
    Podobnie możesz tworzyć prywatne metody. To jest tylko funkcja, która jest tworzonafunkcja wewnętrznego konstruktora. Dla kogoś może wydawać się to mylące, ale tak to działa. Funkcja prywatna może być wywołana tylko przez sam konstruktor lub metodami zdefiniowanymi w linii. Mogą być używane jako publiczne metody, jeśli są przypisane do publicznego konstruktora i dostępne za pomocą otwartych metod obiektów javascript. function myob () {function cantBeSeen () {alert (secretValue); } Var secretValue = „; this.method1 = funkcja () {secretValue = 'niespodzianek; cantBeSeen ()}; this.method2 = cantBeSeen;} var oneOb = nowy MYOB (); oneOb.method1 () //oneOb.method2 alerty bez niespodzianek '();. „//alerty bez niespodzianek”

    Polecenie Szablon

    obiekty poleceń pozwalają luźno systemu, dzieląc te wydające wniosek obiektów faktycznie leczonych żądanie. wnioski te nazywane są zdarzenia, a kod obsługuje żądania, zwany obsługi zdarzeń. Załóżmy tworzone programy wspierające działania schowka Wytnij, Kopiuj i Wklej. działania te mogą być prowadzone w różny sposób w całej aplikacji, menu, menu kontekstowe na przykład kliknięcie annyam prawym przyciskiem myszy w polu tekstowym lub kombinacji klawiszy. obiekty poleceń pozwala na centralizację przetwarzania tych etapów, po jednym dla każdej operacji, które wymagają tylko jeden zespół do obsługi wszystkich zapytań Cut, jeden dla wszystkich wniosków dotyczących uzyskania kopii i wszystkich zapytań Wklej Ponieważ zespoły centralizują cały proces przetwarzania, często są również zaangażowane w przetwarzanie funkcji anulowania dla całego programu. Znaczącą poprawę można osiągnąć poprzez zastosowanie nowoczesnych metod JavaScript, co prowadzi do bardziej efektywnych, niezawodnych i obsługiwanych aplikacji. Aby dowiedzieć się, jak to jestmożesz używać szablonów javascript + jQuery. Ten unikalny pakiet zawiera zoptymalizowane JavaScript dla wszystkich wzorów GOF z bardziej zaawansowanych funkcji, takich jak przestrzenie nazw, prototypów, modułów funkcjonalnych obiektów, zamknięcia, funkcje anonimowe i więcej. Jeżeli użytkownicy potrzebują nowych narzędzi i metod szablonu JavaScript, jQuery i szablonów architektur szablonu, to jest to najlepsza opcja do wykorzystania. Pakiet ten zawiera wartościowe, istotne informacje dla programistów JavaScript. Oto, co obejmuje:
  • JavaScript zoptymalizowane szablony GOF.
  • Nowoczesne szablony do projektowania javascript.
  • Szablony projektów z podglądem modelu.
  • szablony projektów jQuery.
  • szablony architektury Javascript idiomĂłw.
  • Przykłady zastosowań (MVC SPA itd. Itd.)
  • Zaproponowane zasady składni JavaScript obiekty są bardzo ważne dla początkujących programistów. Konieczne jest, aby najpierw zrozumieć obiektów, wtedy nie będzie znajomość programowania obiektowego. Ważne jest, aby mieć głębokie zrozumienie materiału, gdyż jest podstawą do reszty języka JavaScript.

    Powiązane publikacje