JavaScript闭包
引入
假设现在我们有一个需求:网页中有三个按钮,我们想要点击一个按钮的时候,网页会显示他是第几个按钮。
思路:遍历+ 监听
var btns = document.getElementsByTagName('button')
for (var i = 0,length=btns.length; i < length; i++) {
var btn = btns[i]
btn.onclick = function () {
alert('第'+(i+1)+'个')
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
如果写成for (var i = 0; i < btns.length; i++),那么在每次循环的时候都会计算一遍btn.length会影响代码效率
这么写是错误的,因为这个程序会用循环为每一个按钮绑定事件,而再去用鼠标点击去触发这个事件的时候,其实循环早已经执行完毕了。而执行完毕就意味着这个i就是2(这个i是全局变量)。也就是说不管你点击的哪个按钮,网页都会显示它是第3个按钮。
我们可以使用添加属性的办法,去记录他的下标:
for (var i = 0,length=btns.length; i < length; i++) {
var btn = btns[i]
//将btn所对应的下标保存在btn上
btn.index = i
btn.onclick = function () {
alert('第'+(this.index+1)+'个')
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
我们也可以用闭包的原理来做:
for (var i = 0,length=btns.length; i < length; i++) {
(function (j) {
var btn = btns[j]
btn.onclick = function () {
alert('第'+(j+1)+'个')
}
})(i)
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
什么是闭包
首先我们来看一段代码:
function fn1 () {
var a = 2
var b = 'abc'
function fn2 () { //执行函数定义就会产生闭包(不用调用内部函数)
console.log(a)
}
}
fn1()
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 如何产生闭包?
- 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包
- 闭包到底是什么?
- 使用chrome调试查看
- 理解一: 闭包是嵌套的内部函数
- 理解二: 包含被引用变量(函数)的对象
- 注意: 闭包存在于嵌套的内部函数中
- 产生闭包的条件?
- 函数嵌套
- 内部函数引用了外部函数的数据(变量/函数)
- 调用了外部函数
理解一就是把红色部分当作闭包
理解二就是把绿色部分当作闭包(Closure就是闭包的意思)
常见的闭包
常见的闭包有两种情景:
- 将函数作为另一个函数的返回值
- 将函数作为实参传递给另一个函数调用
①将函数作为另一个函数的返回值
// 1. 将函数作为另一个函数的返回值
function fn1() {
var a = 2
function fn2() {
a++
console.log(a)
}
return fn2
}
var f = fn1()
f() // 3
f() // 4
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
注意:
- 整个过程只产生了一个闭包
- 闭包个数与产生内部对象有关,所以我们可以通过调用了几次外部函数来判断闭包个数。
- 当执行到var a=2的时候闭包就已经产生了,因为函数声明会提升。
②将函数作为实参传递给另一个函数调用
// 2. 将函数作为实参传递给另一个函数调用
function showDelay(msg, time) {
setTimeout(function () {
alert(msg)
}, time)
}
showDelay('NEFU', 2000)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
注意:
- msg是被引用对象,也就是说msg是闭包,而time不是
- 因为内部的嵌套函数时function{}那个括号里的,而time不在里面
闭包的作用
闭包的两大作用:
- 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)
- 让函数外部可以操作(读写)到函数内部的数据(变量/函数)
我们可以分析以下代码:
function fn1() {
var a = 2
function fn2() {
a++
console.log(a)
// return a
}
function fn3() {
a--
console.log(a)
}
return fn3
}
var f = fn1()
f() // 1
f() // 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
问题一:函数执行完后, 函数内部声明的局部变量是否还存在?
答:一般是不存在的,存在于闭包中的变量才可能存在。就如同上面的代码因为有var f = fn1()这一句话,使对象(原来被fn3指着的对象)没有因为函数的执行结束而被销毁(因为现在有f指着他,导致他不会被销毁)。
问题二:在函数外部能直接访问函数内部的局部变量吗?
答:不能, 但我们可以通过闭包让外部操作它
闭包的作用有点类似于java中的对象的封装性。你可以将fn1当作类,将a、fn2、fn3当作对象的属性和方法。只不过这里是通过return来暴露内部方法,而java是通过权限修饰符来进行暴露。
闭包的生命周期
- 产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
- 死亡: 在嵌套的内部函数成为垃圾对象时
例如以下代码:
function fn1() {
//此时闭包就已经产生了(函数提升, 内部函数对象已经创建了)
var a = 2
function fn2 () {
a++
console.log(a)
}
return fn2
}
var f = fn1()
f() // 3
f() // 4
f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
如果换一种声明方式:
function fn1() {
var a = 2
//如果这样声明,则此时才会产生闭包
var fn2 = function fn2 () {
a++
console.log(a)
}
return fn2
}
var f = fn1()
f() // 3
f() // 4
f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
文章来源: blog.csdn.net,作者:十八岁讨厌编程,版权归原作者所有,如需转载,请联系作者。
原文链接:blog.csdn.net/zyb18507175502/article/details/124114957
- 点赞
- 收藏
- 关注作者
评论(0)