无法理解揭示模块的行为

Question

我正在研究闭包和揭示模块模式。在我看来我明白了，但后来在练习中我发现了这个奇怪的“错误”。这是代码：

    const module=(function(){
    let counter=1;
  let incrCounter=function(){
  counter++;
  console.log(counter)
  }
  return { counter, incrCounter}
})();

module.incrCounter(); ///expected:2; output:2;
module.incrCounter(); ///expected:3; output:3
module.incrCounter(); ///expected:4 output:4

module.counter=1; 
module.incrCounter(); ///expected:2; output:5
module.counter; ///expected:5 (for some reason) ; output:1

我重读了关于闭包的“你不懂 JS”。它必须工作！我 return 一个带有属性 “计数器”的对象，所以我应该可以直接访问它。但似乎我创建了一个新的同名局部变量，而不是更新我想要的计数器。我在这里做错了什么？

Answer 1

当您执行 return {counter, incrCounter} 时，您是在说：

将counter的值复制到return对象的counter属性中
然后将incrCounter的值复制到return对象的incrCounter属性中

你不是说暴露内部计数器变量，也就是说对module.counter的修改只是修改副本，而不是实际值。您可以通过将其存储在对象中来解决此问题：

const module = (function() {
    let ret = {counter: 1};
    let incrCounter = function() {
        ret.counter ++;
        console.log(ret.counter);
    };
    ret.incrCounter = incrCounter;
    return ret;
})();

或者，仅使用对象和 this:

const module = {
    counter: 1,
    incrCounter() {
        this.counter ++;
        console.log(this.counter);
    }
};

无法理解揭示模块的行为

cannot understand behavior of revealing module

javascript

closures

revealing-module-pattern