Question

在我的代码中，我选择了一些HTML输入并添加了footComparer函数作为回调。

我试图通过添加一个helpers对象来简化我的代码，该对象将包含一些helper函数。

问题是当它碰到这一行时：

 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];
}

Answer 1

检查let到底是什么：doc。

我建议您阅读该书（在github上免费）：You don't know JS。它应该可以帮助您了解范围，闭包等。

基本上，let关键字在特定的{}内创建变量。 let赋予您特权，以声明范围受限制的变量，而不是var来声明表达式，因此let仅在该特定块内可用。

var是一个关键字，它在全局范围内定义变量，而与块范围无关。

Answer 2

我认为您在这里混淆了一些概念。

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 = '';
}

Answer 3

否，用let声明的变量仅在定义了花括号的范围内可用。
但是，您可以return选定的SearchDropdown。

函数无权访问其他函数创建的变量（闭包）

3 个答案: