如何在 JavaScript 中声明全局变量

如何在 JavaScript 中声明全局变量？

324947 次浏览
小开
最佳答案

如果您必须在生产代码中生成全局变量(应该避免这种情况) ，请将它们声明为 明确地:

window.globalVar = "This is global!";

虽然可以通过省略 var来定义一个全局变量(假设没有相同名称的局部变量) ，但是这样做会生成一个 含蓄全局变量，这是一件坏事，并且会在 严格模式中生成一个错误。

小开

如果这是您将要使用这个变量的唯一应用程序，那么 菲利克斯的方法非常优秀。但是，如果您正在编写一个 jQuery 插件，请考虑 jQuery 对象下所需的“名称空间”(后面引号的详细信息...)变量和函数。例如，我目前正在处理一个 jQuery 弹出菜单，我称之为 miniMenu。因此，我在 jQuery 下定义了一个“名称空间”miniMenu，并将所有内容都放在那里。

我之所以在谈到 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(...) {...}，并且仍然将它们保留在全局名称空间之外。

小开

下面是一个全局变量的基本示例，您的其他函数可以访问它。这里有一个活生生的例子: 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 ()函数中。

小开

在函数之外声明变量

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
}
小开

注意: 这个问题是关于 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();
});

提示 : 在此页面的控制台中运行整个代码; -)

小开

最好的方法是使用 closures，因为 window对象获得非常、非常具有属性的 杂乱无章。

超文本标示语言

<!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>

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 content as if it were a global variable
var a = "Hello World " + MYLIBRARY.helloWorld(2);


alert(a);

这里是 普林克。希望它有帮助！


提交答案