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

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

0 голосов
/ 24 августа 2018

В своем коде я выбираю некоторые входные данные 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 ]

0 голосов
/ 24 августа 2018

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

0 голосов
/ 24 августа 2018

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

Функция footComparer не может иметь доступа к переменной selectedSearchDropdown, поскольку она определена в другой Scope . Более подробную информацию о областях в 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 = '';
}
0 голосов
/ 24 августа 2018

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

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

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

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

...