¿Cómo declarar una variable global en JavaScript?

Respuestas:

215

Si tiene que generar variables globales en el código de producción (que debe evitarse), declare siempre explícitamente :

window.globalVar = "This is global!";

Si bien es posible definir una variable global simplemente omitiendo var(suponiendo que no haya una variable local con el mismo nombre), hacerlo genera una global implícita , lo cual es algo malo y generaría un error en modo estricto .

Felix Kling
fuente
windowestá disponible solo en navegadores. ¿Podría editar su respuesta para que funcione en todos los entornos? Consulte ¿Cómo obtener el objeto global en JavaScript?
Michał Perłakowski
52

Si esta es la única aplicación en la que va a utilizar esta variable, el enfoque de Felix es excelente. Sin embargo, si está escribiendo un complemento jQuery, considere las variables y funciones de "espacio de nombres" (detalles sobre las comillas más adelante ...) necesarias bajo el objeto jQuery. Por ejemplo, actualmente estoy trabajando en un menú emergente jQuery que he llamado miniMenu. Por lo tanto, he definido un "espacio de nombres" miniMenuen jQuery, y coloco todo allí.

La razón por la que uso comillas cuando hablo de los espacios de nombres de JavaScript es que en realidad no son espacios de nombres en el sentido normal. En cambio, solo uso un objeto javascript y coloco todas mis funciones y variables como propiedades de este objeto.

Además, por conveniencia, generalmente subespacio el espacio de nombres del complemento con un iespacio de nombres para cosas que solo deben usarse internamente dentro del complemento, para ocultarlo de los usuarios del complemento.

Así es como funciona:

// An object to define utility functions and global variables on:
$.miniMenu = new Object(); 
// An object to define internal stuff for the plugin:
$.miniMenu.i = new Object();

Ahora solo puedo hacer $.miniMenu.i.globalVar = 3o $.miniMenu.i.parseSomeStuff = function(...) {...}cada vez que necesito guardar algo globalmente, y aún lo mantengo fuera del espacio de nombres global.

Tomás Aschan
fuente
Gracias por eso, Tomás. En el sitio que mencioné anteriormente, el enfoque de Félix funciona bien, pero tengo otro sitio en el que también estoy trabajando que usa varios complementos y su enfoque sería ideal si puedo hacerlo funcionar. Saludos por tu ayuda.
Bailarina
¡Esto funciona perfectamente bien! Solo asegúrate de que, como dice @Tomas, crea tu propia clase / titular para tus propias funciones o variables personalizadas. +1
Pierre
Gracias tomas! Si no se requiere más, elimine el objeto padre (por ejemplo:) delete $.miniMenu. ¿Está bien?
Kunj
1
@KunJ: Claro, como con cualquier cosa: si puedes garantizar que ya no se usará, es seguro eliminarlo. Sin embargo, JavaScript recolectará basura para usted, por lo que no tiene que hacerlo delete $.miniMenu.
Tomas Aschan
20

EDITAR La pregunta es sobre JavaScript, la respuesta es sobre jQuery, que está mal. Esta es una vieja respuesta, desde tiempos en que jQuery estaba muy extendido.

En cambio, recomiendo comprender los ámbitos y cierres en JavaScript

Vieja, mala respuesta: con jQuery puedes hacer esto, sin importar dónde esté la declaración:

$my_global_var = 'my value';

Y estará disponible en todas partes. Lo uso para hacer galerías de imágenes rápidas, cuando las imágenes se difunden en diferentes lugares, así:

$gallery = $('img');
$current = 0;

$gallery.each(function(i,v){
    // preload images
    (new Image()).src = v;
});
$('div').eq(0).append('<a style="display:inline-block" class="prev">prev</a> <div id="gallery"></div> <a style="display:inline-block" class="next">next</a>');
$('.next').click(function(){
    $current = ( $current == $gallery.length - 1 ) ? 0 : $current + 1;
    $('#gallery').hide().html($gallery[$current]).fadeIn();
});
$('.prev').click(function(){
    $current = ( $current == 0 ) ? $gallery.length - 1 : $current - 1;
    $('#gallery').hide().html($gallery[$current]).fadeIn();
});

Consejo : ejecute todo este código en la consola en esta página ;-)

aesede
fuente
3
¿No son $ gallery y $ current solo variables globales normales? Funcionan porque las estás definiendo como variables globales al omitir 'var', pero el signo de dólar frente a ellas no las convierte en 'variables jQuery' ... Es literalmente como poner un guión bajo o cualquier otro signo de ellas. ... Serían variables jQuery si usa el objeto jQuery ($) y le agrega una propiedad: $ .myGlobalVariable = 'my value' ...
Andres Elizondo
Probablemente tenga razón, pero lo que vale la pena notar es que al usar la sintaxis $ myVar obtienes 2 ventajas, 1) la variable es global sin ninguna declaración especial (además de $); y 2) puede rastrear sus variables globales muy fácilmente dentro del código. Aunque está abierto a discusión ...
aesede
Una respuesta equivocada. De acuerdo con Andrés, esa NO es una variable jQuery en absoluto. Si no define $current = 0;al principio de la función, la última no funcionará.
harrrrrrry
15

Aquí hay un ejemplo básico de una variable global a la que puede acceder el resto de sus funciones. Aquí hay un ejemplo en vivo para usted: http://jsfiddle.net/fxCE9/

var myVariable = 'Hello';
alert('value: ' + myVariable);
myFunction1();
alert('value: ' + myVariable);
myFunction2();
alert('value: ' + myVariable);


function myFunction1() {
    myVariable = 'Hello 1';
}

function myFunction2() {
    myVariable = 'Hello 2';
}

Si está haciendo esto dentro de una función jquery ready (), asegúrese de que su variable esté dentro de la función ready () junto con sus otras funciones.

Paul Dragoonis
fuente
La mejor respuesta sobre cómo funcionan las variables globales en jQuery todavía.
Clinton Green
1
Sé que estoy cavando gravemente, pero esta ni siquiera es una variable global explícita. Esto está más en sintonía con una variable pública compartida que no está limitada a un cierre para scripts extremadamente pequeños. Son dos métodos / usos completamente diferentes y este te traerá grandes problemas si declaras un global explícito en un script que se encuentra en medio de varios scripts diferentes. Solo puedo imaginar un front-end en mi equipo declarando una variable global en la parte superior de un script que es el décimo llamado al DOM.
Brian Ellis
4

Declarar la variable fuera de las funciones.

function dosomething(){
  var i = 0; // can only be used inside function
}

var i = '';
function dosomething(){
  i = 0; // can be used inside and outside the function
}
usuario3632465
fuente
3

La mejor manera es usarlo closures, porque el windowobjeto se vuelve muy, muy desordenado de propiedades.

HTML

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="init.js"></script>
    <script type="text/javascript">
      MYLIBRARY.init(["firstValue", 2, "thirdValue"]);
    </script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello !</h1>
  </body>    
</html>

init.js (Basado en esta respuesta )

var MYLIBRARY = MYLIBRARY || (function(){
    var _args = {}; // private

    return {
        init : function(Args) {
            _args = Args;
            // some other initialising
        },
        helloWorld : function(i) {
            return _args[i];
        }
    };
}());

script.js

// Here you can use the values defined in the html as if it were a global variable
var a = "Hello World " + MYLIBRARY.helloWorld(2);

alert(a);

Aquí está el plnkr . Espero que ayude!

robe007
fuente