什么是js闭包?关闭的书包?
一、了解闭包
闭包的生成有三个必要条件(缺一不可)
这样就形成了一个不会销毁的函数空间。
闭包空间
我们管这个不会销毁的 a 函数的执行空间叫做闭包空间
把函数 a 里面返回的函数 b, 叫做函数a 的 闭包函数(闭包 => 函数内部的函数)
例: function a(){ var num=100; return function b(){ console.log(num) } } var res=a() res() //100
详解:
这个num就是函数a的私有变量
res 接受的是 a 函数执行以后的返回值
res 接受的就是函数 a 内部返回的一个复杂数据类型(函数b)
导致函数 a 的执行空间不会销毁
从现在开始, res 随时可以是一个 函数a 里面返回的 函数b
res 随时可以调用
并且res()一调用,就会打印num的值
二、闭包的特点
1、闭包的特点(优点和缺点并存)
1. 延长了变量的生命周期
+ 优点: 因为执行空间不销毁, 变量也没有销毁
+ 缺点: 因为执行空间不销毁, 会一直存在在内存中
2. 可以访问函数内部的私有变量
+ 优点: 利用闭包函数可以访问函数内部的私有变量
+ 缺点: 执行空间不会销毁, 会一直存在在内存中
3. 保护私有变量(只要是函数, 就有这个特点)
+ 优点: 保护私有变量不被外界访问
+ 缺点: 如果向访问, 必须要利用闭包函数
2、闭包的函数的缺点 **致命**
+ 因为当一段内存空间中有一个不会被销毁的东西一直存在
+ 那么就会出现内存占用, 如果过多, 就会导致内存溢出
+ 那么结果就是 内存泄漏
3、那闭包既然优缺点并存,那它到底有啥作用呢?
闭包的作用
+ 就是当你需要延长变量的声明周期的时候
+ 或者你需要访问某一个函数内部的私有数据的时候
+ 你可以使用 闭包 函数来解决
+ 前提:
如果有别的方法, 尽量不要使用闭包函数
只有到没有招的时候, 我们在使用闭包函数
所以:闭包! 慎用!
三、闭包函数的应用
1、简单应用(间接地返回一个函数)
直接返回一个函数:
return function b() {}
间接返回一个函数:
return 一个对象或者数组 //这个对象或者数组里面有一个函数
使用情况:
+ 当你只需要访问一个数据的时候, 可以使用直接返回或者间接返回
+ 当你需要访问多个私有数据的时候:
我们就需要使用间接返回的方式
返回一个对象内包含多个闭包函数
例: function fn() { var num = 100 var num2 = 200 return { getNum: function () { console.log(num) }, getNum2: function () { console.log(num2) } } } var res = fn() console.log(res) res.getNum() //100 res.getNum2() //200
详解: var res=fn(),res 得到的是一个对象 这个对象里面有一个函数是 fn 的闭包函数 console.log(res)得到的就是一个对象,对象里面有两个函数 res.getNum()得到的是第一个函数的num值:100 res.getNum2()得到的是第二个函数的num2的值:200
2、闭包应用之绑定事件
例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <script> var btns=document.querySelectorAll("button") function loop(num) { btns[num].onclick = function () { console.log(num) } } for (var i = 0; i < btns.length; i++) { loop(i) } </script>
详解: 需求: 点击的时候打印出对应的索引 实现步骤:循环绑定事件 + 获取所有 button 按钮 + for 循环绑定好一个点击事件 //loop(num)这个函数第一次执行的时候,i=0,num也就等于0; //btns就相当于一个外部的变量,btns[0]就是外部的内容, btns[0].onclick 成员就是外部的数据; // for (var i = 0; i < btns.length; i++) { loop(i) }就是循环执行loop(num)函数
关键字:js闭包、闭包函数、闭包应用
原文:https://www.cnblogs.com/YouyuZhao/p/12355046.html