Как передать this в функцию с помощью JavaScript

Question

У меня есть следующий код, который предназначен для создания обработчика события onchange для всех элементов с именем класса 'State'.Единственная проблема заключается в том, что я хочу, чтобы элемент передавался в функцию 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 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.)

Больше чтения:

• Мифические методы
• Вы должны запомнить this

Answer 2

Один из способов:

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