JavaScript闭包疑问：为何无法直接访问内部变量却能通过方法获取？

先看完整代码：

const createCounter = () => {
  let count = 0 

  const increment = () => {
    count++
  }
  const getCount = () => {
    return count
  }
  return { increment, getCount, count }
}

let counter = createCounter()

counter.increment() // count is 1
counter.increment() // count is 2
counter.increment() // count is 3
console.log(counter.getCount()) // 输出3，符合预期
console.log(counter.count) // 输出0，为什么？

核心原因：返回对象的count是初始值的副本，而非闭包变量的引用 #

• 当createCounter执行时，内部的let count = 0是函数作用域内的局部变量，被increment和getCount这两个函数形成的闭包所持有。
• 函数返回的对象中，count属性是把当时count的当前值（0）复制了一份存到对象里，和闭包中的原始count变量是两个独立的值。
• 后续调用counter.increment()时，修改的是闭包捕获的那个原始count变量，对象上的count属性不会同步更新。
• 而getCount()是通过闭包直接访问原始的count变量，所以每次调用都能拿到最新的修改后的值。

验证与解决方法 #

如果想让counter.count也能拿到最新值，可以把返回对象的count改成一个getter：

const createCounter = () => {
  let count = 0 

  const increment = () => {
    count++
  }
  const getCount = () => {
    return count
  }
  return {
    increment,
    getCount,
    // 用getter动态返回闭包中的count
    get count() {
      return count
    }
  }
}

let counter = createCounter()
counter.increment()
console.log(counter.count) // 现在会输出1，符合预期

内容的提问来源于stack exchange，提问作者Alan