为什么我的模块Javascript代码段在私有变量上返回未定义？

Question

I am struggling to see why my JS snippet is returning undefined in the console window...

var myModule = (function(){

  var _myVal;

  function _setMyVal(arg){

    _myVal = arg;

  }


  return {
    myVal : _myVal,
    setMyVal : _setMyVal
  };


}());

myModule.setMyVal("ss");

console.log(myModule.myVal);

Because setting myModule.myVal directly actually works!

Answer 1

  return {
    myVal : _myVal,
    setMyVal : _setMyVal
  };

You are returning the current value of _myVal rather than a reference to it (which is what you want). After reassigning the variable _myVal in your function, myModule.myVal is still pointing to the old value.

If you want to return a reference, you can use a getter to return it:

  return {
    get myVal() {return _myVal},
    setMyVal : _setMyVal
  };

Answer 2

That is just how JavaScript handles variables and object properties.

var x = 2;
var y = {x: x};   // at this point, y.x is set to the number two,
                  // it bears no reference to the variable x

console.log(x, y.x); // 2 2

x = 3

console.log(x, y.x); // 3 2