javascript - 模块化 Javascript 中的变量作用域

Question

很抱歉，如果这个问题已经得到解答，但我无法在这里找到合适的答案。

我最近开始以模块化风格编写我的 javascript 代码，我有一个关于模块变量范围如何工作的问题。

下面的代码给了我一个矛盾的答案。

我有一个名为 Base 的模块，它声明了两个字符串和一个数组。它还具有一个名为 fetchData 的函数，该函数使用 jQuery getJSON 快捷方式使用服务器数据设置这些变量。不幸的是，当我请求 Base 的 string1 或 string2 时，我得到的是未定义的。我知道这可能是因为我将它们的值设置为两个函数深处(在 AJAX 回调内部和 fetchData 内部)并且范围限制它看不到 Base.string1 和 Base.string2。

但是，当我从模块外部查看 Base.array1 时，它被设置为我从服务器提取的适当数据，即使它是从与字符串相同的范围设置的。

代码如下:

namespace.Base = (function(){
    var string1, string2, array1 = [];
    function fetchData(){
        $.getJSON('backendScript.php', function(data){
            string1 = data.string1;
            string2 = data.string2;
                arrayCount = data.arr.length;
                for(var i = 0; i<arrayCount; i++){
                    array1[i] = data.arr[i];
                }
         })
     }
     return{
         fetchData: fetchData,
         string1: string1,
         string2: string2,
         array1: array1
     }
})();

如果我改变

string1 = data.string1;

到

namespace.Base.string1 = data.string1;

它按我想要的方式工作。

所以我的问题是，当从与字符串相同的范围设置时，为什么 array1 设置正确？

此外，在模块函数中设置模块级变量而不必提供全局路径(例如 namespace.Base.string1)的补救措施是什么？

Answer 1

问题是您实际上有两个不同的引用，变量 string1 在您调用以创建 namespace.Base 的匿名函数的闭包中，以及 namespace.Base.string1，它位于从该匿名函数返回的对象上。您将变量 string1 分配给对象属性 string1 是一次性设置，而不是实时引用。进一步修改变量 string1 不会影响对象属性。这就是你想要的:

namespace.Base = (function() {
  var my = {
    string1: null,
    string2: null,
    array1: [],
    fetchData: function () {
      $.getJSON('backendScript.php', function(data){
        my.string1 = data.string1;
        my.string2 = data.string2;
        var arrayCount = data.arr.length;
        for (var i = 0; i < arrayCount; i++){
          my.array1[i] = data.arr[i];
        }
      });
    }
  };
  return my;
})();

现在 namespace.Base 的本地但公共(public)的成员位于对象 my 中。您可以在匿名函数中使用 var 创建私有(private)变量，或者通过将它们添加到 my 来创建更多公共(public)属性。