JS极简闭包计数器

马黑黑

函数就一行代码：

const counter = (startNum) => () => ++startNum;

这是箭头函数的好处，简洁。但是，函数看着抽象，分行写看看：

const counter = (startNum) => { return () => ++startNum; };

还有点抽象？箭头函数的问题。用传统函数改写一下：

function counter(startNum) { return function() { return ++startNum; } }

如果确实不习惯箭头函数，现在也应该可以看出点道道来了：这是一个函数里还有函数的函数。外层函数是具名函数，counter，计数器，它需要一个参数，startNum，起始计数值；里层函数被外层函数嵌套，是个匿名函数，它将外层函数的参数 startNum 加 1 并返回结果，然后以函数形式返回给外层函数。

外层函数称父函数，里层的函数称子函数。子函数通常就是一个闭包，它能获取父层函数的参数或变量并对之操作，然后，或者返回操作结果，或者返回函数。本例返回的是函数，所以，这样调用：

<style> .counterWrap { padding: 40px; } #txtRes, #btnAdd { margin: 0; padding: 8px; } </style> <div class="counterWrap" style=""> <input type="text" id="txtRes" value="0" /> <button type="button" id="btnAdd">点击计数</button> </div> <script> // 闭包计数器 const counter = (startNum) => () => ++startNum; // 引用函数 const calc = counter(0); // 输出结果 btnAdd.onclick = () => txtRes.value = calc(); </script>

马黑黑

counter 函数返回的是函数，不能直接得到结果，所以创建一个引用 counter 函数 的函数 calc：

const  calc = counter(0);

这个 calc() 函数才是直接拿到结果的函数。可以根据需要创建初始值不同的计数器，例如从10开始：

const calc10 = counter(10);

首次calc10() 运行的结果是 11 ，而后以 1 为单位继续累加

马黑黑

闭包计数器函数属于纯函数，它不改变外部变量，只根据参数进行运算，同时将运算结果储存在闭包里面，外部只能使用它而无法改变它