javascript - 如何使用 JavaScript 将 'this' 传递给函数

Question

我有以下代码，旨在为类名为“State”的所有元素创建一个 onchange 事件处理程序。唯一的问题是我希望将元素传递到“StateChange”函数中。如何更新此 JS 以将“this”传递给 StateChange 函数？谢谢!

var c = document.getElementsByClassName('State');
for (i = 0; i < c.length; i++) c[i].onchange = createEventHandler( StateChange, c[i] );

编辑:我忘记提供 createEventHandler 函数。抱歉...这是:

function createEventHandler(fn, input) {
      return function () {
          fn(input);
      };
}

另外，一些澄清。该函数的目的是避免将 onchange 事件放在类名 = 'State' 的每个元素旁边。结果应该和我写的一样:

<select id="MyState1" class="State" onchange="StateChange(this)">

Answer 1

更新:

关于你更新的问题:你说过你想要的最终结果就像你这样做了一样:

<select id="MyState1" class="State" onchange="StateChange(this)">

您引用的 createEventHandler函数正是这样做的。

原始答案:

我不完全确定我确切地知道您要做什么。我至少可以通过两种方式阅读问题:

1. 在 StateChange 内函数调用，你想要this引用发生变化的元素。
2. 在 StateChange 内函数调用，你想要this与this相同您在何处设置您的事件处理程序。

选项 1:您想要 this = StateChange 中的元素

您实际上不必将元素实例传递给 createEventHandler ，因为当事件发生时，this由于您连接它的方式，将引用该元素。但是如果你更喜欢明确地设置它，你的 createEventHandler函数可能如下所示:

function createEventHandler(handler, element) {
    return function(event) {
        return handler.call(element, event || window.event);
    };
}

它的作用是返回一个函数，当事件被触发时，该函数将使用 StateChange 调用您传入的函数 ( this )设置为 element你传入.. 这使用了 JavaScript call 函数对象的特性，它允许你定义什么 this将在函数调用期间。您只需将它作为第一个参数传递给 call (后续参数传递给被调用的函数)。

如果您想依赖于您设置处理程序的方式，this已经设置为元素实例，您可以取消 element参数:

function createEventHandler(handler) {
    return function(event) {
        return handler.call(this, event || window.event);
    };
}

那只是传递了 this浏览器为事件处理程序设置的值。

选项 2:您想要 this = this从您设置处理程序的位置开始

原理同上，只是论证不同。在这种情况下，您需要传递 this在:

var c = document.getElementsByClassName('State');
for (i = 0; i < c.length; i++) c[i].onchange = createEventHandler( StateChange, this, c[i] );

...然后 createEventHandler看起来像这样:

function createEventHandler(handler, thisArg, element) {
    return function(event) {
        return handler.call(thisArg, event || window.event, element);
    };
}

(请注意，我已将该元素作为第二个参数传递给 StateChange。)

更多阅读:

• Mythical methods
• You must remember this