javascript - 模块模式中的变量范围

Question

我试图了解如何在以下脚本中触摸/更改/增加我的私有(private)范围变量 x。我在这里使用模块模式，并认为我可以从公共(public)返回模块声明的属性或方法进入并设置私有(private)变量，但我正在尝试的任何事情都没有奏效。相关:什么时候声明 func 的新实例与访问 func 作为静态 delcared 变量？

    var func = (function() {
      var x = 1;
      var squareX = function() {
        return x * x;
      };
      var addOne = function() {
        x++;
      }
      return {
        X: x,
        Xq: squareX,
        AddOne: addOne
      };
    });

    func().X = 9; // expecting privately scoped x = 9
    func().AddOne(); // expecting privately scoped x = 10
    document.write(func().Xq()); // expecting 100 actual = 1

Answer 1

模块模式的要点是创建一个从外部不可见的持久、私有(private)范围。不幸的是，每次您调用 func 时，您都在创建一个新 作用域(带有新的返回函数及其闭包)，因此之后您的所有操作都会被丢弃。 p>

无需多次调用 func，只需执行一次以设置“模块”(您甚至可以立即执行此操作，使用 IIFE )，然后对结果执行操作。

var func = function() {
  var x = 1; // this is the private variable

  var squareX = function() {
    return x * x;
  };
  var addOne = function() {
    x++;
  };

  return {
    // Note, you can't just do "X: x,"
    // since that will just create a copy;
    // you have to use properties
    get X() { return x; },
    set X(val) { x = val; },

    Xq: squareX,
    AddOne: addOne
  };
};

var funcModule = func();
funcModule.X = 9;
funcModule.AddOne();
document.write(funcModule.Xq());

请注意，X 模块属性需要显式 getter 和 setter 的原因是因为您需要能够修改内部(隐藏)变量 x。属性在所有现代浏览器中都可用，包括 IE9+。如果您在 IE8 或以下版本中工作，则需要显式定义 getX 和 setX 方法，并直接调用它们(您将无法做到funcModule.X = 5).