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

var AEROTWIST = AEROTWIST || {};

fondamentalement, cette ligne dit de régler la variable AEROTWIST à la valeur de la variable AEROTWIST , ou de la régler à un objet vide.

la double pipe || est une instruction ou, et la seconde partie de la ou n'est exécutée que si la première partie retourne 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 avant, alors elle sera définie comme vide objet.

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

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

Espère que ça aide.

une autre utilisation courante pour || est de définir une valeur par défaut pour un paramètre de fonction non défini aussi:

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 habituellement:

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

il y a deux parties principales que var FOO = FOO || {}; couvre.

# 1 prévenir les dérogations

Imaginez que vous ayez votre code divisé en plusieurs fichiers et que vos collègues travaillent aussi sur un objet appelé FOO . Cela pourrait conduire au cas où quelqu'un aurait déjà défini FOO et lui aurait assigné une fonctionnalité (comme une fonction skateboard ). Alors vous l'annuleriez, si vous ne vérifiiez pas si 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 HTML parce que Homer définit un nouvel objet FOO (et remplace ainsi L'objet existant de Bart) de sorte qu'il ne connaît que la fonction donut .

vous devez donc utiliser var FOO = FOO || {}; qui signifie "FOO sera attribué à TOTO (si elle existe déjà) ou d'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!');
};

parce 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 passer par dessus les méthodes de l'autre (s'ils ont des noms différents). Vous obtiendrez donc 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, alors vous avez déjà maintenant quel est le but du || {} .

parce que s'il n'y a pas d'objet FOO existant, alors L'or-case deviendra actif et créera un nouvel objet, de sorte que vous pourrez lui attribuer des fonctions. Comme:

var FOO = {};

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

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

l'opérateur || prend deux valeurs:

a || b

Si a est truthy , il retournera a . Sinon, il retournera b .

les valeurs de falsy sont null , undefined , 0 , "" , NaN et false . Les valeurs vraies sont tout le reste.

donc si a n'a pas été défini (est-ce undefined ) il sera retournez b .

notez que dans une certaine version de IE ce code ne fonctionnera pas comme prévu. Parce que le var , la variable est redéfinie et assigné ainsi – si je me souviens bien de la question – vous finirez par avoir toujours un nouvel objet. Cela devrait régler la question:

var AEROTWIST;
AEROTWIST = AEROTWIST || {};