Функция не имеет доступа к переменным (замыканиям), созданным другой функцией

В моем коде я выбираю некоторые входы HTML и добавляю footComparerфункцию в качестве обратного вызова.

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

Проблема в том, когда он попадает в эту строку:

 selectedSearchDropdown.style.display = '';

Он выдает контрольную ошибку:

selectedSearchDropdown is not defined.

У меня возникают проблемы с пониманием того, почему закрытие здесь не работает. Разве footComparerфункция не должна иметь доступ к selectedSearchDropdown const searchInputs = document . querySelectorAll ( '.searchBox__input' ); searchInputs . forEach ( input => input . addEventListener ( 'input' , footComparer )); function footComparer ( e ) { помощники . elementSelector ( e ); selectedSearchDropdown . стиль . display = '' ; } Пусть хелперы = { ElementSelector : функция ( е ) { пусть selectedSearchDropdown = е . цели . parentNode . childNodes [ 3 ]; } iable, поскольку он остается в памяти как закрытие?

let

javascript,variables,methods,scope,closures,

0

Ответов: 3


1

Проверьте, что letименно есть: doc .

Я бы порекомендовал вам прочитать эту книгу (бесплатно на github): вы не знаете JS . Это должно помочь вам понять области, закрытие и т. Д.

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

var скорее ключевое слово, которое определяет переменную глобально независимо от области блока.


1

Я думаю, вы путаете некоторые понятия здесь.

selectedSearchDropdownФункция не может иметь доступ к переменной , поскольку она определена в другом Scope . Более подробную информацию о облаках в javascript можно найти здесь: Областьlet helpers = { elementSelector: function (e) { return e.target.parentNode.childNodes[3]; } const searchInputs = document.querySelectorAll('.searchBox__input'); searchInputs.forEach(input => input.addEventListener('input', footComparer)); function footComparer(e) { selectedSearchDropdown = helpers.elementSelector(e); selectedSearchDropdown.style.display = ''; }

В вашем конкретном примере код, который будет работать:

let

0

Нет, переменные, объявленные с let, доступны только в области фигурных скобок, в которых они были определены.
Однако вы можете returnвыбрать selectedSearchDropdown.

JavaScript, переменные, методы, область применения, затворы,
Похожие вопросы