个人中心
gpt4 book ai didi

javascript - 如何正确提醒我的变量

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:53:49 26 4
gpt4 key购买 nike

我对 Jquery 有相当的了解，但决定深入 JavaScript，因为我不了解“原始”JavaScript。
所以这是我的问题:在文档加载时，我的函数执行正常并发出警报:'嗨，我的名字是 John' 但在单击按钮时警报只是:'嗨，我的名字是' 。我的问题是为什么会发生这种情况，我该如何解决？
我知道我可以通过将我的变量放在函数内部来修复它，但是有没有办法调用我在函数外部声明的第一个变量(变量紧跟在脚本类型之后)？

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>

最佳答案

您的代码实际上没有问题，您只是为全局选择了一个不幸的名称:name。如果您将其更改为其他内容(如 foo)，它会起作用:http://jsfiddle.net/6nuCx/1/

原因有点晦涩难懂。全局变量成为 window 对象的属性。但是 window 对象已经有一个名为 name 的属性，它是窗口的 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 中的处理程序)。以下是您重铸 fiddle 的方法: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 这样的库的原因之一，但我知道您有充分的理由试图在没有库的情况下扩展您的理解。最好的!

最后，你问:

I know that I can FIX IT by putting my variable INSIDE my function, but is there a way to call my FIRST variable declared outside my function (variable just after script type)?

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

关于javascript - 如何正确提醒我的变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11703321/

26 4 0
文章推荐： ios - iPhone/iPad 壁纸图像 monotuch
文章推荐： android - 有没有好的安卓图表库？
文章推荐： iphone - NSArray 中的 SQL Sum 和 If/Case 语句
文章推荐： android - 如何显示图像的一部分？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com