我对Jquery有相当不错的理解,但决定深入研究JavaScript,因为我不了解"原始"JavaScript.
所以这是我的问题:在文档加载时,我的函数执行正常并提醒:"我的名字是约翰",但是在按钮上单击它警报只是:'嗨,我的名字是'.我的问题是为什么会发生这种情况,我该如何解决？
我知道我可以通过将我的变量INSIDE放入我的函数来修复它,但有没有办法调用我的函数外部声明的FIRST变量(在脚本类型之后的变量)？
小提琴
我的代码:
<!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>
T.J*_*der 15
你的代码实际上很好,你刚刚为全局选择了一个不幸的名字: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).这是你如何改写你的小提琴:实时拷贝
<!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这样的库的一个原因,但我知道你试图在没有一个库的情况下扩展你的理解,并且有充分的理由.最好的!
最后,你问:
我知道我可以通过将我的变量INSIDE放入我的函数来修复它,但有没有办法调用我的函数外部声明的FIRST变量(在脚本类型之后的变量)？
上述答案都没有.:-)答案是:是的,您可以直接引用它,方法是删除隐藏global:Live示例的参数
<!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>