研究了数小时的JS闭包,终于有所收获了,网上有很多关于闭包的研究,在这里我就只说说个人理解,如果有错误望指出加以改正!
闭包的几个关键词:函数嵌套,自由变量,内部函数调用自由变量!
直接上代码(困扰了我很长时间):
var result = [];
function fn() {
for (var i = 0; i < 5; i++) {
result[i] = function() {
console.log(i);
}
}
}
fn();
result[0]();
result[1]();
result[2]();
相信很多人对这段代码并不陌生,打印结果肯定都是一样的都是5!
解释如下:
fn()函数调用完成后已经完成了遍历过程此时 i 已经递增到5了,但是此时由于闭包,内部的 i 并未销毁,于是调用result0可以取出 i 的值为5!
那如何让其输出递增值呢?有很多方案,我只列出让我困扰了很久的其中一种!
var result = [];
function fn() {
for (var i = 0; i < 5; i++) {
result[i] = (function(n) {
return function() {
console.log(n);
}
})(i);
}
}
fn();
result[0]();
result[1]();
result[2]();
分析:
现在我们将此结构分为三层函数,最外层的fn,中间层的自执行的匿名函数,最里层的匿名函数。
为何这样就可以输出递增值呢?其实很简单,中间层的自执行的匿名函数将自由变量 i 传入后保护了 i 不被外界改变,所以每次循环得到的 i 都被保护到中间层的自执行的匿名函数内了!
经分析,这段小小的代码却包含了大量的JS知识啊,闭包以及自执行的匿名函数,真可谓经典!但同时也会发现闭包很是占用内存,至于优化方面还有待去学习!