在javascript函数中定义全局变量


Define global variable in a JavaScript function

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
       
        <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);
            }
       
    </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>
相关讨论

是的，正如其他人所说，您可以在全局范围(所有函数之外)使用var来声明全局变量：

1
2
3
4
var yourGlobalVariable;
function foo() {
    // ...
}

或者，您可以分配到window上的属性：

1
2
3
function foo() {
    window.yourGlobalVariable = ...;
}

…因为在浏览器中，用var声明的所有全局变量都是window对象的属性。(在最新的规范ecmascript 2015中，新的let、const和class声明在全球范围内创建了不属于全球对象属性的全球；ES2015中的新概念。)

(也有暗含的全球性的恐怖，但不要故意这样做，尽你最大的努力避免意外地这样做，也许通过使用ES5的"use strict")。

所有这些都说：如果可能的话，我会避免使用全局变量(而且几乎可以肯定)。正如我所提到的，它们最终是window的属性，并且window已经足够拥挤，所有id的元素(以及许多只有name的元素)都被倾倒在其中(不管即将到来的规范是什么，也就是说，转储任何带有name的元素)。

相反，将代码包装在一个作用域函数中，并使用该作用域函数的局部变量，并在其中关闭其他函数：

1
2
3
4
5
6
(function() { // Begin scoping function
    var yourGlobalVariable; // Global to your code, invisible outside the scoping function
    function foo() {
        // ...
    }
})();         // End scoping function
相关讨论

更新1：如果您阅读了这些评论，我们将围绕这个特定的命名约定展开一个很好的讨论。

更新2：似乎自从我的答案发布后，命名约定就变得更加正式了。教书、写书等的人谈论《以东宣言》和《以东宣言》。

更新3：这里是支持我观点的附加维基百科帖子：http://en.wikipedia.org/wiki/declaration_u(computer_programming)declarations_u and_definitions

…回答主要问题。在函数前声明变量。这将有效，并且符合在范围顶部声明变量的良好实践：)

相关讨论

刚刚宣布

1
var trialImage;

在外面。然后

1
2
3
4
5
function makeObj(address) {
    trialImage = [address, 50, 50];
..
..
}

希望这有帮助。

不可以。只需在函数外部声明变量即可。您不必在指定值的同时声明它：

1
2
3
4
var trailimage;

function makeObj(address) {
  trailimage = [address, 50, 50];
相关讨论

只需在函数外部声明它，并在函数内部分配值。类似：

1
2
3
4
5
6
7
<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"也会使其成为全局变量，但最好在外部声明一次，以便使用更干净的代码。这也适用于：

1
2
3
4
5
6
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/qcrege/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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);

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

1
2
3
4
5
6
7
8
var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;
var trailimage;
function makeObj(address) {
      trailimage = [address, 50, 50];
      ....
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    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;

我知道这里面可能有很多语法错误，但这是一般的想法…非常感谢莱泽指出这一点…您可以在http://www.w3schools.com/html/html5_webstorage.asp上找到本地和会话存储。我的代码也需要同样的东西，这真是个好主意。

相关讨论

经典示例：

1
window.foo = 'bar';

现代、安全的例子通过使用IIFE遵循最佳实践：

1
2
3
4
5
;(function (root) {
    'use strict'

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

现在，还可以选择使用WebStorage API

1
localStorage.foo = 42;

或

1
sessionStorage.bar = 21;

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

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

相关讨论

下面是一个可能有用的示例代码。

1
2
3
4
5
6
7
8
9
10
11
  var Human = function(){
   name ="Shohanur Rahaman";  // global variable
   this.name ="Tuly"; // constructor variable
   var age = 21;
 };

  var shohan = new Human();

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

在这里，我找到了一个很好的答案：如何在javascript中一个声明一个全局变量

相关讨论

下面是另一种简单的方法，可以使变量在其他函数中可用，而不必使用全局变量：

1
2
3
4
5
6
7
8
9
10
function makeObj() {
  // var trailimage = 'test';
  makeObj.trailimage = 'test';
}
function someOtherFunction() {
  document.write(makeObj.trailimage);
}

makeObj();
someOtherFunction();

如果您正在创建一个启动函数，您可以这样定义全局函数和变量：

1
2
3
4
5
6
7
function(globalScope)
{
     //define something
     globalScope.something() {
         alert("It works");
     };
}(window)

因为函数是用这个参数全局调用的，所以这里是全局范围。所以，这些东西应该是全球性的。

相关讨论