微信小程序关闭问题导致的JS关闭解决方案

作者：Bug哥从原地址写代码

看到标题“收官”，很多人都会觉得尴尬，包括我。之前听说过关闭，但是不能准确全面的理解。对于前端学生来说，无论是面试还是开发，都逃不开闭包的问题。最近在小程序项目中遇到了可变访问权限的问题，有一段时间不考虑闭包就郁闷了。感谢@Topqiang给我的建议。看完这篇文章，你可能无法理解和掌握。需要反复推敲和练习。如果你有任何问题，请随时在下面评论。

在网上搜索学习关于闭包的技术时，发现自己说的都是抽象的[我是菜鸟]，无法理解闭包的概念以及如何使用。今天我们带着问题学习：第一，我给大家还原需求场景；分析需求场景；引入封闭解决方案；理解升华闭合的概念。废话少说，开门见山。

恢复需求场景

我想实现一个未知的多对多数据请求，并将其加载到页面中。因为后端接口的限制，我不支持多对多同步返回，所以需要前端做数据匹配。

让我们看看在这个需求场景中小程序前端代码是什么样子的。

按照常规的双层for循环逻辑理解没有问题，内层访问外部变量遍历列表。

需求情景分析

在这种需求下，有些同学会考虑后台对双层数据进行处理后返回给前端，但如果后端考虑到业务功能的解耦不做这个操作，我们还是要解决这个问题。在简单的双层for循环中，内层访问外部变量是可以的。添加wx.request后，内层将无法正常访问外环变量I。如果外部数据res.data的长度是3，那么I在外部for循环中的正常遍历是：0，1，2；然而，在内部for循环中遍历I的数据是：3，3，3。此时，我不能通过给showdata.data赋值来获得完整的数据，但我只能从最后一次遍历中获得数据。

在这一点上，我们的目的很明确。如何在内部wx.request的for循环中获取外部变量I？

封闭解

JS闭包可以轻松解决内层访问外层存活的私有变量的问题。以下三种方案仅供参考。

方案一：增加几个对应的闭包域空间(这里使用匿名函数)，专门用来存储原本需要引用的内容(下标)，但只针对基本类型(基本类型值传递、对象类型引用传递)。

方案二：添加几个对应的闭包域空间来存储下标，将事件绑定到新添加的匿名函数返回的函数。

方案三：使用ES6新语法的let关键字：block作用域，不能重复声明覆盖，限制了变量的作用域，保证了变量不会污染全局变量。

/p>

网上针对javascript解决闭包的方案还有很多，有兴趣的朋友可以深入了解。看了这么多内容不知道大家是否对微信小程序闭包有所了解。网上针对微信小程序闭包代码搜索最多的是下图：

升华闭包概念

闭包到底是什么？

官方的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分，闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。

了解JS闭包之前我们回忆一下变量的作用域。javascript特殊的作用域函数内部变量访问全局变量，函数外部无法获取函数内的局部变量。函数内部声明变量要用var，不用var则声明全局变量。

Javascript语言的“链式作用域”结构（chain scope）导致子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的。闭包也就是将函数内部和函数外部连接起来的中介。

作用和应用场景

闭包可以读取函数内部的变量，也可以让这些变量的值始终保持在内存中。

在内存中维持一个变量。

通过保护变量的安全实现JS私有属性和私有方法（不能被外部访问）私有属性和方法在Constructor外是无法被访问的【本文涉及的场景】

闭包的注意点

1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2、闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。