Question

我对Jquery有相当不错的理解，但决定深入研究JavaScript，因为我不了解“原始”JavaScript。
所以这是我的问题：在文档加载时我的功能执行正常并发出警告：'我的名字是约翰'但是点击按钮它只是警告：'我的名字是' 的。我的问题是为什么会发生这种情况，我该如何解决？
我知道我可以通过将我的变量INSIDE放在我的函数中来修复它，但有没有办法调用我的函数之后声明的FIRST变量（在脚本类型之后变量）？

Fiddle here
我的代码：

<!DOCTYPE html>
<head>
<script type="text/javascript">

//If I try to call this variable WILL NOT WORK:(

var name ='John'; <--SO HOW CAN I CALL THIS VARIABLE TO MY CLICK FUNCTION?--> 

function displayName(name)
{
//If I put my variable like this WILL WORK fine...
//var name ='John';
alert('Hi I am '+name);

}

//This function works on document load
//displayName(name);
</script>
</head>
<body>

<!--This doesn't work well if variable is OUTSIDE my function:(-->
<button type="button" onclick="displayName(name)">Display Name</button>
</body>
</html>

Answer 1

您的代码实际上很好，您刚刚为全局选择了一个不幸的名称：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处理程序（如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，因为我们没有创建或与globals交互。另请注意，我将代码放在按钮之后，因为代码假定按钮已经存在。

更好的是，使用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这样的库的一个原因，但我知道你试图在没有一个库的情况下扩展你的理解，并且有充分的理由。最好的！

最后，你问：

我知道我可以通过将我的变量INSIDE放在我的函数中来修复它，但有没有办法调用我的函数外部声明的FIRST变量（在脚本类型之后的变量）？

上述答案都没有。 :-)答案是：是的，您可以通过删除隐藏全局的参数来直接引用它：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>

Answer 2

Arhhh遭到殴打，打算说使用名字是一个糟糕的选择：

http://jsfiddle.net/6nuCx/7/

Answer 3

试试这个：

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

如何正确警告我的变量

3 个答案: