JavaScript闭包计数器代码直接取值与函数取值结果不同的原因

核心原因是JavaScript中基础类型赋值是值拷贝，闭包函数会捕获变量的引用而非瞬时值，两种写法的执行逻辑完全不同：

直接赋值getCounter: counter的逻辑 #

• 调用counter()函数时，首先初始化局部基础类型变量let counter = 0
• 构造返回对象时，getCounter: counter会直接将当前counter变量的值0拷贝给对象的getCounter属性，赋值完成后该属性和函数作用域内的counter变量就不存在任何关联
• 后续调用increment()修改的是函数作用域内的counter变量，不会影响已经完成拷贝的对象属性值，所以打印结果永远为0

赋值为箭头函数getCounter: () => counter的逻辑 #

• 这时候给对象getCounter属性赋值的是一个箭头函数，该函数会形成闭包，捕获外层作用域counter变量的引用，不会拷贝瞬时值
• 只有当你调用addCounter.getCounter()时，才会执行函数，实时读取当前作用域内counter变量的最新值
• 调用5次increment()后作用域内的counter已累加为5，所以读取到的结果就是正确的5

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