在JavaScript函数中定义全局变量

511

是否可以在JavaScript函数中定义全局变量？

我想在其他函数中使用trailimage变量（在makeObj函数中声明）。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <script type="text/javascript">
            var offsetfrommouse = [10, -20];
            var displayduration = 0;
            var obj_selected = 0;
            function makeObj(address) {
                **var trailimage = [address, 50, 50];**
                document.write('<img id="trailimageid" src="' + trailimage[0] + '" border="0"  style=" position: absolute; visibility:visible; left: 0px; top: 0px; width: ' + trailimage[1] + 'px; height: ' + trailimage[2] + 'px">');
                obj_selected = 1;
            }

            function truebody() {
                return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
            }
            function hidetrail() {
                var x = document.getElementById("trailimageid").style;
                x.visibility = "hidden";
                document.onmousemove = "";
            }
            function followmouse(e) {
                var xcoord = offsetfrommouse[0];
                var ycoord = offsetfrommouse[1];
                var x = document.getElementById("trailimageid").style;
                if (typeof e != "undefined") {
                    xcoord += e.pageX;
                    ycoord += e.pageY;
                }
                else if (typeof window.event != "undefined") {
                    xcoord += truebody().scrollLeft + event.clientX;
                    ycoord += truebody().scrollTop + event.clientY;
                }
                var docwidth = 1395;
                var docheight = 676;
                if (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight) {
                    x.display = "none";
                    alert("inja");
                }
                else
                    x.display = "";
                x.left = xcoord + "px";
                x.top = ycoord + "px";
            }

            if (obj_selected = 1) {
                alert("obj_selected = true");
                document.onmousemove = followmouse;
                if (displayduration > 0)
                    setTimeout("hidetrail()", displayduration * 1000);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <img alt="" id="house" src="Pictures/sides/right.gif" style="z-index: 1; left: 372px;
            top: 219px; position: absolute; height: 138px; width: 120px" onclick="javascript:makeObj('Pictures/sides/sides-not-clicked.gif');" />
        </form>
    </body>
</html>
javascript  function  variables  scope  declaration 
— ze
source
19
声明全局变量根本不用“ var”关键字
— Ibu
20
@Ibrahim：“声明全局变量根本不用“ var”关键字” Gak！恐怖！;-)幸运的是，严格模式可以消除隐式全局变量。
— TJ Crowder
28
@Ibrahim Diallo-不使用var不会声明全局变量。向未声明的变量分配值的结果是在全局对象上创建属性，这与声明变量完全不同。
— RobG 2011年
1
在此答案中也有用的信息stackoverflow.com/a/4862268/1356098 :)
— Erenor Paz 2012年

Answers:

739

是的，正如其他人所说的，您可以var在全局作用域（所有函数之外）使用来声明全局变量：

<script>
var yourGlobalVariable;
function foo() {
    // ...
}
</script>

或者，您可以在上分配一个属性window：

<script>
function foo() {
    window.yourGlobalVariable = ...;
}
</script>

...因为在浏览器中，所有用声明的全局变量var都是window对象的属性。（在最新规范ECMAScript 2015中，全局范围内的new let，const和class语句创建的不是全局对象属性的全局变量；这是ES2015中的新概念。）

（也有隐式全局变量的恐怖，但是不要故意这样做，并尽最大努力避免偶然地这样做，也许是通过使用ES5来实现的"use strict"。）

话虽如此：如果可能（我几乎可以肯定），我会避免使用全局变量。正如我所提到的，它们最终是的属性window，并且window已经非常拥挤，所有元素都被转储到了其中（id许多元素中只有一个name）（无论即将发布的规范是什么，IE都将name在其中转储几乎所有内容））。

而是将代码包装在作用域函数中，并使用该作用域局部变量，并使其他函数在其中封闭：

<script>
(function() { // Begin scoping function
    var yourGlobalVariable; // Global to your code, invisible outside the scoping function
    function foo() {
        // ...
    }
})();         // End scoping function
</script>
— TJ人群
source
98
+1明确将其声明给window是最易读的方法。
— 2011年
8
请注意，使用window在Node中无效。这里最简单的技巧是设置：GLOBAL.window = GLOBAL;-如相关问题中所述。当然，从概念上讲，这还不够。我更喜欢以其他方式进行操作，因此我可以使用GLOBAL代替window。
— 米2014年
4
@CasparKleijne，我听不懂。当您确实没有证据表明窗口对象确实存在时，为什么要在窗口上分配它。您对将来如何使用代码一无所知。它甚至可能用在MongoDB环境或Rino中，而不是您的节点中。例如，如果您使用Web Worker，则即使在浏览器中，窗口对象也不可见。这将完全破坏可重用性。
— Gherman
4
window.yourGlobalVariable = ...;在阅读堆叠站点上的5到6个问题后，其工作原理就像一个魅力。
— 艾哈迈德·塞德
6
@JacquesKoekemoer：那里没有任何理由可以使用eval。相反：window[dynamic_variable_name] = dynamic_variable_value;
— TJ Crowder
19

UPDATE1：如果您阅读注释，则围绕此特定命名约定进行了很好的讨论。

UPDATE2：似乎自从我的答案发布以来，命名约定就变得更加正式了。教书，写书等的人谈论var宣言和function宣言。

UPDATE3：以下是支持我的观点的其他Wikipedia帖子：http : //en.wikipedia.org/wiki/Declaration_( computer_programming)#Declarations_and_Definitions

...并回答主要问题。函数前的DECLARE变量。这将起作用，并且将符合在范围顶部声明变量的良好做法：)

— op1ekun
source
7
如果要在其他位置定义变量，请务必了解什么是起重。这是一篇关于它的很好的文章足够好.com / 2010/2 / JavaScript-Scoping-and- Hoisting。祝好运！
— op1ekun 2012年
1
这不是什么definition和declaration意味着C.你的第一行可以是一个声明或定义（这取决于它在哪里）; 第二个只是一个任务。声明仅指定标识符的解释（即myVar是int）；如果声明还保留存储空间，则为definition。这与打字无关。这是编译单元理解对其他编译单元的引用的一部分。
— EML 2014年
4
即使是在JS，var myVar被称为声明（它不需要键入）和myVar = 10一个分配。我听说过化合物（var myVar = 10;）的术语“定义” 。
— Bergi 2014年
2
这无助于回答问题。它应该是评论，而不是答案。
— Stuntddude
2
@Stuntddude你可能是对的:(我开始回答这个问题，然后决定有所不同，这就是我们所要的。还有一些人仍然觉得它有用，所以我把它留在了这里。谢谢你反馈！
— op1ekun 16-3-8
15

只需声明 

var trialImage;

外。然后

function makeObj(address) {
    trialImage = [address, 50, 50];
..
..
}

希望这可以帮助。

— 哈里卜
source
12

不，你不能。只需在函数外部声明变量即可。您不必在分配值的同时声明它：

var trailimage;

function makeObj(address) {
  trailimage = [address, 50, 50];
— 古法
source
1
抱歉! “是否可以在JavaScript函数中定义全局变量？” -“不，你不能”是不正确的，如第一个答案所示！
— mustafa.0x
5
@ mustafa.0x：你错了。您不能在函数内部定义全局变量。您可以隐式创建全局变量，或在函数内部创建window属性，但不能在函数内部定义全局变量。
— Guffa
1
对于浏览器环境中的JavaScript，全局变量和属性window是同义词。无论哪种方式，您所做的语义区分都是很清楚的，因此我不介意放弃。编辑：无法更改我的投票，对不起！
— mustafa.0x
2
如果您不使用严格（但是为什么不使用严格？），则实际上可以 通过违反所有良好实践并且不使用来声明和定义函数内的全局变量var，这就是Guffa 隐式创建的意思（例如@DhruvPathak也指向该处）。
— cregox
11

只需在函数外部声明它，然后在函数内部分配值即可。就像是：

<script type="text/javascript">
    var offsetfrommouse = [10, -20];
    var displayduration = 0;
    var obj_selected = 0;
    var trailimage = null ;  // GLOBAL VARIABLE
    function makeObj(address) {
        trailimage = [address, 50, 50];  //ASSIGN VALUE

或者简单地从函数内部的变量名中删除“ var”也会使其具有全局性，但是最好在外部将其声明一次以获取更清晰的代码。这也将起作用：

var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;

function makeObj(address) {
    trailimage = [address, 50, 50];  //GLOBAL VARIABLE , ASSIGN VALUE

我希望这个例子能进一步解释：http : //jsfiddle.net/qCrGE/

var globalOne = 3;
testOne();

function testOne()
{
    globalOne += 2;
    alert("globalOne is : " + globalOne );
    globalOne += 1;
}

alert("outside globalOne is : " + globalOne);

testTwo();

function testTwo()
{
    globalTwo = 20;
    alert("globalTwo is " + globalTwo);
    globalTwo += 5;
}

alert("outside globalTwo is :" + globalTwo);
— DhruvPathak
source
3

在函数外部定义Trailimage变量并在makeObj函数中设置其值非常简单。现在，您可以从任何地方访问其价值。

var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;
var trailimage;
function makeObj(address) {
      trailimage = [address, 50, 50];
      ....
}
— 巴拉斯
source
2 
    var Global = 'Global';

    function LocalToGlobalVariable() {

    //This creates a local variable.

    var Local = '5';

    //Doing this makes the variable available for one session
    //(a page refresh - Its the session not local)

    sessionStorage.LocalToGlobalVar = Local;

    // It can be named anything as long as the sessionStorage references the local variable.
    // Otherwise it won't work
    //This refreshes the page to make the variable take effect instead of the last variable set.

    location.reload(false);
    };

    //This calls the variable outside of the function for whatever use you want.

    sessionStorage.LocalToGlobalVar;

我意识到其中可能存在很多语法错误，但这只是其总体思路...非常感谢LayZee指出这一点...您可以在http：//www.w3schools找到本地存储和会话存储。 com / html / html5_webstorage.asp。我的代码需要同样的东西，这确实是个好主意。

— ShanerM13
source
到目前为止，这是唯一可行的答案，但是它需要重新加载页面并location.reload(false);重复刷新页面。
— iyrin
1

经典示例：

window.foo = 'bar';

使用IIFE遵循最佳实践的现代，安全示例：

;(function (root) {
    'use strict'

    root.foo = 'bar';
)(this));

如今，还可以选择使用WebStorage API 

localStorage.foo = 42;

要么

sessionStorage.bar = 21;

在性能方面，我不确定它是否比将值存储在变量中明显慢。

如我可以使用...所述的广泛的浏览器支持

— 拉斯·吉鲁普·布林克·尼尔森
source
localStorage和sessionStorage仅适用于字符串值。
— HereToLearn_ 2015年
没错，@ HereToLearn_，但是您可以使用localStorage.foo = JSON.stringify({ arbitrary: 'object', meaning: 42, awesome: true });和var foo = JSON.decode(localStorage.foo);。
— Lars Gyrup Brink Nielsen
什么localStorage有全局变量呢？
— 米哈尔Perłakowski
1
OP正在寻找此问题的解决方案：“我想在其他函数中使用Trailimage变量（在makeObj函数中声明）。” 谁说解决方案必须包含全局变量？全局变量很少是解决任何问题的好方法。
— 拉尔斯·吉鲁普·布林克·尼尔森
0

因此，您希望函数内部的变量在函数外部可用吗？为什么不返回函数内部变量的结果？ var x = function returnX { var x = 0; return x; }是这个主意...

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">

        var offsetfrommouse = [10, -20];
        var displayduration = 0;
        var obj_selected = 0;

        function makeObj(address) {
            var trailimage = [address, 50, 50];
            document.write('<img id="trailimageid" src="' + trailimage[0] + '" border="0"  style=" position: absolute; visibility:visible; left: 0px; top: 0px; width: ' + trailimage[1] + 'px; height: ' + trailimage[2] + 'px">');
            obj_selected = 1;
            return trailimage;
        }

        function truebody() {
            return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
        }

        function hidetrail() {
            var x = document.getElementById("trailimageid").style;
            x.visibility = "hidden";
            document.onmousemove = "";
        }

        function followmouse(e) {
            var xcoord = offsetfrommouse[0];
            var ycoord = offsetfrommouse[1];
            var x = document.getElementById("trailimageid").style;
            if (typeof e != "undefined") {
                xcoord += e.pageX;
                ycoord += e.pageY;
            }

            else if (typeof window.event != "undefined") {
                xcoord += truebody().scrollLeft + event.clientX;
                ycoord += truebody().scrollTop + event.clientY;
            }
            var docwidth = 1395;
            var docheight = 676;
            if (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight) {
                x.display = "none";
                alert("inja");
            }
            else
                x.display = "";
            x.left = xcoord + "px";
            x.top = ycoord + "px";
        }

        if (obj_selected = 1) {
            alert("obj_selected = true");
            document.onmousemove = followmouse;
            if (displayduration > 0)
                setTimeout("hidetrail()", displayduration * 1000);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <img alt="" id="house" src="Pictures/sides/right.gif" style="z-index: 1; left: 372px; top: 219px; position: absolute; height: 138px; width: 120px" onclick="javascript:makeObj('Pictures/sides/sides-not-clicked.gif');" />
    </form>
</body>
</html>

我尚未对此进行测试，但是如果您的代码在进行此小更改之前就可以使用，那么它应该可以使用。

— ShanerM13
source
-1

这是一个可能很丰富的示例代码。

  var Human = function(){
   name = "Shohanur Rahaman";  // global variable
   this.name = "Tuly"; // constructor variable 
   var age = 21;
 };

  var shohan = new Human();

 document.write(shohan.name+"<br>");
 document.write(name);
 document.write(age); // undefined cause its local variable

在这里，我找到了一个不错的答案：如何在JavaScript中声明一个全局变量

— Shohanur Ra​​haman
source
虽然从理论上讲这可以回答问题，但最好在此处包括答案的基本部分，并提供链接以供参考。
— 罗希特·古普塔
-1

这是另一个使变量在其他函数中可用而又不必使用全局变量的简便方法：

function makeObj() {
  // var trailimage = 'test';
  makeObj.trailimage = 'test';
}
function someOtherFunction() {
  document.write(makeObj.trailimage);
}

makeObj();
someOtherFunction();
展开摘要

— am2124429
source
-2

如果要创建启动函数，则可以通过以下方式定义全局函数和变量：

function(globalScope)
{
     //define something
     globalScope.something() { 
         alert("It works");
     };
}(window)

因为该函数是使用此参数全局调用的，所以这里是全局范围。因此，事物应该是全球事物。

— 康斯坦丁·伊萨夫（Konstantin Isaev）
source
this是undefined在严格模式外部的功能，并且不应当被用来指全局对象。
— 米哈尔Perłakowski
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.