如何使用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你传入call的函数.这使用函数对象的JavaScript 特性,它允许你定义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