Javascript函数和表单名称冲突 [英] Javascript Function and Form Name conflict
问题描述
我有一个不会运行的javascript函数并抛出错误。花了大约一个小时才意识到我的表单与函数名称相同。表单名称与函数名称冲突似乎很奇怪，但我仍然更改名称，一切正常。有谁知道为什么会发生这种情况？
I have a javascript function that would not run and threw an error. It took about an hour to realize that my form had the same name as the function. It seemed odd that a form name would be in conflict with a function name, but I change the name anyway and everything worked fine. Does anyone know why this would even happen?
如果你运行这段代码它会失败，但是如果你改变了表格名称就行了，很奇怪。
If you run this code it will fail, but if you change the form name it works, very strange.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function mytest(){alert("hello");}
</script>
</head>
<body>
<form name="mytest" ></form>
<a href="#" onClick="mytest();">Click Me</a>
</body>
</html>
我在IE6上运行它。对我来说奇怪的是，一个是Javascript代码，另一个是HTML的属性。
I am running this on IE6. What is strange to me is that one is Javascript code and the other is an attribute of HTML.
实时链接，你可以看到这种情况：
JSBin
Live link where you can see this happening:
JSBin
推荐答案
要在这里添加一些细节，你需要了解javascript的范围链。
To add some detail to what is happening here you need to understand javascript's scope chain.
范围对象
范围对象是在执行函数时创建的隐藏对象，其中使用 var 作为属性放置，执行函数内的任何命名的函数也作为属性放置在作用域对象上。
A scope object is a hidden object created when a function is executed on which variables declared with var are placed as properties, also any named function inside the executing function are also placed as properties on the scope object.
当请求诸如 mytest 之类的标识符时，javascript将搜索附加到当前范围对象的该名称（顺便说一下范围对象也称为执行上下文。
When an identifier such as mytest is requested javascript searches for that name attached to the current scope object (btw the scope object is also known as the "execution context").
范围链
在函数内声明函数时，当前作用域对象附加到函数。当此内部函数正在执行时（因此具有自己的作用域对象），执行的代码不仅可以访问当前作用域对象，还可以访问创建当前正在执行的函数的作用域对象。 停在这里，重新阅读最后一句。这就是所谓的范围链，链条将与函数内部的函数一样深（这种情况发生了很多当使用像JQuery这样的框架时。
When a function is declared inside a function the current scope object is attached to the function. When this inner function is executing (and therefore has its own scope object) the code executing has access to not only the current scope object but also the scope object in which the currently executing function was created. Stop Here, Re-read that last sentence. This is known as the scope chain, the chain will be as deep as there are functions inside of functions (this happens a lot when using frameworks like JQuery).
因此，当在当前范围对象上搜索标识符失败时，它会查看链上的下一个范围对象。它一直向上走，直到它到达全局对象（在全局级别声明的函数将全局对象作为其范围对象）。
Hence when the search for an identifier fails on the current scope object it takes a look at the next scope object up the chain. It keeps walking up the chain until it hits the global object (functions declared at the global level have the global object as their scope object).
事件属性怪异
当浏览器在诸如onclick之类的属性文本中执行代码时，它将此代码视为一个函数。但是，浏览器会使用附加到此功能的明显范围链来执行奇怪的操作。通常，它们将当前元素和文档元素（以及可能的其他元素）注入到作用域链中，就好像它们是范围对象一样。
When browsers execute code inside the text of an attribute such as onclick it treats this code as if it were a function. However browsers will do odd things with the apparent scope chain attached to this "function". Typically they inject the current element and the document element (and maybe other elements in between) as if they were scope objects into the scope chain.
因此，例如更改onclick示例中的代码为alert（href）。您将在警告框中看到页面的路径，后跟＃。这是因为当前元素在作用域链中，因此 href 由其 href 属性解析。
So for example change the onclick code in your example to "alert(href)". You will see the path to your page followed by # in the alert box. This is because the current element is in the scope chain and hence href is resolved by its href property.
在问题的情况下，代码到达范围链中的文档（放在全局窗口对象上方） ）并找到标识符mytest（它是对表单的引用），因此尝试将其值作为函数使用（并失败）。
In the case in the question the code arrives at the document in the scope chain (which is placed above the global window object) and finds the identifier "mytest" (which is reference to a form) and hence attempts to use the value of that as a function (and fails).
这篇关于Javascript函数和表单名称冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
