JS-闭包
2020-10-28 本文已影响0人
肖青荣
了解闭包前，首先要知道声明是变量作用域
变量根据作用域的不同分为两种：全局变量和局部变量。
1.函数内部可以使用全局变量。
2.函数外部不可以使用局部变量。
3.当函数执行完毕，本作用域内的局部变量会销毁。
什么是闭包？
闭包（closure）指有权访问另一个函数作用域中变量的函数。 ----- JavaScript 高级程序设计
简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。
由于在javascript中，只有函数内部的子函数才能读取局部变量，所以说，闭包可以简单理解成“定义在一个函数内部的函数“。所以，在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
<script>
function fn1() {
var num = 10;
return function fn2() {
console.log(num); // 10
}
}
var f = fn1();
f()
</script>
由此可知：闭包作用就是延伸变量的作用范围。
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不会在fn1调用后被自动清除。
为什么会这样呢？原因就在于fn1是fn2的父函数，而fn2被赋给了一个全局变量，这导致f2始终在内存中，而fn2的存在依赖于fn1，因此fn1也始终在内存中，不会在调用结束后，被垃圾回收机制回收。
所以说不能滥用闭包，否则内存消耗很大，造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
在 chrome 中调试闭包
- 打开浏览器，按 F12 键启动 chrome 调试工具。
- 设置断点。
- 找到 Scope 选项（Scope 作用域的意思）。
- 当我们重新刷新页面，会进入断点调试，Scope 里面会有两个参数（global 全局作用域、local 局部作用域）。
- 当执行到 fn2() 时，Scope 里面会多一个 Closure 参数 ，这就表明产生了闭包。
闭包的作用
<body>
<ul class="nav">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
<script>
// 闭包应用-点击li输出当前li的索引号
// 1. 我们可以利用动态添加属性的方式
var lis = document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function() {
// console.log(i);
console.log(this.index);
}
}
// 2. 利用闭包的方式得到当前小li 的索引号
for (var i = 0; i < lis.length; i++) {
// 利用for循环创建了4个立即执行函数
// 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
(function(i) {
// console.log(i);
lis[i].onclick = function() {
console.log(i);
}
})(i);
}
</script>
