JavaScript中的保留函数名称 [英] Reserved function names in JavaScript

问题描述

重命名我的函数后，代码停止工作.这个新名称scrollIntoView似乎与 方法.

After renaming my function the code stopped working. That new name scrollIntoView seems to be clashing with the element.scrollIntoView() method.

<div onmousedown="scrollIntoView('id001')"/>

function scrollIntoView(id) {
    alert(id);
}

我创建了一个简单的测试用例 https://jsfiddle.net/mgtn215y/显示我的功能被忽略，而使用element.scrollIntoView()甚至

I've created a simple test case https://jsfiddle.net/mgtn215y/ which has shown my function is simply ignored in favor of element.scrollIntoView() even

• 未在元素上调用
• 属性不匹配

解决方案很明显-使用不同的函数名称.由于此行为在主要浏览器之间是一致的，因此我希望在某处指定该行为.但是，我找不到任何相关的东西，例如 JavaScript词汇语法.有这种行为的背景吗?

The solution is obvious - to use a different function name. As this behavior is consistent across major browsers, I expect this is specified somewhere. However, I couldn't find anything related in e.g. JavaScript lexical grammar. Is there any background for this behavior?

推荐答案

问题是从在HTML源代码中声明的HTML元素属性值编译的函数的作用域链.形式为on_eventName=functionBodyCode的属性表现出这种行为.

The issue is the scope chain of functions compiled from HTML element attribute values declared in HTML source. Attributes of the form on_eventName=functionBodyCode exhibit this behavior.

出于历史原因(目前尚不存在DOM，尚没有发明document.getElementByID ...)，此类函数是使用范围链进行编译的，该范围链包含提供了事件处理程序属性的对象，任何元素所在的form元素和document对象. 但是在模拟Netscape行为时，不同的浏览器采用了不同的方法.一些浏览器包括提供事件处理程序属性的元素的所有父对象，而其他浏览器则省略了某些相关对象，例如document.

For historical reasons (the DOM did not exist in its current form, document.getElementByID had yet to be invented...) such functions are compiled with a scope chain comprising the object on which the event handler attribute is provided, any form element the element is within, and the document object. However different browsers took different approaches when emulating Netscape behavior. Some browsers included any and every parent object of an element providing an event handler attribute, while others omitted some pertinent objects such as document.

技术细节可以在"Javascript权威指南" O'Reilly的"19.1.6.事件处理程序的范围"部分中找到.

Technical detail may be found in "Javascript the definitive guide" O'Reilly, section "19.1.6. Scope of Event Handlers".

主要建议是避免以HTML提供事件处理程序-而是使用addEventListener在JavaScript中添加事件处理程序.如果出于某种原因必须在HTML属性值中编码函数调用，请避免使用作为DOM对象方法的函数名称.

The main recommendation is to avoid supplying event handlers in HTML - add them in JavaScript using addEventListener instead. If for some reason function calls must be coded in HTML attribute values, avoid using function names that are methods of DOM objects.

请注意，事件处理程序的自定义范围链仅适用于从HTML属性生成的函数. 不不适用于使用JavaScript创建并使用addEventListener或element.onEventName=aFunctionObject添加到元素的函数.

Note the custom scope chain for event handlers only applies to functions generated from HTML attributes. It does not apply to functions created in JavaScript and added to an element using addEventListener or element.onEventName=aFunctionObject.

以下代码段演示了在HTML中定义的事件处理程序的作用域链中外部元素的属性名称:

The following snippet demonstrates locating property names of outer elements in the scope chain of event handlers defined in HTML: :

<form name="formName1" action="">
<p> Try to access the elements collection of the form:
   <button type="button"
      onclick="console.log( elements);">elements
   </button>
</p>

</form>
<form name="formName2" action="" onsubmit="return false">
<p> Try to access form name as form.name:
  <button type="button"
     onclick="console.log( 'form.name: %s', form.name);">form.name
  </button>
</p>
</form>

<form name="formName3" action="" onsubmit="return false">
<p>Access document.write as "write"
   <button type="button"
      onclick="console.log( 'write: %s', write);">write
   </button>
</p>
</form>

• 在第一种形式中，elements是周围表单元素的属性.

• In the first form, elements is a property of the surrounding form element.

在第二种形式中，form是HTMLButtonElement的属性.

In the second form, form is a property of the HTMLButtonElement.

在第三种形式中，write是document的方法.

In the third form, write is a method of document.

这篇关于JavaScript中的保留函数名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！