JavaScript闭包实战：私有变量模拟与循环引用陷阱

JavaScript闭包基础与私有变量模拟

JavaScript中最核心的特性之一便是闭包的应用。得益于闭包机制，当前作用域内的代码能够访问外部作用域的资源。由于JavaScript语言特性中不存在块级作用域，仅具备函数作用域，因此闭包的使用与函数定义紧密相连。

利用闭包模拟私有变量

function Counter(start) {
var count = start;
return {
increment: function() {
count++;
        },
get: function() {
return count;
        }
    }
}
var foo = Counter(4);
foo.increment();
foo.get(); // 5

在此示例中，Counter函数返回了两个闭包：increment和get函数。这两个函数持续保持着对Counter函数作用域的引用，因此它们能够始终访问定义在Counter作用域内的count变量。

私有变量的工作机制解析

由于JavaScript不允许直接对作用域进行赋值或引用操作，所以在上述示例中，外部代码无法直接访问内部的私有变量count。唯一可行的访问途径是通过定义闭包来实现。

var foo = new Counter(4);
foo.hack = function() {
count = 1337;
};

上述代码并不会改变Counter作用域内的count变量值，因为hack函数并未在Counter内部定义。这段代码实际上是在创建或覆盖全局变量count，而非修改内部状态。

循环内闭包陷阱与解决方案

循环内部使用闭包的常见陷阱

开发者最容易犯的错误之一，就是在循环内部使用闭包。

for(var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}

上述代码并不会按预期输出0到9，而是会连续输出10次10。这是因为内部的匿名函数始终保持着对变量i的引用。当setTimeout触发的console.log开始执行时，循环早已结束，此时变量i的值已经变为10。为了避免此类错误，我们需要在每次循环迭代时为变量i的值创建一个独立的拷贝。

避免引用错误的解决方案

解决循环中变量值复制问题的最佳方式，是在外层包裹一个立即执行的匿名函数。

for(var i = 0; i < 10; i++) {
(function(e) {
setTimeout(function() {
console.log(e);
}, 1000);
})(i);
}

该外部匿名函数接收循环变量i作为第一个参数，并将其值拷贝至自身的参数e中。随后，外部匿名函数将参数e传递给setTimeout，使得setTimeout获得了指向参数e的引用。由于参数e的值是局部拷贝，它不会受到外部循环变量变化的影响。

此外，还有另一种实现相同效果的方法，即在setTimeout内部的匿名函数中再返回一个匿名函数：

for(var i = 0; i < 10; i++) {
setTimeout((function(e) {
return function() {
console.log(e);
        }
})(i), 1000)
}

除此之外，利用bind方法也能达到同样的目的。

for(var i = 0; i < 10; i++) {
setTimeout(console.log.bind(console, i), 1000);
}

文章最后我们对闭包进行总结：

（1）闭包本质上是一种设计原则，它通过处理上下文关系来简化用户调用，使用户在无需了解底层细节的情况下达成目标； （2）网络上主流的闭包剖析文章往往与闭包的设计初衷背道而驰，如果用户必须了解闭包的内部细节才能正确使用，那么该闭包的设计便是失败的； （3）建议尽量少学习闭包的复杂细节，保持使用的简洁性。