JavaScript 中的保留函数名

问题描述

重命名我的函数后，代码停止工作.新名称 scrollIntoView 似乎与 element.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.

引用 2020 年，HTML5 将 HTML 属性处理程序的作用域链指定为元素".外形元素>文件"在范围"下在 内部原始未编译处理程序.

Citing in 2020, HTML5 specifies the scope chain for HTML attribute handlers as "element > outer form element > document" under "Scope" within numbered list item 3.9 of internal raw uncompiled handler.

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