共计 1151 个字符,预计需要花费 3 分钟才能阅读完成。
这是篇文章主要是讲一下对闭包这一概念的理解。讨论闭包之前,我们先从一个经典的例子说起
// 程序 1
var arr = []
for(var i = 0; i < 3; i++){arr[i] = function () {console.log(i)
}
}
arr[0]() // 3
arr[1]() // 3
arr[2]() // 3
大家都知道,这段代码最终输出都为 3。因为函数调用的时候循环已经结束了所以 i 等于 3,更为重要的是,es6 之前没有块作用域,变量 i 的作用域不在 for 循环中,而在 for 循环之外。如果我们想要看到输出结果依次为 0,1,2,就得用到闭包了。否则,除非我们能在每次循环的过程中调用函数,因为只有在循环进行的过程中 i 才会处于 0,1,2 的状态。比如像这样:
// 程序 2
for(var i = 0; i < 3; i++){(function () {console.log(i)
})()}
// 0
// 1
// 2
必须要在循环进行时调用哦,像下面这样都不行!
// 程序 3
for(var i = 0; i < 3; i++){setTimeout(function () {console.log(i)
}, 0)
}
// 3
// 3
// 3
当然程序 2 这样写已经失去意义了,这个程序的目的就是要给数组加几个函数供以后调用,而不是马上就要调用它。闭包主要就是用来解决这样的问题,它让函数可以访问到函数所被创建时的上下文环境,不论这个函数在什么时候被调用。所以闭包产生的条件有两个,一是函数能通过变量作用域规则访问到它被创建时的上下文环境,例如程序 1,函数只是简单的访问了外部的变量 i,严格上讲不算闭包。二是函数在其它地方执行时,函数依然能够记住并访问到它所被定义时的上下文环境,我们使用闭包来对程序 1 进行修改:
// 程序 4
var arr = []
for(var i = 0; i < 3; i++){(function () {
var j = i
arr[i] = function () {console.log(j)
}
})()}
arr[0]() // 0
arr[1]() // 1
arr[2]() // 2
不同的是这次增加了立即执行函数并在里面定义变量 j,我们可以把立即执行函数称为 fn。每次循环都会创建一个以立即执行函数为作用域的变量 j,原来在程序 1 中函数访问的是外部变量 i,现在访问的是 fn 这一闭包中的变量 j。fn 执行结束时 j 本应被回收,但是由于该作用域内还定义了一个内部访问了变量 j 的函数,该函数在未来可能被执行,所以 j 被“记住”了,也就是作用域链被保存了。我们可以把 fn 称为一个闭包,闭包内可以定义函数并且这些函数可以访问闭包中定义的变量,例如:
function fn(){
var a = 1;
return function(){console.log(a)
}
}
var module = fn()
module() // 1
fn 返回的函数通过闭包能够访问到 a。