Как объявить глобальную переменную в JavaScript?

Ответы:

215

Если вам нужно генерировать глобальные переменные в производственном коде (чего следует избегать), всегда объявляйте их явно :

window.globalVar = "This is global!";

В то время как можно определить глобальную переменную, просто опуская var(при условии, что нет локальной переменной с тем же именем), при этом генерируется неявная глобальная переменная , что является плохой вещью и приведет к ошибке в строгом режиме .

Феликс Клинг
источник
windowдоступно только в браузерах. Не могли бы вы отредактировать свой ответ, чтобы он работал во всех средах? См. Как получить глобальный объект в JavaScript?
Михал Перлаковский
52

Если это единственное приложение, где вы собираетесь использовать эту переменную, подход Феликса превосходен. Однако, если вы пишете плагин jQuery, рассмотрите «пространство имен» (подробности о кавычках позже ...) переменных и функций, необходимых для объекта jQuery. Например, я сейчас работаю над всплывающим меню jQuery, которое я назвал miniMenu. Таким образом, я определил «пространство имен» miniMenuв jQuery и помещаю все туда.

Причина, по которой я использую кавычки, когда говорю о пространствах имен javascript, заключается в том, что они на самом деле не являются пространствами имен в обычном смысле. Вместо этого я просто использую объект javascript и помещаю все свои функции и переменные как свойства этого объекта.

Кроме того, для удобства я обычно разделяю пространство имен плагина с iпространством имен для вещей, которые должны использоваться только внутри плагина, чтобы скрыть его от пользователей плагина.

Вот как это работает:

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

Теперь я могу просто сделать это $.miniMenu.i.globalVar = 3или $.miniMenu.i.parseSomeStuff = function(...) {...}когда мне нужно что-то сохранить глобально, и я все еще держу это вне глобального пространства имен.

Томас Ашан
источник
Спасибо за это, Томас. На сайте, о котором я упоминал выше, подход Felix работает нормально, но у меня есть еще один сайт, над которым я также работаю, который использует несколько плагинов, и ваш подход будет идеальным, если я смогу заставить его работать. Приветствия за вашу помощь.
танцор
Это работает на отлично! Просто убедитесь, что, как говорит @Tomas, создайте свой собственный класс / держатель для своих собственных пользовательских функций или переменных. +1
Пьер
Спасибо, Томас! Если больше не требуется, удалите родительский объект (например:) delete $.miniMenu. Это нормально?
Кундж
1
@KunJ: Конечно, как и во всем: если вы можете гарантировать, что он больше не будет использоваться, его безопасно удалить. Тем не менее, JavaScript будет собирать мусор это для вас, так что вы не имеете к delete $.miniMenu.
Томас Ашан
20

РЕДАКТИРОВАТЬ Вопрос о JavaScript, ответ о jQuery, что не так. Это старый ответ, со времен, когда jQuery был широко распространен.

Вместо этого я рекомендую понять области и замыкания в JavaScript

Старый, плохой ответ: с помощью jQuery вы можете просто сделать это, независимо от того, где находится объявление:

$my_global_var = 'my value';

И будет доступен везде. Я использую его для создания быстрых галерей изображений, когда изображения распространяются в разных местах, например так:

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

Совет : запустите весь этот код в консоли на этой странице ;-)

aesede
источник
3
Разве $ gallery и $ current не являются обычными глобальными переменными? Они работают, потому что вы определяете их как глобальные переменные, опуская «var», но знак доллара перед ними не делает их «переменными jQuery» ... Это буквально означает добавление знака подчеркивания или любого другого знака из них. ... Это были бы переменные jQuery, если вы используете объект jQuery ($) и добавляете к нему свойство: $ .myGlobalVariable = 'my value' ...
Andres Elizondo
Вы, вероятно, правы, но стоит отметить, что используя синтаксис $ myVar, вы получаете 2 преимущества, 1) переменная является глобальной без каких-либо специальных объявлений (кроме $); и 2) вы можете очень легко отслеживать ваши глобальные переменные внутри кода. Открыто для обсуждения , хотя ...
aesede
Запутанный ответ. Согласитесь с Андресом, это вообще не переменная jQuery. Если вы не определили $current = 0;в начале функции, более поздняя не будет работать.
harrrrrrry
15

Вот базовый пример глобальной переменной, к которой могут обращаться остальные ваши функции. Вот живой пример для вас: 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';
}

Если вы делаете это в функции jquery ready (), убедитесь, что ваша переменная находится внутри функции ready () вместе с другими вашими функциями.

Пол Драгунис
источник
Лучший ответ о том, как глобальные переменные работают в jQuery.
Клинтон Грин
1
Я знаю, что я серьезно копаю, но это даже не явная глобальная переменная. Это больше соответствует общей общедоступной переменной, не входящей в замыкание для очень маленьких сценариев. Это два совершенно разных метода / использования, и этот принесет вам большие неприятности, если вы объявите явный глобал в сценарии, который находится в середине нескольких различных сценариев. Я могу только представить, как в моей команде внешний интерфейс объявляет глобальную переменную в верхней части скрипта, который является 10-м, вызываемым в DOM.
Брайан Эллис
4

Объявите переменную вне функций

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
источник
3

Лучший способ - использовать closures, потому что windowобъект очень, очень сильно забит свойствами.

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 (на основании этого ответа )

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

Вот плнкр . Надеюсь, это поможет!

robe007
источник