javascript - 控制变量范围

Question

我已经找到了一些类似的问题，但我觉得其中提供的答案并不能完全消除我的困惑。

我在玩 jQuery 时遇到了这个问题，但我想这更多是一个 JS 问题，而不是 jQuery 特有的问题。

我觉得在下面的示例中，我希望定义的这些变量是全局变量的良好候选者，它们除了几个函数之外还有广泛的用途，但我觉得我想限制暴露。

$(function() {
    $containers = $('.container');
    $childContainer = $('#childContainer');
    //Removed extra code
    var $aButton = $('#childButton');
    //Removed extra code

    $containers.hide();

    $childContainer.show(400);

    $aButton.on('click', clickChildButton);
    //Removed extra code
};

function clickChildButton() {
    $containers.hide(400);
    $childContainer.show(400);
}

我将有许多按钮显示/隐藏各种容器。在所有情况下，$containers 变量都需要对其他函数可见才能隐藏。

我应该使用全局变量(或者可能是命名空间全局对象黑客)还是有其他方法可以限制 $containers 变量的范围？

我不太热衷于使用匿名函数来处理点击事件，因为它们将开始变得更加复杂(并且不仅仅包含 clickChildButton 函数中显示的两行.

注意:在这个特定的示例中，最好重构代码并创建一个 hideContainers 函数，但我更感兴趣的是如何控制一般变量的范围，而不是这个特定的示例.

谢谢

Answer 1

在 JavaScript(ES6 之前)中，所有变量都是函数作用域的。因此，确定变量作用域的唯一方法是使其成为函数的本地变量。

这里您有两个基本选择。一种是将 clickChildButton 设为 $(function(...) {...}) 本地化，因为它是唯一相关的地方:

$(function() {
  var $containers, $childContainer;

  function clickChildButton() {
    $containers.hide(400);
    $childContainer.show(400);
  }
  ...
});

如果您需要范围实际上更宽但又不太宽，另一个选择是将所有内容包装到 IIFE 中:

(function() {
  $(function() {
    ...
  });
  function clickChildButton() {
    ....
  });
)();