是“清除”在JavaScript中的保留字?
我花了很长的时间弄清楚,我不应该使用clear()作为JavaScript中的函数的名称:
<head> <script type="text/javascript" src="Array.js"></script> </head> <body> Hello!!!!<br> <button type="button" onClick="clear()" id="ppp">Shoo!</button><br> <button type="button" onClick="add()" id="add">Add a few elements</button><br> <button type="button" onClick="check()" id="check">Check the array</button><br> <p id="results">Results will appear here.</p> <script type="text/javascript"> initialize(); </script> </body>
这里是Array.js:
var results; function initialize(){ results = document.getElementById("results"); } function add() { results.firstChild.data="add"; } function clear() { results.firstChild.data = "Hello?"; } function check() { results.firstChild.data = "check"; }
症状:点击“添加”和“检查”按钮给我我期望的结果,但点击“清除”按钮什么也不做。
如果我将clear()重命名为clearxyz() ,则可以正常工作。
我的问题:
- 是“清除”一个保留字吗? 我没有在列表中看到: https : //developer.mozilla.org/en/JavaScript/Reference/Reserved_Words
- 有没有一个调试技巧,我应该用来在未来这样的事情呢? 我花了很长时间(我是一个小白鼠!)弄清楚函数的名字是我的问题。
非常感谢。 编辑:我使用Firefox 6.0,并添加了一个换行符,以显示Array.js启动的位置。
正如其他人所说, clear
不是一个保留的关键字。 看来被调用的函数是document.clear
[MDN] 。 调用
console.log(clear === document.clear);
事件处理程序内部返回true
。
DEMO
所以看来, document
是在事件处理程序的范围链….现在的问题是为什么。
JavaScript:权威指南说:
在作为HTML属性的事件处理程序中,Document对象位于Window对象(…)之前的作用域链中,
由于您的方法是全局的,意味着它是window
对象的一个属性,所以在范围链中找不到它,因为document.clear
在范围链中更早。
我还没有找到任何这方面的规范。 该指南还说,不应该依赖于此,所以我认为这不是官方的。
如果在表单中有表单元素,那么即使相应的form
元素也将在作用域链中(不确定这是否适用于所有浏览器)。 这是混淆的另一个原因。
有两种(不是唯一的)方法来避免这种情况:
-
不要使用内联事件处理程序。 混合逻辑和表示被认为是不好的做法。 还有其他的 方法来附加事件处理程序。
-
不要污染全局名称空间。 在全局范围内创建一个对象(使用您确定的名称不会与任何
window
或document
属性或HTML元素的ID冲突),并将函数作为此对象的属性进行分配。 无论何时你调用一个函数,都可以通过这个对象来引用它。 命名空间的代码还有其他的方法 。
不是根据MDN 。
编辑:
你让我好奇,所以我把这个小小的孩子扔在一起。
function clear() { alert("you cleared just fine"); } $('clear').addEvent('click', clear);
有一个名为clear
的函数似乎工作得很好。
好问题。 我认为这个问题是一个范围问题 – 你的onClick="clear()"
不是你定义的clear
函数,但是我不确定它会发生什么。 将其更改为window.clear()
或一个简单地调用clear
作品的新函数。
<body> Hello!!!!<br> <button type="button" onClick="clear()" id="ppp">Shoo!</button><br> <button type="button" onClick="window.clear()" id="ppp">window.clear!</button><br> <button type="button" onClick="clear2()" id="ppp">clear2!</button><br> <button type="button" onClick="add()" id="add">Add a few elements</button><br> <button type="button" onClick="check()" id="check">Check the array</button><br> <p id="results">Results will appear here.</p> <script type="text/javascript"> var results; function initialize(){ results = document.getElementById("results"); } function add() { results.firstChild.data="add"; } function clear() { results.firstChild.data = "Hello"; } function clear2() { clear(); } function check() { results.firstChild.data = "check"; } initialize(); </script> </body>
不, clear
不是保留关键字。
问题在于,由于您使用了事件处理程序内容属性 ,因此您的全局函数window.clear
被过时的document.clear
所遮蔽。
此行为在获取事件处理程序的当前值的 步骤10中进行了说明:
词汇环境范围
如果H是一个元素的事件处理程序 ,那么让Scope是NewObjectEnvironment( 文档 , 全局环境 )的结果。
否则, H是
Window
对象的事件处理程序 :让Scope成为全局环境 。如果表单所有者不为null,则让Scope为NewObjectEnvironment( 表单所有者 , 范围 )的结果。
如果元素不为null,则让Scope为NewObjectEnvironment( element,Scope )的结果。
注意: NewObjectEnvironment()在ECMAScript第5版第10.2.2.3节中定义NewObjectEnvironment(O,E)
这意味着全球范围被阴影
- 该文件
- 表单所有者,如果有的话
- 元素
所以,你可以
-
重命名你的功能。
function clear__() { document.body.style.background = 'green'; }
<button type="button" onclick="clear__()">Click me</button>