web-dev-qa-db-fra.com

Que signifie "var FOO = FOO || {}" (affecter une variable ou un objet vide à cette variable) en Javascript?

En regardant un code source en ligne, je suis tombé sur celui-ci en haut de plusieurs fichiers source.

var FOO = FOO || {};
FOO.Bar = …;

Mais je n'ai aucune idée de ce que fait || {}.

Je sais que {} Est égal à new Object() et je pense que || Est pour quelque chose comme "s'il existe déjà utilisez sa valeur sinon utilisez le nouvel objet.

Pourquoi verrais-je cela en haut d'un fichier source?

javascriptnamespacesvariable-declarationor-operator
93
Ricardo Sanchez

Votre supposition quant à l'intention de || {} Est assez proche.

Ce modèle particulier, vu en haut des fichiers, est utilisé pour créer un namespace, c'est-à-dire un objet nommé sous lequel des fonctions et des variables peuvent être créées sans polluer indûment l'objet global.

La raison pourquoi qu'il est utilisé est que si vous avez deux (ou plus) fichiers:

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

et

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

qui partagent tous les deux le même espace de noms, peu importe dans quel ordre les deux fichiers sont chargés, vous obtenez toujours func1 et func2 correctement définis dans l'objet MY_NAMESPACE correctement .

Le premier fichier chargé sera créer l'objet initial MY_NAMESPACE, Et tout fichier chargé par la suite augmentera l'objet.

Utilement, cela permet également asynchrone de charger des scripts qui partagent le même espace de noms, ce qui peut améliorer les temps de chargement des pages. Si les balises <script> Ont l'attribut defer défini, vous ne pouvez pas savoir dans quel ordre elles seront interprétées, donc comme décrit ci-dessus, cela résout également ce problème.

147
Alnitak
var AEROTWIST = AEROTWIST || {};

Fondamentalement, cette ligne dit de définir la variable AEROTWIST sur la valeur de la variable AEROTWIST, ou de la définir sur un objet vide.

Le double tuyau || est une instruction OR, et la deuxième partie de OR n'est exécutée que si la première partie renvoie false).

Par conséquent, si AEROTWIST a déjà une valeur, elle sera conservée comme cette valeur, mais si elle n'a pas été définie auparavant, elle sera définie comme un objet vide.

c'est essentiellement la même chose que de dire ceci:

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

J'espère que cela pourra aider.

21
Spudley

Il y a deux parties principales qui var FOO = FOO || {}; couvertures.

# 1 Empêcher les remplacements

Imaginez que votre code soit réparti sur plusieurs fichiers et que vos collègues travaillent également sur un objet appelé FOO. Ensuite, cela pourrait conduire au cas où quelqu'un a déjà défini FOO et lui a assigné des fonctionnalités (comme une fonction skateboard). Ensuite, vous le remplaceriez si vous ne vérifiiez pas s'il existe déjà.

Cas problématique:

// 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!');
};

Dans ce cas, la fonction skateboard disparaîtra si vous chargez le fichier JavaScript homer.js après bart.js dans votre code HTML car Homer définit un nouvel objet FOO (et remplace ainsi celui existant de Bart) afin qu'il ne connaisse que la fonction donut.

Vous devez donc utiliser var FOO = FOO || {}; ce qui signifie "FOO sera affecté à FOO (s'il existe déjà) ou à un nouvel objet vide (si FOO n'existe pas déjà).

Solution:

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!');
};

Étant donné que Bart et Homer vérifient maintenant l'existence de FOO avant de définir leurs méthodes, vous pouvez charger bart.js et homer.js dans n'importe quel ordre sans remplacer les méthodes des autres (s'ils ont des noms différents). Ainsi, vous obtiendrez toujours un objet FOO qui a les méthodes skateboard et donut (Yay!).

# 2 Définition d'un nouvel objet

Si vous avez lu le premier exemple, vous savez déjà à quoi sert le || {}.

Parce que s'il n'y a pas d'objet FOO existant, le cas OR devient actif et crée un nouvel objet, vous pouvez donc lui affecter des fonctions. Comme:

var FOO = {};

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

Une autre utilisation courante pour || consiste à définir également une valeur par défaut pour un paramètre de fonction non défini:

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

L'équivalent dans d'autres programmes est généralement:

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

S'il n'y a pas de valeur dans AEROTWIST ou si elle est nulle ou non définie, la valeur affectée au nouvel AEROTWIST sera {} (un objet vide)

3
sudipto

Le || L'opérateur prend deux valeurs:

a || b

Si a est véridique , il renverra a. Sinon, il renverra b.

Les valeurs fausses sont null, undefined, 0, "", NaN et false. Les valeurs véridiques sont tout le reste.

Donc, si a n'a pas été défini (est-ce undefined), il renverra b.

1
pimvdb