javascript - 如何在全局和 Element 原型(prototype)中使用 JavaScript 函数？

Question

发生的事情应该是非常基本的，我已经将所有内容“简化”为一个简单的示例，希望在这里能更好地理解。

我在我的一个脚本中声明了一个“全局”函数:

function byClass(cl)
{
 return arguments[1]?
  arguments[1].GetElementsByClassName(cl):
  document.getElementsByClassName(cl);
}

它的作用是:使用字符串参数 (=cl) 调用 byClass() 并返回 document.getElementsByClassName 结果。如果您还将页面的元素指定为可选的第二个参数，则该函数将仅在指定元素的“内部”执行 .getElementsByClassName。

例子:

<span class="inner">Outside</span>
<p id="outer">
 <span class="inner">Inside</span>
</p>

var both=byClass('inner'); ==> [both 1st and 2nd span]

var out=document.getElementById('outer');
var in =byClass('inner',out); ==> [only 2nd span from inside P element]

我现在想要做的是像这样将函数“附加”到 HTMLElement 原型(prototype):

HTMLElement.prototype.byClass=function(cl){byClass(cl,this);}

因此，当 .byClass() 被添加到代码中的一个元素时，它将在它附加到的元素“内部”执行 byClass 函数。作为代码应用，这将像这样工作:

var out=document.getElementById('outer');
var in =out.byClass('inner'); ==> [only 2nd span from inside P]

一切正常，到目前为止没有遇到任何问题。

但是，当向元素的“onClick”事件添加一个简单的 byClass() 调用时，它不会执行全局 byClass()，而基本上是在触发它的元素“内部”调用 this.byClass()。

var out=document.getElementById('outer');
var in1=byClass('inner'); ==> [works as expected]
var in2=out.byClass('inner'); ==> [works as expected]

但是

<input type="button" onclick="console.debug(byClass('inner'));">

单击时将执行特定于元素的 this.byClass() 而不是全局 byClass()。

我怎样才能避免...？我迷路了。

我知道我可以将它称为 onClick 事件中的 window.byClass() ，但我想让事情简单一些，不留任何运气“也许我不会忘记在它之前添加窗口”。 .

感谢任何帮助或想法!

请不要使用 jQuery。请不要评论“不要扩展 DOM”。

谢谢。 :)

Answer 1

How can I avoid that...?

通过 not using event handler attributes in HTML .没有办法解决这个问题。

当然，您也可以避免首先将.byClass 属性放在您的元素上，但是the problem对于元素的所有名称和 document 的属性都存在。