Como declarar uma variável global em JavaScript?

135

Como posso declarar uma variável global em JavaScript?

javascript global-variables Dançarino
fonte

215

Se você precisar gerar variáveis globais no código de produção (o que deve ser evitado), sempre as declare explicitamente :

window.globalVar = "This is global!";

Embora seja possível definir uma variável global apenas omitindo var(supondo que não haja variável local com o mesmo nome), isso gera uma global implícita , o que é uma coisa ruim a ser feita e geraria um erro no modo estrito .

Felix Kling
fonte

windowestá disponível apenas em navegadores. Você poderia editar sua resposta para fazê-la funcionar em todos os ambientes? Consulte Como obter o objeto global em JavaScript?

Michał Perłakowski 30/11

52

Se este é o único aplicativo em que você usará essa variável, a abordagem de Felix é excelente. No entanto, se você estiver escrevendo um plug-in jQuery, considere variáveis e funções de "namespacing" (detalhes das aspas mais tarde ...) necessárias no objeto jQuery. Por exemplo, atualmente estou trabalhando em um menu pop-up do jQuery que chamei de miniMenu. Assim, eu defini um "namespace" miniMenuno jQuery e coloco tudo lá.

O motivo pelo qual uso aspas quando falo sobre espaços para nome javascript é que eles não são realmente espaços para nome no sentido normal. Em vez disso, basta usar um objeto javascript e colocar todas as minhas funções e variáveis como propriedades desse objeto.

Além disso, por conveniência, geralmente subpovoo o espaço de nomes do plug-in com um iespaço de nomes para itens que só devem ser usados internamente dentro do plug-in, para ocultá-lo dos usuários do plug-in.

É assim que 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();

Agora posso fazer $.miniMenu.i.globalVar = 3ou $.miniMenu.i.parseSomeStuff = function(...) {...}sempre que precisar salvar algo globalmente e ainda assim mantê-lo fora do namespace global.

Tomas Aschan
fonte

Obrigado por esse Tomas. No site que mencionei acima, a abordagem Felix funciona bem, mas eu tenho outro site no qual também estou trabalhando que usa vários plugins e sua abordagem seria ideal se eu conseguir fazê-la funcionar. Saúde pela sua ajuda.

Dançarina

Isso funciona perfeitamente bem! Apenas certifique-se de como @Tomas diz: Crie sua própria classe / titular para suas próprias funções ou variáveis personalizadas. +1

Pierre

Obrigado Tomas! Se não for mais necessário, exclua o objeto pai (por exemplo delete $.miniMenu:). Tudo bem?

Kunj

1

@KunJ: Claro, como em qualquer coisa: se você pode garantir que não será mais usado, é seguro excluí-lo. No entanto, JavaScript vontade coleta de lixo para você, para que você não tem a delete $.miniMenu.

Tomas Aschan

20

EDIT A pergunta é sobre JavaScript, a resposta é sobre jQuery, o que está errado. Esta é uma resposta antiga, desde os tempos em que o jQuery era difundido.

Em vez disso, recomendo a compreensão de escopos e fechamentos em JavaScript

Resposta antiga e ruim: Com o jQuery, você pode fazer isso, independentemente da declaração:

$my_global_var = 'my value';

E estará disponível em qualquer lugar. Eu o uso para fazer galerias de imagens rápidas, quando as imagens são espalhadas em lugares diferentes, como:

$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();
});

Dica : execute esse código inteiro no console nesta página ;-)

aesede
fonte

3

Não são $ gallery e $ current variáveis globais normais? Eles funcionam porque você os define como variáveis globais, omitindo 'var', mas o cifrão na frente deles não os torna 'variáveis jQuery' ... É literalmente como colocar um sublinhado ou qualquer outro sinal deles ... Eles seriam variáveis jQuery se você usar o objeto jQuery ($) e adicionar uma propriedade a ele: $ .myGlobalVariable = 'meu valor' ...

Andres Elizondo

Você provavelmente está certo, mas o que vale a pena notar é que, ao usar a sintaxe $ myVar, você recebe 2 aventuras, 1) a variável é global sem nenhuma declaração especial (além do $); e 2) você pode rastrear suas variáveis globais com muita facilidade dentro do código. Aberto à discussão ...

aesede

Uma resposta enganada. Concordo com Andres, que NÃO é uma variável jQuery. Se você não definir $current = 0;no início a função, a posterior não funcionará.

harrrrrrry 17/07/19

15

Aqui está um exemplo básico de uma variável global que o restante de suas funções pode acessar. Aqui está um exemplo ao vivo para você: 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';
}

Se você estiver fazendo isso dentro de uma função jquery ready (), verifique se sua variável está dentro da função ready () junto com suas outras funções.

Paul Dragoonis
fonte

Melhor resposta para como as variáveis globais funcionam no jQuery ainda.

Clinton Green

1

Eu sei que estou cavando covas, mas essa nem é uma variável global explícita. Isso é mais sintonizado com uma variável pública compartilhada que não tem como escopo um fechamento para scripts extremamente pequenos. Eles são dois métodos / usos totalmente diferentes e este causará grandes problemas se você declarar um global explícito em um script que está no meio de vários scripts diferentes. Só consigo imaginar um front end na minha equipe declarando uma variável global na parte superior de um script que é a décima que está sendo chamada no DOM.

Brian Ellis

4

Declare a variável fora das funções

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
}

user3632465
fonte

3

A melhor maneira é usar closures, porque o windowobjeto fica muito, muito cheio de propriedades.

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 (com base nesta resposta )

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);

Aqui está o plnkr . Espero que ajude!

robe007
fonte

Como declarar uma variável global em JavaScript?

Respostas: