JavaScript，通过函数访问全局变量

Question

在指定我要努力解决的问题之前，让我向您展示我的JavaScript代码。

var gVar = 0;

$("#plus").click(function(e) {
    e.preventDefault();
    gVar = gVar + 1;
    alert(gVar);
});

$("#minus").click(function(e) {
    e.preventDefault();
    gVar = gVar + 1;
    alert(gVar);
});

在上面的代码中，我首先设置一个全局变量'gVar'，该变量保留一个整数值零。 每当我单击ID为“ plus”的按钮时，全局变量“ gVar”的值将增加1，这将在浏览器的对话框中打印出来。

ID为“减”的按钮将发生相同的事情，除了'gVar'的值将减少1。

为了整理上面的代码，我分别创建了一个函数，只要单击两个按钮，就会调用该函数。 这是代码。

var gVar = 0;

var weird = function (button, Var, num1) {
    $(button).click(function(e){
        e.preventDefault();
        Var = Var + num1;
        alert(Var);
    });
};

weird("#plus", gVar, 1);
weird("#minus", gVar, -1);

当我运行此代码时，“ gVar”的值不会改变，并且始终保持为“ 0”。

我想我隐约知道这里的问题是什么，但不完全确定是什么导致了此问题。 我们将不胜感激为我澄清这个问题。

同样，我很好奇是否有办法创建一个函数来实现相同的效果，而不是为两个不同的click事件编写两次类似的代码集。

Answer 1

在JavaScript中，仅将对象作为参考传递，将所有其他类型（包括数字）分配给另一个变量时，这些对象都会被复制。

您可以改为将变量名作为字符串传递，然后将其称为window[Var] ：

var gVar = 0;

var weird = function (button, Var, num1) {
    $(button).click(function(e){
        e.preventDefault();
        window[Var] = window[Var] + num1;
        alert(window[Var]);
    });
};

weird("#plus", "gVar", 1);
weird("#minus", "gVar", -1);

正如@ shiplu.mokadd.im建议的那样，您还可以将gVar更改为object：

var gVar = {value: 0};

var weird = function (button, Var, num1) {
    $(button).click(function(e){
        e.preventDefault();
        Var.value = Var.value + num1;
        alert(Var.value);
    });
};

weird("#plus", gVar, 1);
weird("#minus", gVar, -1);

Answer 2

无论函数是什么，您都不能重新分配参数并期望范围反映该更改。 但是，根据参数，您可以对其进行修改（即，如果gVar是对象或数组）。 我建议您阅读有关按引用/值传递的信息，以更好地理解此处的含义

全局变量的本质是它对于整个程序都是全局的，因此，不需要将其作为参数传递给任何函数。

因此无需过多修改原始代码

var gVar = 0;

var weird = function (button, num1) {
    $(button).click(function(e){
        e.preventDefault();
        gVar += num1;
        alert(Var);
    });
};

weird("#plus", 1);
weird("#minus", -1);

Answer 3

 var gVar = { value: 0 }; var weird = function(button, Var, num1) { $(button).click(function(e) { e.preventDefault(); Var.value = Var.value + num1; alert(Var.value); }); }; weird("#plus", gVar, 1); weird("#minus", gVar, -1); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" value="+" id="plus"> <br> <input type="button" value="-" id="minus">