javascript FF / Safari中的xa保留关键字不在IE中吗？
[英]Is x a reserved keyword in Javascript FF/Safari not in IE?
问题描述
A web page of a web application was showing a strange error. 
Web应用程序的网页显示一个奇怪的错误。 I regressively removed all the HTML/CSS/JS code and arrived to the basic and simple code below. 我递归地删除了所有HTML / CSS / JS代码，并找到了下面的基本和简单代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>test</title>
<script type="text/javascript">
var TestObj =
{
foo: function() {}
}
alert(x); //ok displays "undefined"
var x = TestObj.foo;
var z = TestObj.foo;
</script>
</head><body>
<p onclick='alert(x);'>Click shows function foo!</p>
<img onclick='alert(x);' alt='CRAZY click displays a number in FF/Safari not function foo' src='' style='display: block; width: 100px; height: 100px; border: 1px solid #00ff00;'>
<p onclick='alert(x);'>Click shows function foo!</p>
</body></html>
It's crazy: when clicking on P elements the string "function(){}" is displaied as expected. 太疯狂了：单击P元素时，字符串“ function（）{}”会按预期显示。 But when clicking on IMG element it shows a number as if x function got in some way removed from memory or deinstantiated (it does not even show x as "undefined" but as a number). 但是， 当单击IMG元素时，它会显示一个数字，好像x函数以某种方式从内存中删除或实例化了 （它甚至不将x显示为“ undefined”，而是显示为数字）。
To let you test it quickly I placed the working test above also here . 为了让您快速进行测试，我也在这里放置了工作测试。
This can be reproduced on both Firefox 3.6 and Safari 4.0.4 . 可以在Firefox 3.6和Safari 4.0.4上复制。
Everything works properly only on IE7+ . 一切都只能在IE7 +上正常运行 。
I'm really clueless, I was wondering if x is maybe a reserved keyword in JS Firefox/Safari. 我真的很笨，我想知道x是否可能是JS Firefox / Safari中的保留关键字。 Thanks to anyone who could help! 感谢任何可以提供帮助的人！
FYI: 仅供参考：
- if you repalce x() with z() everything work prefectly in all browsers (this is even more crazy to me) 如果用z（）代替x（），那么所有浏览器都可以正常运行（这对我来说更疯狂）
- adding a real image in src attribute does not fix the problem 在src属性中添加实际图像不能解决问题
- removing style in img does not fix the problem (i gave style to image only to help you clicking on image thus you can see the imnage border) 删除img中的样式不能解决问题（我为图像提供样式只是为了帮助您单击图像，因此您可以看到图像边框）
4 个解决方案
解决方案1
6 已采纳 2010-03-22 19:27:26
Your problem is with variable scope, not that "x" is reserved. 您的问题是变量范围，而不是保留“ x”。 An image object has a property named "x". 图像对象具有名为“ x”的属性。 You can see this with Chrome's developer tools. 您可以使用Chrome的开发者工具查看此内容。 When you call "alert(x);" 当您调用“警报（x）;”时 on the image object, the "x" in scope is the "x" property on the image. 在图像对象上，作用域中的“ x”是图像上的“ x”属性。
解决方案2
2 2010-03-22 20:46:38
Just to complete the answers from David and Daniel , this behavior is not documented at all, but it work like the following in almost every modern browser: 只是为了完成David和Daniel的回答，根本没有记录这种行为，但是几乎在每个现代浏览器中，它的行为都如下所示：
The content of an inline event handler becomes the FunctionBody of a function that the browser calls when it fires that event. 内联事件处理程序的内容成为浏览器在触发该事件时调用的函数的FunctionBody 。
The scope chain of this function is augmeted with the element, the element's FORM (if it exits and is a FORM element), and document itself. 该函数的作用域链与元素，元素的FORM （如果存在并且是FORM元素）一起进行扩展 ，并document自身。
It looks something like this in code: 在代码中看起来像这样：
function onclick(event) {
with(document) {
with(this.form) {
with(this) {
// inline event handler content...
}
}
}
}
This behavior can cause all sort of name conflicts due the augmentation of the scope chain you cannot be 100% sure about what you are referring, it could be an attribute of the element itself, an attribute of the element's form, an attribute of the document object or any global variable. 这种行为可能会导致各种名称冲突，这是因为您无法100％确定所引用的范围链，因此可能是元素本身的属性，元素形式的属性， document的属性对象或任何全局变量。
Recommended article: 推荐文章：
解决方案3
1 2010-03-22 19:29:10
I can't seem to find any documentation to support this, but my guess is that the <img> tag is being treated specially, and the object is actually a JavaScript Image object, not a normal DOM element. 我似乎找不到任何文档来支持此操作，但是我的猜测是<img>标签受到了特殊对待，并且该对象实际上是JavaScript Image对象，而不是普通的DOM元素。 The Image object has an x property, and so your unscoped reference to x means Image.x . Image对象具有x属性，因此您对x的无范围引用意味着Image.x 。 If you want the global x property, just use window.x instead. 如果要使用全局x属性，请改用window.x 。
解决方案4
0 2010-03-22 20:40:17
在dom规范之前，某些浏览器仍然支持图像，元素和区域元素，它们在页面上的坐标都只具有x和y属性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.