Patrząc na kod źródłowy online, natknąłem się na to na początku kilku plików źródłowych.
var FOO = FOO || {};
FOO.Bar = …;
Ale nie mam pojęcia, co || {}
robi.
Wiem, że {}
jest równe new Object()
i myślę, że ||
jest to coś w stylu „jeśli już istnieje, użyj jego wartości, w przeciwnym razie użyj nowego obiektu.
Dlaczego miałbym to widzieć na początku pliku źródłowego?
javascript
namespaces
variable-declaration
or-operator
Ricardo Sanchez
źródło
źródło
Odpowiedzi:
Twoje przypuszczenie co do zamiaru
|| {}
jest dość bliskie.Ten szczególny wzorzec, widziany na górze plików, jest używany do tworzenia przestrzeni nazw , tj. Nazwanego obiektu, w którym można tworzyć funkcje i zmienne bez nadmiernego zanieczyszczania obiektu globalnego.
Powód, dla którego jest używany, jest taki, że jeśli masz dwa (lub więcej) pliki:
i
z których oba mają tę samą przestrzeń nazw, wtedy nie ma znaczenia, w jakiej kolejności oba pliki są ładowane, nadal poprawnie otrzymujesz
func1
ifunc2
poprawnie zdefiniujesz wMY_NAMESPACE
obiekcie.Pierwszy załadowany plik utworzy
MY_NAMESPACE
obiekt początkowy , a każdy później załadowany plik rozszerzy obiekt.Przydatnie, pozwala to również na asynchroniczne ładowanie skryptów, które mają tę samą przestrzeń nazw, co może skrócić czas ładowania strony. Jeśli
<script>
tagi majądefer
ustawiony atrybut, nie możesz wiedzieć, w jakiej kolejności będą interpretowane, więc jak opisano powyżej, rozwiązuje to również ten problem.źródło
||
jest również bardzo przydatny, gdy chcesz podać opcjonalne argumenty i zainicjować je do wartości domyślnych, jeśli nie zostaną podane:function foo(arg1, optarg1, optarg2) { optarg1 = optarg1 || 'default value 1'; optarg2 = optart2 || 'defalt value 2';}
||
operator nie może powiedziećundefined
zfalsey
.Zasadniczo ten wiersz mówi, że ustaw
AEROTWIST
zmienną na wartośćAEROTWIST
zmiennej lub ustaw ją na pusty obiekt.Podwójna kreska
||
to instrukcja OR, a druga część OR jest wykonywana tylko wtedy, gdy pierwsza część zwróci fałsz.Dlatego jeśli
AEROTWIST
już ma wartość, zostanie zachowana jako ta wartość, ale jeśli nie została wcześniej ustawiona, zostanie ustawiona jako pusty obiekt.to w zasadzie to samo, co powiedzenie tego:
Mam nadzieję, że to pomoże.
źródło
Inne powszechne zastosowanie || jest również ustawienie wartości domyślnej dla niezdefiniowanego parametru funkcji:
Odpowiednik w innych programach zwykle to:
źródło
var
przeda
,a
wprowadza kontekst wykonania funkcji jako parametr formalny , dlatego jest już zadeklarowany.Istnieją dwie główne części, które
var FOO = FOO || {};
obejmują.# 1 Zapobieganie zastąpieniom
Wyobraź sobie, że Twój kod jest podzielony na wiele plików, a Twoi współpracownicy również pracują nad obiektem o nazwie
FOO
. Wówczas mogłoby to doprowadzić do przypadku, że ktoś już zdefiniowałFOO
i przypisał mu funkcjonalność (np.skateboard
Funkcję). Wtedy nadpisałbyś go, gdybyś nie sprawdzał, czy już istnieje.Problematyczny przypadek:
W tym przypadku
skateboard
funkcja zniknie, jeśli załadujesz plik JavaScripthomer.js
późniejbart.js
w swoim HTML, ponieważ Homer definiuje nowyFOO
obiekt (i tym samym zastępuje istniejący z Bartka), więc wie tylko odonut
funkcji.Musisz więc użyć,
var FOO = FOO || {};
co oznacza „FOO zostanie przypisany do FOO (jeśli już istnieje) lub nowego pustego obiektu (jeśli FOO jeszcze nie istnieje).Rozwiązanie:
Ponieważ Bart i Homer sprawdzają teraz istnienie
FOO
metod, zanim zdefiniują swoje metody, możesz załadowaćbart.js
ihomer.js
w dowolnej kolejności bez zastępowania metod innych (jeśli mają różne nazwy). Więc zawsze otrzymaszFOO
obiekt, który ma metodyskateboard
idonut
(Yay!).# 2 Definiowanie nowego obiektu
Jeśli przeczytałeś pierwszy przykład, to już teraz wiesz, jaki jest cel
|| {}
.Ponieważ jeśli nie ma istniejącego
FOO
obiektu, przypadek OR stanie się aktywny i utworzy nowy obiekt, dzięki czemu możesz przypisać do niego funkcje. Lubić:źródło
Jeśli nie ma wartości w AEROTWIST lub jest ona pusta lub nieokreślona, wartość przypisana do nowego AEROTWIST będzie {} (pusty obiekt)
źródło
||
Użytkownik pobiera dwie wartości:Jeśli a jest prawdą , wróci
a
. W przeciwnym razie wrócib
.Wartości falsy są
null
,undefined
,0
,""
,NaN
ifalse
. Prawdziwe wartości to wszystko inne.Więc jeśli
a
nie został ustawiony (czy to jestundefined
), zwrócib
.źródło
||
JS (i Perlem) a wersją w C, C ++ i Javie jest to, że JS nie rzutuje wyniku na wartość logiczną. To wciąż operator logiczny.Zauważ, że w niektórych wersjach IE ten kod nie będzie działał zgodnie z oczekiwaniami. Ponieważ
var
zmienna jest przedefiniowana i przypisana, więc - jeśli dobrze pamiętam problem - zawsze będziesz mieć nowy obiekt. To powinno rozwiązać problem:źródło