各种自定义变量名称（如 createComment）在内联 javascript 中被覆盖，但在外部 js 中没有。为什么？

Question

我有这样的代码

<div id="loadCommentBestComment" style="cursor:pointer" onclick="createComment('af0532_$dvkpo6420')">load the most useful comment.</div>

问题是我点击它但没有任何执行，函数 createComment() 甚至没有被调用。
几个小时试图弄清楚发生了什么但没有。然后尝试将 createComment 的名称更改为另一个名称，如 createCommentAlias() 并且一切正常。
这不是第一次发生，我以前也遇到过这种奇怪的行为。并且再次由于变量名称似乎被其他本机变量覆盖。
另一个示例，名称 nextSibling 是 Dom 元素的方法，因此通常可以用作 var nextSibling，但在内联 js 它再次被其他东西覆盖。而且只有当 js 是内联时才会发生这种情况。
所以我想知道这些变量是什么，它们来自哪里，并且可能有一个它们的列表，这样我就不会使用这些名称再次.

Answer 1

问题是，由于您使用了 event handler content attribute，您的全局函数...

window.createComment

...隐藏在...

Document.prototype.createComment

此行为在 step 10 of getting the current value of the event handler 中有解释：

Lexical Environment Scope

If H is an element's event handler, then let Scope be the result of NewObjectEnvironment(document, the global environment).

Otherwise, H is a Window object's event handler: let Scope be the global environment.

If form owner is not null, let Scope be the result of NewObjectEnvironment(form owner, Scope).

If element is not null, let Scope be the result of NewObjectEnvironment(element, Scope).

Note: NewObjectEnvironment() is defined in ECMAScript edition 5 section 10.2.2.3 NewObjectEnvironment (O, E)

这意味着全局作用域被

覆盖

文档
表单所有者（如果有）
元素

因此，您可以

重命名您的函数

function createComment__() {
  var div = document.getElementById('loadComment');
  div.style.left = "200px";
  div.style.color = "red";
}

#loadComment {
  position: absolute;
}

<p id="loadComment" onclick="createComment__()">lolol</p>

使用window.createComment（假设window没有被隐藏）：

<p id="loadComment" onclick="window.createComment()">lolol</p>

function createComment() {
  var div = document.getElementById('loadComment');
  div.style.left = "200px";
  div.style.color = "red";
}

#loadComment {
  position: absolute;
}

<p id="loadComment" onclick="window.createComment()">lolol</p>

避免事件处理程序内容属性：

document.getElementById('loadComment').onclick = createComment;

function createComment() {
  var div = document.getElementById('loadComment');
  div.style.left = "200px";
  div.style.color = "red";
}
document.getElementById('loadComment').onclick = createComment;

#loadComment {
  position: absolute;
}

<p id="loadComment">lolol</p>

唯一安全的方法是第三种方法，因为您无法确定某些浏览器是否实现了隐藏您的变量的非标准功能。或者未来的规范可能会引入该功能（参见）。

各种自定义变量名称（如 createComment）在内联 javascript 中被覆盖，但在外部 js 中没有。为什么？

Various custom variable names like createComment get overriden in inline javascript but not in external js. Why?

javascript

variables

scope