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

我很好奇我在这个代码片段中不理解的东西...如何使变量对JavaScript中的所有函数都可访问？

这是为什么这样工作？

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定义？

此外，我怎么会写output变量的函数insert_number()内，同时还使output提供给所有其他功能在我的脚本（即使这意味着不必逃避变出来的功能，或者具体地说，它发送到另一个功能作为参数）？

注：我所有的代码是在外部“的.js”文件

代码为现在的完整背景是这样的（我将在以后添加更多）：

var output = document.getElementById('output'); 

function insert_number(number){ 
    output.value += number.value; 
} 

function clear_output(){ 
    output.value = ""; 
}

来源

2012-02-01 person0

你是什么意思它不工作？对我来说看起来很好 – Ibu 2012-02-01 18:31:01

是你的代码的完整上下文还是更多？ – j08691 2012-02-01 18:33:01

其实，他们都工作，只要在

document.getElementById('output')

的DOM元素存在。最重要的区别是您的insert_number函数可能在加载DOM后运行，与第二个示例中的裸输出分配不同。

而且我将如何编写函数 insert_number()内output变量，同时还使全球范围内的输出提供给所有等功能于我的脚本？

良好的JavaScript开发者尽量避免全局变量，其中不必要的，但简单的答案是这样的：

var output; // declared, but as yet undefined 

window.onload = function() { 
    window.output = document.getElementById("output"); 
} 

function insert_number(number) { 
    output.value += number.value; 
}

来源

2012-02-01 18:31:11 kojiro

这是什么意思？'你的insert_number函数可能在加载DOM之后运行，与第二个例子中的裸输出分配不同。 – person0 2012-02-01 18:40:44

@Proud_to_be_Noob'

如果你声明一个变量，而不使用“var”，变量总是变成global。这里更多的信息：在运行代码时http://www.w3schools.com/js/js_variables.asp

来源

2012-02-01 18:30:41

yuck w3schools.com UGGGGGGGGGGGGGGG ...我恳求您避免引用该不良参考网站。应该有一个过滤器，阻止它作为一个被诅咒的词。 – 2012-02-01 18:31:06

这并没有真正回答这个问题。 – j08691 2012-02-01 18:32:33

没问题，但这只能部分回答我的问题，而且我已经知道了很多（我将重述我的问题）。我真的需要知道为什么第一个代码段可以工作，但第二个代码段没有。 – person0 2012-02-01 18:34:39

这有没有关系全局变量。

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

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

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

来源

2012-02-01 18:32:40

我觉得你的代码是不工作的原因是因为没有加载的DOM，当你调用var output = document.getElementById('output');

移动以下其中输出DIV是，它应该工作

来源

2012-02-01 18:34:09

下面的代码是一个解决方案，将只保留一个对象/名称空间在全球范围内：

(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变量封闭，所以你可以添加额外的乐趣不需要每次访问DOM，都可以使用API。

只是一个提醒，JavaScript的这应该被放置在你的页面的底部刚刚闭幕</body>

我会建议看在全球范围内该视频上面：http://www.watchmecode.net/javascript-scope

来源

2012-02-01 18:37:01 Paul

这似乎有点复杂，我试图使用简单的功能。稍后我会对此进行更多的研究。不过谢谢。 – person0 2012-02-01 19:03:07

没问题。我要指出的一件事是，大多数JavaScript代码“从简单开始”，但随后迅速增长失控。我个人总是试图规划增长，并且它往往会增加额外的功能并重构得更简单。 – Paul 2012-02-01 19:15:11

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

回答

相关问题