IIFE: Почему мой код игнорирует addEventListener, если я возвращаю предупреждение, не заключая его в функцию? - PullRequest
Новая
       24

IIFE: Почему мой код игнорирует addEventListener, если я возвращаю предупреждение, не заключая его в функцию?

0 голосов
/ 10 ноября 2018

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

Если я выполню этот код, он будет работать правильно, и я смогу щелкнуть и отобразить предупреждение после нажатия 

    elem.addEventListener('click', (function(numCopy) {
    return function() {
        alert(numCopy);
    };
})(num));

Но если я выполню этот код, он проигнорирует прослушиватель событий и отобразит предупреждение, как только страница загрузится 

elem.addEventListener('click', (function(numCopy) {
return alert(numCopy);
})(num));

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

1 Ответ

0 голосов
/ 10 ноября 2018

Давайте разберемся, что происходит, посмотрев на следующий пример: 

function foo(x) {
  return x;
}

var bar = foo(42);
baz(bar);

Какое значение передается baz?42 потому что foo просто возвращает переданное ему значение.

Теперь давайте встроим функцию call : 

function foo(x) {
  return x;
}

baz(foo(42));

Какое значение передано baz здесь?Тем не менее 42 присваиваем ли мы возвращаемое значение переменной или напрямую передаем ее другой функции, не имеет значения.

Теперь давайте встроим функцию Definition : 

baz(function foo(x) { return x; }(42));

Теперь у нас есть IIFE .Какое значение здесь передается baz?Все еще 42.На самом деле мы не изменили то, что делает код, мы просто избавились от промежуточных присвоений переменных (мы могли бы также удалить foo из выражения функции).

Как это связано с вашим кодом?Давайте работать в обратном направлении от вашего кода.Начнем с: 

elem.addEventListener('click', (function(numCopy) {
   return alert(numCopy);
})(num));

Давайте извлечем определение функции: 

function foo(numCopy) {
  return alert(numCopy);
}

elem.addEventListener('click', foo(num));

Теперь давайте извлечем вызов функции: 

function foo(numCopy) {
  return alert(numCopy);
}

var bar = foo(num);
elem.addEventListener('click', bar);

Вы видите, что здесь не так??Вы вызываете функцию (foo в данном случае).Функция выполняет alert, и поэтому вы сразу видите предупреждение.

foo возвращает возвращаемое значение alert (назначенное bar), поэтому вы передаете это значение addEventListener.

Но alert возвращает undefined, тогда как addEventListener ожидает передачи функции.

Вот почему ваш IIFE должен вернуть функцию.

...