utilizan - ¿Qué significa "var FOO=FOO ||{} "(Asignar una variable o un objeto vacío a esa variable) significa en Javascript?

namespace javascript

Question

Al mirar un código fuente en línea, encontré esto en la parte superior de varios archivos fuente.

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

Pero no tengo idea de qué || {} || {} hace

Sé que {} es igual a un new Object() y creo que || es para algo así como "si ya existe use su valor else use el nuevo objeto".

¿Por qué debería ver esto en la parte superior de un archivo fuente?

Answer 1

Adivinas cuál es la intención de || {} || {} está bastante cerca.

Este patrón particular, cuando se ve en la parte superior de los archivos, se usa para crear un espacio de nombre , es decir, un objeto nombrado bajo el cual se pueden crear funciones y variables sin contaminar indebidamente el objeto global.

La razón por la que se usa es para que, si tiene dos (o más) archivos:

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

y

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

los cuales comparten el mismo espacio de nombre, entonces no importa en qué orden se carguen los dos archivos, aún así se obtienen func1 y func2 correctamente definidos dentro del objeto MY_NAMESPACE correctamente.

El primer archivo cargado creará el objeto MY_NAMESPACE inicial, y cualquier archivo cargado posteriormente aumentará el objeto.

De manera útil, esto también permite la carga asíncrona de scripts que comparten el mismo espacio de nombres, lo que puede mejorar los tiempos de carga de la página. Si las etiquetas <script> tienen el atributo defer establecido, no se puede saber en qué orden se interpretarán, por lo que como se describió anteriormente, esto también soluciona ese problema.

Answer 2

El || el operador toma dos valores:

a || b

Si a es truthy , devolverá a . De lo contrario, volverá b .

Los valores de falsy son null , undefined , 0 , "" , NaN y false . Los valores verdaderos son todo lo demás.

Entonces, si a no se ha establecido (¿está undefined ) undefined b .

Answer 3

Hay dos partes principales que var FOO = FOO || {}; var FOO = FOO || {}; cubiertas.

# 1 Prevención de anulaciones

Imagine que tiene su código dividido en varios archivos y sus compañeros de trabajo también están trabajando en un objeto llamado FOO . Entonces podría llevar al caso que alguien ya haya definido FOO y le haya asignado una funcionalidad (como una función de skateboard ). Entonces lo anularía, si no estuviera comprobando si ya existe.

Caso problemático:

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

En este caso, la función de skateboard desaparecerá si carga el archivo JavaScript homer.js después de bart.js en su HTML porque Homer define un nuevo objeto FOO (y por lo tanto anula el existente de Bart) para que solo sepa sobre la función donut . .

Entonces necesitas usar var FOO = FOO || {}; var FOO = FOO || {}; lo que significa que "FOO se asignará a FOO (si ya existe) o un nuevo objeto en blanco (si FOO ya no existe).

Solución:

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

Como Bart y Homer ahora están comprobando la existencia de FOO antes de definir sus métodos, puede cargar bart.js y homer.js en cualquier orden sin anular los métodos de los demás (si tienen nombres diferentes). Así que siempre obtendrás un objeto FOO que tiene los métodos skateboard y donut (¡Yay!).

# 2 Definir un nuevo objeto

Si has leído el primer ejemplo, entonces ya sabes cuál es el propósito de || {} || {} .

Porque si no hay un objeto FOO existente, entonces el caso OR se activará y creará un nuevo objeto, por lo que puede asignarle funciones. Me gusta:

var FOO = {};

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

Answer 4

Otro uso común para || es establecer un valor predeterminado para un parámetro de función indefinido también:

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

El equivalente en otra programación generalmente es:

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

Answer 5

Si no hay ningún valor en AEROTWIST o es nulo o indefinido, el valor asignado a la nueva AEROTWIST será {} (un objeto en blanco)

Answer 6

Tenga en cuenta que en algunas versiones de IE este código no funcionará como se esperaba. Debido a que var , la variable se redefine y se asigna de manera que, si recuerdo correctamente el problema, terminará teniendo siempre un objeto nuevo. Eso debería solucionar el problema:

var AEROTWIST;
AEROTWIST = AEROTWIST || {};

Answer 7

var AEROTWIST = AEROTWIST || {};

Básicamente, esta línea dice establecer la variable AEROTWIST al valor de la variable AEROTWIST , o establecerla en un objeto vacío.

El doble tubo || es una declaración OR, y la segunda parte del OR solo se ejecuta si la primera parte devuelve falso.

Por lo tanto, si AEROTWIST ya tiene un valor, se mantendrá como ese valor, pero si no se ha establecido antes, se establecerá como un objeto vacío.

es básicamente lo mismo que decir esto:

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

Espero que ayude.