闭包的理解

堆内存(主要存储基本数据类型和函数名称(保存的是栈内存的地址))和栈内存(主要存储引用数据类型的值)

一,函数的两个阶段
1,函数的定义
在内存中开辟一个空间,用来存储函数
将程序代码放在这个空间里
将存储空间的地址,赋值给函数名称进行存储
2,函数的执行阶段
按照函数名称存储的地址,找到存储空间
如果有形参就给形参赋值
预解析(在存储空间里面,变量提升,或者函数提升)
将存储的函数调用执行
二,函数的本质(函数的执行过程)
1,在函数的存储空间里面开辟一个新的执行空间
2,函数的程序会在执行空间里面执行
3,函数执行完毕后,执行空间就会被销毁(造成的结果就是函数定义的局部作用域变量也会被销毁)
在函数的外部是无法直接调用函数内部的局部作用域变量的
三,如何定义一个不被销毁的执行空间
1,在函数内部返回一个引用数据类型(数组,对象,函数)
2,在函数外部有变量引用这个函数
3,此时函数的执行空间就不会销毁


```javascript
function fn(){
//定义一个对象数据类型
let obj={int:100}
//返回值是一个引用数据类型
return obj
}
//外部有一个变量引用这个函数,此时a中存储的就是这个obj对象,所以函数的执行空间就不会被销毁
let a=fn()
console.log(a)
所以总结,如果返回值是基本数据类型,存储的数据作为返回值,基本数据类型变量是否继续存在,不会影响返回值
如果,返回值是引用数据类型,返回的是存储地址,所以在程序中的执行空间有被引用所以不会被销毁
如果引用数据类型被销毁,根据存储地址是无法找到对应的存储数据的

四,闭包的基本概念

闭包是一种高级的引用方式,通过建立一个不被销毁的执行空间,在函数外部使用函数内部的作用域变量

如何定义闭包?
1,定义一个函数a返回值是一个函数b
2,在返回的函数b中使用了a的作用域变量
3,在函数a的外部引用了函数a并且执行了函数b

```javascript
function a() {
    let int = 100
    return function b() {
        let int2 = int + 100
        return int2
    }
}
let a1 = a()
let a2 = a1()

console.log(a2)

五,闭包的应用
点击lii标签显示对应的index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="li" name="li">我是第一个li标签</li>
        <li class="li" name="li">我是第一个li标签</li>
        <li class="li" name="li">我是第一个li标签</li>
        <li class="li" name="li">我是第一个li标签</li>
        <li class="li" name="li">我是第一个li标签</li>
    </ul >
</body>
<script>
    const lis=document.querySelectorAll("li")

        // foreach写法加上事件监听写法

        // lis.forEach((item,key)=>{
        //     item.setAttribute("index",key+1)
        //     item.addEventListener("click",function(){
        //         console.log(this.getAttribute("index"))
        //     })
        // })

        // 通过for循环也可以写出来
        //  for(var i=0;i
        //      lis[i].setAttribute("index",i+1)
        //      lis[i].addEventListener("click",function(){
        //          console.log(this.getAttribute("index"))
        //      })
        //  }

        // for+let形式
        // for(let i=0;i
        //     lis[i].addEventListener("click",function(){
        //         console.log(i+1)
        //     })
        // }
        
        // 还可以通过闭包的形式
        for(var i=0;i<lis.length;i++){
            lis[i].addEventListener("click",(function(int){
                return function(){
                    console.log(int+1)
                }
            })(i))
        }

        // 立即执行函数,函数的自己执行(函数)(参数)
        // 立即执行函数是可以没有函数名字的
    </script>
</html>
七,闭包的特点
1,函数的作用域空间不会被销毁,
优点是,作用域的内容永远存在
缺点是占用了大量的空间
2,可以从外部访问函数内部的变量
优点是使用数据比较方便
缺点是容易造成数据泄露

你可能感兴趣的:(闭包的理解)