javascript - 模块中的变量范围

Question

我正在编写我的第一个 javascript 模块，我对范围变量有些不理解。这是我的模块:

var Module = (function () {

    var myString ='a';

    var changeString = function () {
        myString ='b';
        console.log(myString);
    };

    return {
      changeString: changeString,
      myString:myString
    };

  })();

现在如果我这样做:

Module.myString;             // returns 'a'
Module.changeString();       // returns 'b'
Module.myString;             // returns 'a'

对我来说，最后一个命令应该返回“b”，因为我已经用 changeString 方法更改了 myString。我不明白为什么，因为 myString 是在 changeString 方法之外声明的，所以范围似乎没问​​题。我想了解为什么它会这样，以及如何创建一个覆盖变量值的方法。 提前致谢。

Answer 1

这会在创建对象时复制 myString:

return {
  changeString: changeString,
  myString:myString
}

您可以使用 getter 动态返回局部变量，这将为您提供预期的行为:

return {
  changeString: changeString,
  get myString() { 
    return myString;
  }
}

完整示例:

var Module = (function () {

    var myString ='a';

    var changeString = function () {
        myString ='b';
        console.log(myString);
    };

    return {
      changeString: changeString,
      get myString() { 
        return myString;
      }
    }

})();

console.log( Module.myString );
Module.changeString();
console.log( Module.myString );