Вызов самоисполняющейся функции из прослушивателя событий

Question

Предположим, это мой единственный HTML

<input id="target" type="number">

И предположим, это мой единственный JavaScript

var target = document.getElementById('target');

Я хочу выполнить function всякий раз, когда ввод меняется, но я также хочу выполнить сказал function один раз при загрузке страницы (Self-Executing Function или же IIFE). Ниже приведены 3 примера, 1 из которых не работает.

---

---

Следующее работает как ожидалось:

target.addEventListener('input', myFunction);

function myFunction(){
    console.log('executed!');
}
myFunction();

Здесь function будет выполняться при загрузке страницы. Это не будет выполнено eventListenerвместо этого он будет ReferenceError: myFunction is not defined на консоль:

target.addEventListener('input', function(){
    myFunction();
});

(function myFunction(){
    console.log('executed!');
})();

Этот не будет выполняться ни при загрузке страницы, ни eventListener и войдет ReferenceError: myFunction is not defined на консоль:

target.addEventListener('input', myFunction);

(function myFunction(){
    console.log('executed!');
})();

---

---

Мой вопрос: почему третий пример не работает?

Answer 1

Весь смысл IIFE состоит в том, чтобы предотвратить загрязнение Глобальной (или более высокой) области. Это не работает, потому что выражение немедленного вызова функции (IIFE) является анонимной функцией. Таким образом, когда вы устанавливаете свой синтаксис IIFE с именем, имя функции игнорируется вне выражения.

От MDN:

IIFE (выражение для немедленного вызова функции) - это функция JavaScript, которая запускается сразу после ее определения.

Это шаблон проектирования, который также известен как Самоисполняющаяся анонимная функция и состоит из двух основных частей. Первая - это анонимная функция с лексической областью действия, заключенная в оператор группировки (). Это предотвращает доступ к переменным в идиоме IIFE, а также загрязняет глобальную область.

Вторая часть - это создание немедленно выполняемой функции expression (), с помощью которой механизм JavaScript будет напрямую интерпретировать функцию.

Кроме того, ваш второй пример на самом деле не работает по той же причине. Вы видите свой executed! сообщение, но это потому, что IIFE выполняет самостоятельно. Если вы продолжите изменять значение входа, вы получите ту же ошибку, что и опция № 3.

var target = document.getElementById('target');

target.addEventListener('input', function(){
    myFunction();
});

(function myFunction(){
    console.log('executed!');
})();

<input id="target" type="number">