闭包和虚拟dom

闭包和虚拟dom

闭包

**含义：**闭包就是能够读取其他函数内部变量的函数.
**解释：**由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数“。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
**用途：**一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
注意：
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

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

通常情况下使用FOR循环时，我们直接输出变量没有问题。例如下例：

for(var r=0;r<11;r++){
console.dir(r)
}
这时会输出：0-10的11个数字；

但是当我们在FOR循环里的函数里输出变量时就会出现问题。

for(var r=0;r<11;r++){
wx.showToast({
title: '载入中',
success:function(){
console.dir(r)
}
})
}
这时它会输出：11个11

如何让FOR循环里的函数里输出变量为正常值呢，可以使用ES6的let来声明变量，let声明变量是有作用域的，它只会在FOR循环里起作用，而var声明变量，会作用全局。

for(let r=0;r<11;r++){
wx.showToast({
title: '载入中',
success:function(){
console.dir(r)
}
})
}
这时又会输出：0-10的11个数字；

虚拟DOM

**含义：**本质上是JS 和 DOM 之间的一个映射缓存，它在形态上表现为一个能够描述 DOM 结构及其属性信息的 JS 对象
1.虚拟dom是一个js对象
2.虚拟dom能够描述真实dom（存在一个对应关系）
3.存储在内存之中
**作用：**虚拟DOM用原生的JavaScript模拟实现了DOM结构,.我们通过操作这个虚拟DOM树来实现对页面的渲染和维护.
为什莫需要虚拟dom：
1.原生手动对DOM操作非常麻烦,非常不利于开发大型应用程序.
2.当DOM操作越来越多时,状态的维护和DOM操作之间难以维护.
3.当视图的状态只发生部分变化时,视图难以有效得进行部分更新.
4.原生DOM元素过于庞大,轻微的触碰可能就会导致页面重排,产生性能问题.
工作流程
https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7687edd7330841d8bb617c5b216cec4b~tplv-k3u1fbpfcp-watermark.image