Javascript Module Pattern,公共属性不能获取到最新值（Javascript revealing module pattern, public properties）-优快云博客

本文介绍JavaScript模块模式中如何正确暴露私有变量的最新值。通过对比不同实现方式，阐述使用对象定义只读属性来保持封装性和实时性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

发现问题的代码如下：

 <html>

  <script type="text/javascript">

  var module=(function(){

  //private varibles

  var grades=undefined;

  console.log("self invoking grades="+grades);

  //private methods

  var setGrades=function(x){

  grades=x;

  console.log('in the set mehod grades='+grades);

}

  //public api

  return {

 
 grades:grades, //这种写法无法应用到最新的值

  setGrades:setGrades

}

  })();

  console.log('before set grades grades='+module.grades);

  module.setGrades(10);

  console.log('after set grades grades='+module.grades);

  </script>

 </html>

 如上图所示，上面返回对象中对私有变量的引用，并没有引用到最新的值

 改进后写法如下：

 主要有几种方式：1.使用函数返回私有变量值；2.自己定义返回对象的属性，注意只定义get，这样不会破坏封装；

 <html>

  <script type="text/javascript">

  var module=(function(){

  //private varibles

  var grades=undefined;

  console.log("self invoking grades="+grades);

  //private methods

  var setGrades=function(x){

  grades=x;

  console.log('in the set mehod grades='+grades);

}

  //public api

  var rtnObj={

 
 //grades:grades,//不适用直接返回的

  setGrades:setGrades

}

 //改为使用返回对象定义只读属性，修复出现的问题

 
 Object.defineProperty(rtnObj, "grades", {

  get: function () { // function that's executed when you use `.grades`

  return grades;

}

});

  return rtnObj;

  })();

  console.log('before set grades grades='+module.grades);

  module.setGrades(10);

  console.log('after set grades grades='+module.grades);

  </script>

 </html>

 通过上面截图可以看出，在设置完grades后，可以正常在外部访问到最新的grades的值了。

 之所以这样，是因为直接返回时（grades:grades）其实是直接返回一个值，即（grades:undefined），后续对grades变量的修改，并不会反映到返回对象的grades属性上；

 https://stackoverflow.com/questions/8893099/javascript-revealing-module-pattern-public-properties