javascript - 如何在 JavaScript 显示模块模式中返回字符串值

Question

我在我的一个应用程序中使用了 Revealing Module 模式，但在对象上调用 init 方法后，我无法让它返回字符串变量的值。目标是设置 stringVar 的值并从我的 UI 中检索它。arrayVar 有效。

谢谢，克里斯

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
    var viewModel = null;
    $(document).ready(function () {
        viewModel = new ViewModel();
        viewModel.init();
        // writes "object1" to ul
        $("#log").append("<li>" + viewModel.arrayVar[0] + "</li>");
        // writes "" to ul
        $("#log").append("<li>" + viewModel.stringVar + "</li>");
    });

    ViewModel = (function () {
        var
            arrayVar = new Array(),
            stringVar = '',
            init = function () {
                // load data from external source
                arrayVar.push("object1");
                arrayVar.push("object2");
                stringVar = "string value 1";
            };
        return {
            arrayVar: arrayVar,
            stringVar: stringVar,
            init: init
        };
    });

</script>

Answer 1

“这个”有效。双关语意:)

init = function () {
    // load data from external source
    this.arrayVar.push("object1");
    this.arrayVar.push("object2");
    this.stringVar = "string value 1";
};

Answer 2

这里的问题是字符串是不可变的，因此当您重新分配stringVarin时init，它实际上是用新字符串替换变量，使构造函数返回的对象指向原始字符串。

解决此问题的最简单方法是使用 getter 函数代替直接访问。如果您想要类似属性的访问，有几个选项。不推荐使用的__defineGetter__是 ，然后是 ECMA5 getter，它们的兼容性有限：

// your constructor
function() {
  // ...

  var getStr = function() {
    return stringVar;
  };

  // saving the returned object to a variable, as a few of the options
  // involve operating on an object.
  var m = {
    // typical getter function
    getStr: getStr,

    // ecma5 pretty syntax getter property
    get str1() { return getStr() }
  };

  // __defineGetter__ variant
  m.__defineGetter__("str2", getStr);

  // ecma5 Object.defineProperty variant
  Object.defineProperty(m, "str3", {get: getStr, enumerable: true});

  return m;
}

// access them like:
viewModel.getStr();
viewModel.str1;
viewModel.str2;
viewModle.str3;