javascript - 我怎样才能创建变量，这样我就不必在以后的函数中重复自己

Question

警告!!我是彻头彻尾的新手

好吧，我知道有很多关于全局变量的问题，我想这就是我要找的，但不完全是。最近我一直需要多次调用同一行代码。 document.getElementById("example").style 或类似于类似的小东西，但我需要不断重复。

我的问题是如何才能在函数之外创建一个变量，以节省编写这些行的时间？

我一直看到的是像这样简单地将它写在外面 var inferno = document.getElementById("inferno"); 但这远不能奏效。

这是我现在的代码，很简单，因为我只是将它用作测试，但是有人可以帮助我吗？

var inferno = document.getElementById("inferno");


function infernoClick () {
    inferno.style.backgroundColor="red";
}

Answer 1

你的想法是正确的。不过请注意，变量不必是全局。它必须位于所有想要使用它的代码都可以使用它的地方。

例如，这会创建一个全局的:

<script>
var inferno = document.getElementById("inferno");

function infernoClick () {
    inferno.style.backgroundColor="red";
}

function somethingElse () {
    inferno.style.color="green";
}
</script>

(请注意，这需要在创建 inferno 元素的标记之后。)

全局变量的问题在于它们可能会相互冲突，事实上全局“命名空间”已经非常非常拥挤了。

您可以通过将需要 inferno 的代码包装在一个作用域函数中来避免这种情况，如下所示:

<script>
(function() {
    var inferno = document.getElementById("inferno");

    function infernoClick () {
        inferno.style.backgroundColor="red";
    }

    function somethingElse () {
        inferno.style.color="green";
    }
})();
</script>

该代码创建了一个匿名函数，然后立即调用它，运行其中的代码。

现在 inferno 对于需要它的函数是“全局的”，但不是实际上是全局的。

再举个例子:

<script>
(function() {
    var outer = 42;

    function doSomethingCool() {
        var inner = 67;

        document.getElementById("someElement").onclick = function() {
            alert("inner = " + inner + ", outer = " + outer);
        };
    }

    // Can't use `inner` here, but can use `outer`
    alert("outer = " + outer);

    doSomethingCool();
})();
</script>

该代码将所有内容包装在一个作用域函数中，并且 outer 变量在该作用域函数中的任何地方都可以访问。它还有一个函数 doSomethingCool，它有一个名为 inner 的变量。 inner 只能在 doSomethingCool 中访问。看看 doSomethingCool 做了什么:它为单击 someElement 时连接了一个事件处理程序。它不会调用该函数，它只是将其连接起来。

真正酷的是，稍后，当有人点击该元素时，该函数可以访问该内部变量。

事实上，您传递给函数的参数也是如此。最后一个例子:

<input type="button" id="element1" value="One">
<input type="button" id="element2" value="Two">
<script>
(function() {
    function hookItUp(id, msg) {
        document.getElementById(id).onclick = function() {
            alert(msg);
        };
    }

    hookItUp("element1", "This message is for element1");
    hookItUp("element2", "And this one is for element2");

})();
</script>

我们有这个接受几个参数的函数，我们调用它两次:一次连接 click element1，另一次连接 点击 element2。

这里真正酷的是，尽管点击发生的时间很晚，但在对 hookItUp 的调用早已返回之后，我们调用 hookItUp 时创建的函数仍然可以访问我们传递给它的参数——当我们点击 element1 时，我们得到“This message is for element1”，当我们点击 element2 时，我们得到“And这个是给 element2 的。”

这些称为闭包。您可以在我的博客上阅读更多关于它们的信息: Closures are not complicated