Was bedeutet „var FOO = FOO || {} ”(Dieser Variablen eine Variable oder ein leeres Objekt zuweisen) bedeutet in Javascript?

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?

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:

var MY_NAMESPACE = MY_NAMESPACE || {};
MY_NAMESPACE.func1 = {
}

und

var MY_NAMESPACE = MY_NAMESPACE || {};
MY_NAMESPACE.func2 = {
}

Beide haben denselben Namespace, es spielt dann keine Rolle, in welcher Reihenfolge die beiden Dateien geladen werden. Sie erhalten func1und func2werden dennoch korrekt im MY_NAMESPACEObjekt definiert .

Die erste geladene Datei erstellt das ursprüngliche MY_NAMESPACEObjekt, 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 das deferAttribut festgelegt ist, können Sie nicht wissen, in welcher Reihenfolge sie interpretiert werden. Wie oben beschrieben, wird das Problem dadurch ebenfalls behoben.

var AEROTWIST = AEROTWIST || {};

Grundsätzlich heißt es in dieser Zeile, die AEROTWISTVariable auf den Wert der AEROTWISTVariablen 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 AEROTWISTbereits 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:

if(!AEROTWIST) {var AEROTWIST={};}

Hoffentlich hilft das.

Eine weitere häufige Verwendung für || ist, einen Standardwert für einen undefinierten Funktionsparameter festzulegen:

function display(a) {
  a = a || 'default'; // here we set the default value of a to be 'default'
  console.log(a);
}

// we call display without providing a parameter
display(); // this will log 'default'
display('test'); // this will log 'test' to the console

Das Äquivalent in anderen Programmen ist normalerweise:

function display(a = 'default') {
  // ...
}

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 bereits FOOFunktionen definiert und zugewiesen hat (wie eine skateboardFunktion). Dann würden Sie es überschreiben, wenn Sie nicht prüfen würden, ob es bereits existiert.

Problematischer Fall:

// Definition of co-worker "Bart" in "bart.js"
var FOO = {};

FOO.skateboard = function() {
  alert('I like skateboarding!');
};

// Definition of co-worker "Homer" in "homer.js"
var FOO = {};

FOO.donut = function() {
  alert('I like donuts!');
};

In diesem Fall wird die skateboardwird Funktion weg , wenn Sie die JavaScript - Datei laden , homer.jsnachdem bart.jsin Ihrem HTML , weil Homer ein neues definiert FOOObjekt (und damit überschreibt die bestehenden von Bart) , so dass es nur über die weiß - donutFunktion.

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:

var FOO = FOO || {};

// Definition of co-worker Bart in bart.js
FOO.skateboard = function() {
  alert('I like skateboarding!');
};

// Definition of co-worker Homer in homer.js
var FOO = FOO || {};

FOO.donut = function() {
  alert('I like donuts!');
};

Da Bart und Homer sind nun für die Existenz der Überprüfung , FOObevor sie ihre Methoden definieren, können Sie laden bart.jsund homer.jsin beliebiger Reihenfolge ohne zwingende jeweils andere Methoden (wenn sie unterschiedliche Namen haben). Sie erhalten also immer ein FOOObjekt mit den Methoden skateboardund donut(Yay!).

# 2 Ein neues Objekt definieren

Wenn Sie das erste Beispiel durchgelesen haben, dann wissen Sie schon jetzt, wozu das dient || {}.

Wenn kein FOOObjekt vorhanden ist, wird der ODER-Fall aktiv und erstellt ein neues Objekt, sodass Sie ihm Funktionen zuweisen können. Mögen:

var FOO = {};

FOO.skateboard = function() {
  alert('I like skateboarding!');
};

Wenn AEROTWIST keinen Wert enthält oder null oder undefiniert ist, lautet der dem neuen AEROTWIST zugewiesene Wert {} (ein leeres Objekt).

Der ||Operator nimmt zwei Werte an:

a || b

Wenn a wahr ist , wird es zurückkehren a. Andernfalls wird es zurückgegeben b.

Die falsy Werte sind null, undefined, 0, "", NaNund false. Die wahrheitsgemäßen Werte sind alles andere.

Wenn aes nicht eingestellt wurde (ist es undefined), wird es zurückkehren b.

Beachten Sie, dass dieser Code in einigen IE-Versionen nicht wie erwartet funktioniert. Da die varVariable neu definiert und zugewiesen wird, haben Sie - wenn ich mich richtig an das Problem erinnere - immer ein neues Objekt. Das sollte das Problem beheben:

var AEROTWIST;
AEROTWIST = AEROTWIST || {};