如何使用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参数：< / p>

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

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

选项2：您需要this = this，因为您要设置处理程序

这与上述原理相同，只是有不同的论点。在这种情况下，您需要传递this in：

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

Answer 2

一种方法是：

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