闭包是什么?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<button id="father" onclick="add()">计数加一</button>
<button id="children" onclick="reduceFn()">计数加一</button>
// <button id="children" onclick="reduce()()">计数加一</button>
// <button id="children" onclick="(reduce())()">计数加一</button>
// 看似与第二行是相同的,但是实际上并没有闭包
</div>
</body>
<script>
const add = (() => {
let count = 0
return () => {
document.getElementById('father').innerHTML = count
return count++
}
})()
const reduce = function () {
let count = 0
return () => {
document.getElementById('children').innerHTML = count + '' + 'reduce'
return count++
}
}
const reduceFn = reduce()
</script>
</html>
当我们在网上搜索闭包是什么的时候往往最先记住的是它的表现形式“会生成一个储存在内存中的属性,不会在方法结束时销毁这个属性,在之后再次调用这个方法还能重复修改本属性”。
如果学过vue的话,就会反应过来,这不就相当于在data中添加了一个属性吗?不同于data中的属性在当前组件中谁都能使用一样,闭包生成的值只能由闭包函数来修改,是一个闭包函数的独有属性。
内存泄漏
由于js的垃圾回收机制(垃圾回收机制暂未形成自己的看法),对于存在内存中的DOM节点不能销毁,所以要手动销毁
//最后应将oDiv解除引用来避免内存泄露
function closure(){
var oDiv = document.getElementById('oDiv');
var test = oDiv.innerHTML;
oDiv.onclick = function () {
alert(test);
};
oDiv = null;
}