如何使JavaScript中的所有函数都可以访问变量

Question

我很好奇在这个代码片段中我不理解什么。。。

为什么这样做？

 function insert_number(number){
   var output = document.getElementById('output');
   output.value += number.value;
 }

但这不管用吗？

var output = document.getElementById('output');
function insert_number(number){
  output.value += number.value;
}

这与变量output的定义方式有关吗？

此外，我如何在函数insert_number()中写入output变量，同时仍然使output可用于脚本中的所有其他函数（即使这意味着必须将变量从函数中转义，或者专门将其作为参数发送给另一个函数）？

注意：我所有的代码都在一个外部的".js"文件中

截至目前，代码的完整上下文如下（我稍后将添加更多内容）：

var output = document.getElementById('output');
function insert_number(number){
  output.value += number.value;
}
function clear_output(){
  output.value = "";
}

Answer 1

以下是一个在全局范围内只保留单个对象/命名空间的解决方案：

(function(global, d) {
    var output = d.getElementById('output'),
        myApi = {};
    myApi.insert_number = function(number){
      output.value += number.value;
    };
    //export your api to the global scope
    global.myApi = myApi;
})(window, document);

现在您可以调用myApi.insert_number(5);。您现在有一个可以访问output变量的闭包，这样您就可以向API添加额外的功能，而不必每次都访问DOM。

提醒一下，像这样的JavaScript应该放在页面底部，就在关闭的</body> 上方

我建议在全球范围内观看这段视频：http://www.watchmecode.net/javascript-scope

Answer 2

实际上，只要中的DOM元素，它们都可以工作

document.getElementById('output')

在运行代码时存在。重要的区别在于，insert_number函数可能在加载DOM之后运行，这与第二个示例中的裸输出分配不同。

此外，我将如何在函数中写入output变量insert_number()，同时仍使输出在全球范围内可供所有人使用脚本中的其他函数？

优秀的JavaScript开发人员会尽量避免不必要的全局变量，但简单的答案是：

var output; // declared, but as yet undefined
window.onload = function () {
    window.output = document.getElementById("output");
}
function insert_number(number) {
    output.value += number.value;
}

Answer 3

这与全局变量无关。

您的head中可能有该脚本。在那个阶段，DOM还没有完全构建，ID为output的元素还不存在。因此document.getElementById('output')将返回null（示例）。

但是，如果您可能在DOM构建后的某个时间调用insert_number，作为对某些用户交互的响应。在这种情况下，元素将存在。

最简单的解决方案是将代码放在关闭的body标记之前（例如，注意不同的jsfiddle设置和/或检查源代码）。

Answer 4

我认为您的代码不工作的原因是因为在调用var output = document.getElementById('output'); 时没有加载DOM

将下面的代码移到输出div所在的位置，它应该可以在

Answer 5

如果您声明一个变量，而不使用"var"，则该变量始终变为全局。更多信息请点击此处：http://www.w3schools.com/js/js_variables.asp