如何使用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：你想在StateChange this =元素

您实际上不必将元素实例传递给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的第二个参数传递。）

更多阅读：

• 神话方法
• 你必须记住this

Answer 2

一种方法是：

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