Что происходит здесь под капотом для обработчика событий?Относится ли это к другим функциям?

Question

Привет, поэтому я просто хочу понять, как javascript / реагирует на то, что происходит, когда у меня запускается функция из события.Я собираюсь показать три различных сегмента кода, 2 из которых работают, один из которых не работает, и посмотреть, правильно ли я их понимаю.:)

setField(e){console.log("in setfield", e)}

<select multiple className="form-control" id="sel2" name="sellist2"
      onChange={() => this.setField()}>

это не работает, потому что оно передает нулевое значение функции, которая ожидает значение, в данном случае e.однако, если бы функция просто отправляла что-то уже в состоянии, это было бы разумным способом сделать это.

setField(e){console.log("in setfield", e)}

<select multiple className="form-control" id="sel2" name="sellist2"
      onChange={(e) => this.setField(e)}>

это работает, потому что она получает событие как e и затем передает его функции.Как он знает, чтобы связать событие с е?распространяется ли эта функциональность на другие вещи при работе с html?

setField(e){console.log("in setfield", e)}

<select multiple className="form-control" id="sel2" name="sellist2"
      onChange={this.setField}>

Я действительно не понимаю, почему она работает, но это так.Я предполагаю, что он по своей сути знает, чтобы передать событие в качестве функции по умолчанию.опять эта встроенная логика встречается где-то еще, может быть, не обязательно для событий?

Еще раз спасибо.Я новичок в javascript, поэтому интересно изучить все особенности javascript.к сожалению, большая часть обучения происходит через разочарование отладки!

Answer 1

Это не сложно.Независимо от того, какую функцию Javascript вы назначите onChange, она будет вызвана в соответствующее время и получит один единственный аргумент, обычно известный как e.Вы можете дать этому аргументу любое имя в своей функции (или вообще не объявлять его), но первый аргумент будет там.

Итак, когда вы сделаете это:

onChange={() => this.setField()}

Вы игнорируете аргумент, переданный вашему обработчику событий, а затем внутри того обработчика событий, который вы вызываете this.setField(), который, что неудивительно, не передает никакого аргумента setField().В действительности то, что происходит на самом деле, таково:

onChange={(e) => this.setField()}

Как узнать, как связать событие с e?распространяется ли эта функциональность на другие вещи при работе с html?

В спецификации DOM говорится, что при вызове обработчика события onChange ему будет передан объект e в качестве первого аргумента (независимо от того,объявить это или нет, это как первый аргумент функции).Это просто, как обратные вызовы работают в Javascript.Вызывающая сторона обратного вызова решает, какие аргументы они собираются передать обратному вызову.Когда вы объявляете обратный вызов, вам решать, объявляете ли вы аргумент и используете его или нет.Независимо от того, как вы объявляете это, вызывающий передает его.

Для этого раздела кода:

onChange={this.setField}

Вы говорите, что функция, которую вы хотите быть обработчиком события onChange, является вашей setField() метод.Поэтому неудивительно, что когда DOM вызывает этот метод, он передает объект события в качестве первого аргумента, как в приведенном выше примере.

Этот я действительно не понимаю, почему он работает, но этоделает.Я предполагаю, что он по своей сути знает, чтобы передать событие в качестве функции по умолчанию.Опять же, эта встроенная логика встречается где-то еще, может быть, не обязательно для событий?

Как описано ранее, в спецификации DOM указан этот обработчик событий.В определении этого он описывает, какие аргументы будут или не будут передаваться любой функции обратного вызова, которую вы регистрируете как этот обработчик событий.Это верно для всех обратных вызовов в Javascript.Вызывающий абонент решает, что он передаст в обратный вызов.Это не относится к этому типу обработчика событий.Обратные вызовы используются во многих местах в Javascript.Даже что-то вроде array.filter() принимает обратный вызов, и вызывающий вызов (в данном случае реализация объекта Array) определяет, какие аргументы передаются в обратный вызов.

Answer 2

Всем функциям в javascript может быть передано произвольно большое количество параметров, даже если функция ничего с ними не делает.Например, следующее допустимо, если бесполезно:

function thingThatExpectsZeroParams() {
  console.log('hello');
}

thingThatExpectsZeroParams(1, 2, 3, 4, [5], 'six');

Шесть частей данных были переданы в функцию, но с ними ничего не произошло, потому что функция ничего с ними не сделала.Чтобы получить доступ к передаваемым значениям, вам просто нужно выбрать имя, которое вы собираетесь назвать.Это имя является локальным для вашей функции и может быть любым, что вы захотите.

function callback(event) {
  console.log(event);
}

// I could also just have easily called it something else, and the code would work just as well
// function callback(quesoBurrito) {
//   console.log(quesoBurrito);
// }

callback('hello');

Поэтому, когда вы настраиваете слушателя так:

onChange={() => this.setField()}

Ваша функция будет вызываться, передаваяобъект события.Но поскольку ваша функция не дает первому параметру имя, у вас нет возможности получить к нему доступ, а затем, когда вы вызываете this.setField, вы тоже ничего не передаете.

В отличие от этого слушателя:

onChange={(e) => this.setField(e)}

Ваша функция снова будет вызываться, передавая объект события.На этот раз вы назвали этот аргумент 'e', ​​и затем можете делать с ним что хотите, в этом случае переадресовывать его в setField.

И когда вы делаете это:

onChange={this.setField}

Вы вырезали посредника.this.setField будет вызываться напрямую, передавая объект события.Предположительно, setField ожидает этого и делает что-то с объектом, который был передан.