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

Michael Klim спросил: 31 июля 2018 в 09:32 в: javascript

В моем коде я выбираю некоторые входы 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) {
    helpers.elementSelector(e);
   selectedSearchDropdown.style.display = '';
}let helpers = {
elementSelector: function (e) {
    let selectedSearchDropdown = e.target.parentNode.childNodes[3];
}


3 ответа

KarlR ответил: 31 июля 2018 в 09:36

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

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

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

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

Alen Genzić ответил: 31 июля 2018 в 09:37

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

Функция footComparer не может иметь доступ к переменной selectedSearchDropdown, так как она определена в другом Область. Дополнительную информацию о областях в javascript можно найти здесь: Scope

В вашем конкретном примере будет работать следующий код:

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 = '';
}
D F ответил: 31 июля 2018 в 09:37

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