JS闭包的应用-保存变量状态-计数器的使用

这里简单使用一个demo计数器,来说明闭包的应用。一个函数,多个变量调用,分别保存各自的状态。

需求:有多个地方需要使用同一个计数器函数。

如上图,有两个计数器,中间是计数,默认为0,右边是+1的按钮。我想分开控制它的,即点击各自的按钮,给各自的数字+1。这很简单,给两个按钮分别绑定两个+1的函数即可。但是这两个需求一摸一样,我能不能只用一个函数来完成呢?

先上代码,使用vue3测试



哎?为啥我点击第一个+1,两个计数器都变了?这是因为这两个计数器都绑定的同一个函数,那么它们的值也是同步变换的。那我们要怎么样才能解决这个问题呢?这就需要引出闭包了。闭包具体的概念我就不细说了,网上可以查到很多。我只记得一条非常清楚的解释,闭包是为了保存函数的状态。

解决方式



看代码,我将AddNum这个方法,赋值给了add1和add2两个变量,这样就将状态分别赋值给了add1和add2,各自保存各自的状态,完成了我们最开始的需求,即同一个函数,保存各自不同的状态。在template中,计数器1的数字通过add1.num的形式访问,+1函数通过add1.add的形式访问,计数器2同理。

效果图:

完结撒花

你可能感兴趣的:(javascript,前端,html)