关于html：是否可以在JAVASCRIPT中创建全局变量？

Is it possible to make global Variable in JAVASCRIPT?

本问题已经有最佳答案，请猛点这里访问。

我有以下HTML代码。我创建了一个客户对象。(custforatm.js中的constractor)：

1
2
3
4
5
6
7
8
9
10

<html>
<script src="js/custForATM.js">
<script src="js/ATM.js">
<script type="text/javascript">
var customer = new CustomersATM("300321758","1234","Eric");

<body>
<button onclick="changeID()">Add One to Customer ID</button>
</body>
</html>

函数changeid()位于diffrent js文件(atm.js)中。我想点击这个按钮将添加发送变量"customer"到changeid功能。有可能吗？(我知道我可以将此方法移动到HTML文件中。但我不想。

谢谢！！

相关讨论

在全局范围(又称"窗口")内，变量是全局的。

看看这个：

1
2
3
4

//this is global because it is in the global scope (the window)
var foo = 'stuff';
//because it is global (window) you can also access it like this:
console.log(window.foo); //'stuff'

现在您可以在任何地方访问foo。值得注意的是，globals并不是最佳实践——所以请查看面向对象编程(坚实的原则)。

如果您在另一个范围内(如函数)，并且不使用var关键字创建变量，那么该变量将是全局的：

1
2
3
4
5
6

function someFunction() {
someVariable = 'stuff'; //this created a global variable! (or references an existing one)
//you could also assign it to window:
window.someVariable = 'stuff';
//both are the same thing!
}

内联JS(HTML中的onclick)不是一个好的实践。相反，您可以遵循良好的实践并使用javascript注册Click事件：

1
2
3
4
5
6
7
8
9
10
11

//get reference to button
var myBtn = document.getElementById('myBtn');

//add click function
myBtn.addEventListener('click', function(event) {
myFunction();
});

function myFunction() {
console.log(foo); //'stuff'
}

以下是所有这些的演示：http://jsbin.com/omubecaw/1/edit

请注意，在将元素引用加载到DOM之后，需要获取它们。最好的做法是将脚本放在身体的末尾，而不是头部，如下所示：

1
2
3

</body>

如果您必须将脚本保存在head中，那么您需要将您的javascript代码放在一个函数中以运行窗口的onload:

1
2
3

window.addEventListener('load', function() {
//code here!
});

您可以简单地将其内联。但是，随着您的逻辑变得更加复杂，最终将事件处理分解为头脚本也是有意义的。

您可以绑定到window.onload事件，然后找到button元素(最好使用元素上的ID)，然后绑定将发送参数的onlcick事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<script src="js/custForATM.js">
<script src="js/ATM.js">
<script type="text/javascript">
var customer = new CustomersATM("300321758","1234","Eric");
window.onload = function(){
document.getElementById("changeId").onclick = function(){
changeID(customer);
};
};

<body>
<button id="changeId">Add One to Customer ID</button>
</body>
</html>

这应该有效。(删除"var"使变量成为全局变量)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
<script src="js/custForATM.js">
<script src="js/ATM.js">

<script type="text/javascript">

customer = new CustomersATM("300321758","1234","Eric");

<body>

<button onclick="changeID(customer)">Add One to Customer ID</button>
</body>
</html>