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

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

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

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

它的作用是：您使用字符串参数（= cl）调用byClass（），并返回一个document.getElementsByClassName结果。如果还将页面的Element指定为可选的第二个参数，则该函数将仅在指定元素的“内部”执行.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原型，如下所示：

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]

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

但是，在将简单的byClass（）调用添加到元素的“ onClick”事件时，它不会执行全局的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”注释。

谢谢。 :)

最佳答案

我该如何避免...？


通过not using event handler attributes in HTML。真的没有办法解决。

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

关于javascript - 如何在全局和Element原型(prototype)中使用JavaScript函数？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32077418/