Beim Betrachten eines Online-Quellcodes bin ich oben in mehreren Quelldateien darauf gestoßen.
var FOO = FOO || {};
FOO.Bar = …;
Aber ich habe keine Ahnung was || {}
macht.
Ich weiß, {}
ist gleich new Object()
und ich denke, das ||
ist für so etwas wie "Wenn es bereits existiert, benutze seinen Wert, sonst benutze das neue Objekt.
Warum sollte ich das oben in einer Quelldatei sehen?
javascript
namespaces
variable-declaration
or-operator
Ricardo Sanchez
quelle
quelle
Antworten:
Ihre Vermutung bezüglich der Absicht von
|| {}
ist ziemlich nah.Dieses spezielle Muster wird oben in Dateien verwendet, um einen Namespace zu erstellen , dh ein benanntes Objekt, unter dem Funktionen und Variablen erstellt werden können, ohne das globale Objekt übermäßig zu verschmutzen.
Der Grund, warum es verwendet wird, ist, dass wenn Sie zwei (oder mehr) Dateien haben:
und
Beide haben denselben Namespace, es spielt dann keine Rolle, in welcher Reihenfolge die beiden Dateien geladen werden. Sie erhalten
func1
undfunc2
werden dennoch korrekt imMY_NAMESPACE
Objekt definiert .Die erste geladene Datei erstellt das ursprüngliche
MY_NAMESPACE
Objekt, und jede anschließend geladene Datei erweitert das Objekt.Dies ermöglicht auch das asynchrone Laden von Skripten mit demselben Namespace, wodurch die Ladezeiten für Seiten verbessert werden können. Wenn für die
<script>
Tags dasdefer
Attribut festgelegt ist, können Sie nicht wissen, in welcher Reihenfolge sie interpretiert werden. Wie oben beschrieben, wird das Problem dadurch ebenfalls behoben.quelle
||
ist auch sehr nützlich, wenn Sie optionale Argumente bereitstellen und diese auffunction foo(arg1, optarg1, optarg2) { optarg1 = optarg1 || 'default value 1'; optarg2 = optart2 || 'defalt value 2';}
||
Operator nichtundefined
davon unterscheiden kannfalsey
.Grundsätzlich heißt es in dieser Zeile, die
AEROTWIST
Variable auf den Wert derAEROTWIST
Variablen oder auf ein leeres Objekt zu setzen.Die Doppelpipe
||
ist eine OR-Anweisung, und der zweite Teil des OR wird nur ausgeführt, wenn der erste Teil false zurückgibt.Wenn also
AEROTWIST
bereits ein Wert vorhanden ist, wird dieser Wert beibehalten. Wenn er jedoch noch nicht festgelegt wurde, wird er als leeres Objekt festgelegt.Es ist im Grunde dasselbe wie das zu sagen:
Hoffentlich hilft das.
quelle
Eine weitere häufige Verwendung für || ist, einen Standardwert für einen undefinierten Funktionsparameter festzulegen:
Das Äquivalent in anderen Programmen ist normalerweise:
quelle
var
vora
,a
gibt den Ausführungskontext der Funktion als formalen Parameter ein , daher ist er bereits deklariert.Es gibt zwei Hauptteile, die
var FOO = FOO || {};
abdecken.# 1 Überschreibungen verhindern
Stellen Sie sich vor, Sie haben Ihren Code auf mehrere Dateien aufgeteilt und Ihre Mitarbeiter arbeiten auch an einem Objekt namens
FOO
. Dann könnte es zu dem Fall kommen, dass jemand bereitsFOO
Funktionen definiert und zugewiesen hat (wie eineskateboard
Funktion). Dann würden Sie es überschreiben, wenn Sie nicht prüfen würden, ob es bereits existiert.Problematischer Fall:
In diesem Fall wird die
skateboard
wird Funktion weg , wenn Sie die JavaScript - Datei laden ,homer.js
nachdembart.js
in Ihrem HTML , weil Homer ein neues definiertFOO
Objekt (und damit überschreibt die bestehenden von Bart) , so dass es nur über die weiß -donut
Funktion.Sie müssen
var FOO = FOO || {};
also Folgendes verwenden : "FOO wird FOO zugewiesen (sofern es bereits vorhanden ist) oder einem neuen leeren Objekt (falls FOO noch nicht vorhanden ist).Lösung:
Da Bart und Homer sind nun für die Existenz der Überprüfung ,
FOO
bevor sie ihre Methoden definieren, können Sie ladenbart.js
undhomer.js
in beliebiger Reihenfolge ohne zwingende jeweils andere Methoden (wenn sie unterschiedliche Namen haben). Sie erhalten also immer einFOO
Objekt mit den Methodenskateboard
unddonut
(Yay!).# 2 Ein neues Objekt definieren
Wenn Sie das erste Beispiel durchgelesen haben, dann wissen Sie schon jetzt, wozu das dient
|| {}
.Wenn kein
FOO
Objekt vorhanden ist, wird der ODER-Fall aktiv und erstellt ein neues Objekt, sodass Sie ihm Funktionen zuweisen können. Mögen:quelle
Wenn AEROTWIST keinen Wert enthält oder null oder undefiniert ist, lautet der dem neuen AEROTWIST zugewiesene Wert {} (ein leeres Objekt).
quelle
Der
||
Operator nimmt zwei Werte an:Wenn a wahr ist , wird es zurückkehren
a
. Andernfalls wird es zurückgegebenb
.Die falsy Werte sind
null
,undefined
,0
,""
,NaN
undfalse
. Die wahrheitsgemäßen Werte sind alles andere.Wenn
a
es nicht eingestellt wurde (ist esundefined
), wird es zurückkehrenb
.quelle
||
JS (und Perl) und der Version in C, C ++ und Java besteht darin, dass JS das Ergebnis nicht in einen Booleschen Wert umwandelt . Es ist immer noch ein logischer Operator.Beachten Sie, dass dieser Code in einigen IE-Versionen nicht wie erwartet funktioniert. Da die
var
Variable neu definiert und zugewiesen wird, haben Sie - wenn ich mich richtig an das Problem erinnere - immer ein neues Objekt. Das sollte das Problem beheben:quelle