您的代码实际上很好，您刚刚为全局选择了一个不幸的名称：name。如果您将其更改为其他内容（例如foo），它可以工作：http: //jsfiddle.net/6nuCx/1/
原因有点不明。全局变量成为window对象的属性。但是该window对象已经有一个名为 的属性name，它是窗口的名称。我很惊讶地发现您的代码不起作用，因为我希望您的代码会覆盖窗口的名称。但显然不是。（这是一个很好的例子，说明为什么最好避免使用全局变量。）无论如何，选择一个不同的变量名，一个不与现有name属性冲突的变量名，可以解决它。
但是您在代码中做了一些可能不明显的事情，所以让我们更深入地研究一下（这里我使用foo版本以避免混淆）：
// Here, you're defining a global variable called `foo`
var foo ='John';
// Here you have a global function, `displayName`, which accepts an
// *argument* named `foo`
function displayName(foo)
{
// Here, within the function, the symbol `foo` refers to the
// *argument*, not to the global. The global is *hidden* by
// the argument (this is called "shadowing" -- the local
// "shadows" the global).
alert('Hi I am '+foo);
}
并在您的 HTML 中：
<!-- Here, `foo` refers to the global variable -->
<button type="button" onclick="displayName(foo)">Display Name</button>
如果我们更改该参数的名称可能会更清楚：
var foo ='John';
function displayName(f)
{
alert('Hi I am '+f);
}
并且 HTML 没有改变：
<!-- Here, `foo` refers to the global variable -->
<button type="button" onclick="displayName(foo)">Display Name</button>
上面我说过最好避免使用全局变量，你的问题就是一个很好的例子。那么我们该怎么做呢？好吧，主要是通过避免 DOM0 处理程序（比如你的 DOM0 处理程序onclick）。以下是你可以如何重铸你的小提琴：Live copy
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="theButton" type="button">Display Name</button>
<script type="text/javascript">
// Start a "scoping function"
(function() {
// Everything within this function is local to the function,
// not global
var name = 'John';
function displayName(n)
{
alert('Hi I am ' + n);
}
// Instead of the onclick= in the markup, hook up here in
// the code
document.getElementById("theButton").onclick = function() {
displayName(name);
};
})();
</script>
</body>
</html>
请注意我们是如何自由使用name的，因为我们没有创建全局变量或与全局变量交互。另请注意，我将代码放在按钮之后，因为代码假定按钮已经存在。
更好的是，使用addEventListener或attachEvent连接处理程序。
var btn = document.getElementById("theButton");
if (btn.addEventListener) {
btn.addEventListener("click", handler, false);
}
else if (btn.attachEvent) {
btn.attachEvent("onclick", handler);
}
else {
// Punt!
btn.onclick = handler;
}
function handler() {
display(name);
}
如您所见，我们必须同时处理这两个问题，因为旧版本的 IE（或“兼容模式”下的新版本）没有addEventListener. 这是使用 jQuery 之类的库的原因之一，但我知道您正在尝试在没有库的情况下扩展您的理解，这是有充分理由的。最好的！
最后，你问：
我知道我可以通过将变量放在函数内部来修复它，但是有没有办法调用在函数外部声明的第一个变量（在脚本类型之后的变量）？
以上都没有回答这个问题。:-) 答案是：是的，您可以直接引用它，方法是删除影响全局的参数：Live example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var foo ='John';
// Note: No argument declared
function displayName()
{
// Because the argument doesn't shadow it, we can refer
// to foo, because foo is declared in an *enclosing
// context*
alert('Hi I am '+foo);
}
</script>
</head>
<body>
<!-- Note we don't pass any argument ------v -->
<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>