🌞 深刻分析 JavaScript 闭包
💎导读目录
- 什么是闭包
- 闭包的个性
- 闭包的优缺点
- 闭包的作用
- 闭包的留神点
💎什么是闭包？
一个函数和对其四周状态的援用捆绑在一起,这样的组合就是闭包.
艰深的说： 一个内层函数能够拜访外层函数的作用域 就叫 闭包。
在 JavaScript 中，每当创立一个函数，闭包就会在函数创立的同时被创立进去。
闭包的造成与变量的作用域以及变量的生存周期密切相关。
💎闭包的个性
- 函数嵌套函数
- 函数外部能够援用内部的参数和变量
- 参数和变量不会被垃圾回收机制回收
💎闭包的优缺点
长处：
能够设计公有的办法和变量
毛病
常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
个别函数执行结束后，部分流动对象就被销毁，内存中仅仅保留全局作用域。
💎对于 变量
变量的作用域
变量的作用域： 变量的无效范畴。
在理论开发中，咱们常常遇到的是 函数中申明的变量作用域。
var a = '闭包';
function getValue(){
var a = '函数部分作用域'
console.log(a)
}
getValue() //函数部分作用域
当在全局申明了一个同名变量，在函数外部也申明了一个同名变量，函数优先拜访函数作用域中的变量。
函数作用域
函数作用域： 在函数外部能够拜访到函数内部变量，而在函数内部的变量不能够拜访函数外部的变量。
为什么呢？
因为当在函数中搜寻一个变量的时候，如果函数外部没有这个变量的申明，那么它会随着代码的执行环境创立的作用域往外层逐层搜寻，直到搜寻到全局变量为止。
变量的搜寻是从内到外搜寻的。
function getData() {
var str = "闭包练习";
var fun = function(){
var innerStr = '外部变量'
}
console.log(innerStr)
//innerStr is not defined 函数外层是拜访不到 函数内层变量的
}
getData()变量的生存周期
对于 全局变量，它的生存周期是永恒的的，除非被动销毁变量。
而对于 函数局部变量 ，当函数执行结束，局部变量也就销毁了。
栗子 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script>
var nodes = document.getElementsByTagName('div')
for (var i = 0; i < nodes.length; i++) {
nodes[i].onclick = function () {
alert(i)
}
}
</script>
</body>
</html>给每个
div减少点击事件，当点击 div 时，弹出它对应的索引值。当初无论点击哪个
div,它 弹出的 都是 4 。为什么呢？
因为 div 点击事件 是被 异步触发的，当事件被触发的时候，循环曾经执行完，此时的 i 的 变量值 为 4。
如何解决 点击每个div 弹出对应的i 值呢 ？
能够借用 闭包， 把每次循环的 i 保存起来，当执行点击事件时，它会从内到外 搜寻变量的作用域，它会优先搜寻到 闭包环境环境的 i
# 闭包解决办法
<script>
var nodes = document.getElementsByTagName('div')
for (var i = 0; i < nodes.length; i++) {
(function(i) {
nodes[i].onclick = function () {
alert(i)
}
})(i)
}
</script>栗子 2
var num = 1;
function getValue(){
var num = 0;
return function(){
num++
console.log(num)
}
}
var s = getValue()
s()
s()
// 1 2 按常理思路来： 函数执行结束，num = 1 销毁，变为初始值 num = 0 ，变量在函数中作用域从内到外逐层搜寻。
后面也说到了，当函数执行完，局部变量也跟着销毁了，那为什么会 输入 2 呢 ？
这里 波及到 垃圾回收机制援用计数问题
[对于垃圾回收] https://blog.csdn.net/zhouziy…
简述：
当申明了一个变量并将一个援用类型值赋给该变量时，则该值的援用次数就是1；如果同一个值又被赋给另一个变量，则该值的援用次数加1；如果蕴含对该值援用的变量又获得了另外一个值，则该值的援用次数减1。当该值的援用次数变为0时，则能够回收其占用的内存空间。当垃圾回收器下一次运行时，就会开释那些援用次数为0的值所占用的内存。
解答
第一次执行
s()时，num = 1第二次 执行
s()时， 因为 援用的时第一次s ()的变量num=1，num 没有被销毁，诚然在 num = 1 的根底上 再 加 1 。
留神
如果没有应用同样援用的话，那么屡次调用，都是同样的值，因为没有记录援用值。
函数在执行结束，num = 1 被销毁掉了，初始为 0
var num = 1;
function getValue(){
var num = 0;
return function(){
num++
console.log(num)
}
}
getValue()()
getValue()()
// 0 0💎闭包的作用
闭包的留神作用为这两项：
- 能够读取函数外部的变量
- 能够变量的值始终保持在内存中
栗子
function f2(){
let num = 0;
addNum = function(){
num++
}
function f3(){
console.log(num)
}
return f3
}
var a = f2()
a()
addNum()
a()
// 0 1
后果为 0 1函数在执行结束，局部变量也跟着销毁, 后果 不应该是 0 0 吗 ？
其实a() 相当于 是 f3() 的闭包函数，它被执行了两次。
- 第一次 执行 a() 时， 后果为 0 ， 很好了解。
- 第二次 执行的
f2()函数外部的addNum函数，发现没这个匿名函数赋值给一个变量，而且这个变量没加var / let， 那么它此时的作用域为全局,保留在内存当中。执行addNum时它拜访的f2()函数外部的局部变量num, 此时，addNum的存在依赖于f2，因而f2也在内存中，不会在调用完结后，被垃圾回收机制（garbage collection）回收。- 第三此 执行
a()时， 因为num已存在内存中，而至值为1最终输入后果： 0 ， 1
💎闭包留神
- 因为闭包会使得函数中的变量都被保留在内存中，内存耗费很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决办法是，在退出函数之前，将不应用的局部变量全副删除。
- 闭包会在父函数内部，扭转父函数外部变量的值。所以，如果你把父函数当作对象（object）应用，把闭包当作它的专用办法（Public Method），把外部变量当作它的公有属性（private value），这时肯定要小心，不要轻易扭转父函数外部变量的值。
发表回复