js闭包

最新推荐文章于 2023-05-27 15:22:43 发布

W_Kxing

最新推荐文章于 2023-05-27 15:22:43 发布

阅读量183

点赞数

闭包是基于正常的垃圾回收处理机制下的。也就是说，一般情况一个函数（函数作用域）执行完毕，里面声明的变量会全部释放，被垃圾回收器回收。但闭包利用一个技巧，让作用域里面的变量，在函数执行完之后依旧保存没有被垃圾回收处理掉。

function foo(x) {

var tmp = 3;

return function (y) {

alert(x + y + (++tmp));

}

var bar = foo(2); // bar 现在是一个闭包

bar(10);

　　我们来分析一下这一段代码，在foo中，声明一个变量tmp，他属于foo作用域下的变量。函数返回一个函数，这个函数被嵌套，函数内部弹出x+y（++tmp）。这是个人都看得懂啊，那为什么会出现闭包，怎么出现的了。这接下来就是看执行的过程了，首先执行var bar = foo（2）；那么foo就执行了，参数2也传进去了，但是执行完毕之后，tmp变量以及参数x就已经被释放回收了吗？并没有，因为返回值里面还等待使用这些变量咯，所以此时，foo虽然执行了，但是foo的变量并没有被释放，在return在等待继续使用这些变量了，这个时候bar就是一个闭包。

　　然后我们再执行bar，结果是16，另外你再把bar里面的参数改改，是不是结果又变化了勒？这就是闭包的神奇之处，它改变了JS的内存机制有木有。

　　然后我们再看看长得很像闭包的形式

function foo(x) {

var tmp = 3;

function bar(y) {

alert(x + y + (++tmp));

}

bar(10);

}

foo(2)

　　如果按照某些教程说的，可以父级作用域访问子级作用域的变量，foo在全局中执行，执行过程中未必没有访问局部变量？访问到了吧，但他不是闭包。按照我之前说的思维再走一遍。

　　函数foo执行，执行完执行完毕之后没我再执行的时候，是不是里面的tmp，bar函数又重新声明了。那么根本就没有阻止foo作用域中的变量被垃圾回收吧，那怎么又叫做闭包了？

　　再结合一个闭包运用的最多的例子，就是for循环的问题，比如：

for(var i = 0;i<10;i++){

console.log(i)

}

　　这看起来没有任何问题啊，会输出0，1，2，3，4，5，6，7，8，9

　　一般出问题出在哪里了，比如为很多个元素绑定一个点击事件的时候

　　我们期望的是点击到某一个按钮就会输出第几个被点击到了语句，但是很遗憾，你永远达不到你想要的效果，为什么了。

　　因为你点击事件是在点击后才触发的，而for循环当你执行只后就已经全部执行完毕了执行完毕后 i 的值会是比len大 1 的，所以不管你怎么点， i 的值在for执行完毕之后已经固定了，改变不了了。那有什么办法保存这个 i 的值了。除了最基础的给元素节点自定义属性这个方法之外，就是我们所说的闭包了。那么，怎么用？

　　我现在的需求是要保存住这个 i 的值，如果在当前作用域下是做不到的。而闭包的作用就是让当前作用域的值不会被垃圾回收，由于在ES5中没有块级作用域的说法，所以得利用函数自己创建一个作用域：

var btnList = document.getElementsByClassName("btn"),

len = btnList.length;

for（var i = 0;i<len;i++）{

(function(j){

btnList[j].onclick = function(){

console.log("第"+j+"个按钮被点击到了")

}

})(i)

}

　　这又哪里产生了闭包了。别急，我们一个个分析。for循环每一次都执行一个 IIEF （自执行函数），每一次变量 i 被当做参数传到IIEF中去，那么这个自执行函数中创建了一个变量，参数 j 然后元素节点 btnList 绑定一个onclick事件，执行函数里面需要用到这个参数 j ，但是你又没点，那么这个遍历 j 就没有被清理，就一直在参数里面被保存着，每一个IIEF都做一样的事情，所以这个时候就产生了闭包，变量 j 并没有被回收，依然在等待你使用。