JavaScript闭包实例详解(2)

innerFn就是一个被包在outerFn作用域中的内部函数。这意味着，在outerFn内部调用innerFn是有效的，而在outerFn外部调用innerFn则是无效的。下面代码会导致一个JavaScript错误：

function outerFn() { document.write("Outer function<br/>"); function innerFn() { document.write("Inner function<br/>"); } } innerFn();

不过在outerFn内部调用innerFn，则可以成功运行：

function outerFn() { document.write("Outer function<br/>"); function innerFn() { document.write("Inner function<br/>"); } innerFn(); } outerFn();

（3）、伟大的逃脱

JavaScript允许开发人员像传递任何类型的数据一样传递函数，也就是说，JavaScript中的内部函数能够逃脱定义他们的外部函数。

逃脱的方式有很多种，例如可以将内部函数指定给一个全局变量：

var globalVar; function outerFn() { document.write("Outer function<br/>"); function innerFn() { document.write("Inner function<br/>"); } globalVar = innerFn; } outerFn(); globalVar();

调用outerFn时会修改全局变量globalVar，这时候它的引用变为innerFn，此后调用globalVar和调用innerFn一样。这时在outerFn外部直接调用innerFn仍然会导致错误，这是因为内部函数虽然通过把引用保存在全局变量中实现了逃脱，但这个函数的名字依然只存在于outerFn的作用域中。
也可以通过在父函数的返回值来获得内部函数引用

function outerFn() { document.write("Outer function<br/>"); function innerFn() { document.write("Inner function<br/>"); } return innerFn; } var fnRef = outerFn(); fnRef();

这里并没有在outerFn内部修改全局变量，而是从outerFn中返回了一个对innerFn的引用。通过调用outerFn能够获得这个引用，而且这个引用可以可以保存在变量中。

这种即使离开函数作用域的情况下仍然能够通过引用调用内部函数的事实，意味着只要存在调用内部函数的可能，JavaScript就需要保留被引用的函数。而且JavaScript运行时需要跟踪引用这个内部函数的所有变量，直到最后一个变量废弃，JavaScript的垃圾收集器才能释放相应的内存空间。

说了半天总算和闭包有关系了，闭包是指有权限访问另一个函数作用域的变量的函数，创建闭包的常见方式就是在一个函数内部创建另一个函数，就是我们上面说的内部函数，所以刚才说的不是废话，也是闭包相关的。

（4）、变量的作用域

内部函数也可以有自己的变量，这些变量都被限制在内部函数的作用域中：

function outerFn() { document.write("Outer function<br/>"); function innerFn() { var innerVar = 0; innerVar++; document.write("Inner function\t"); document.write("innerVar = "+innerVar+"<br/>"); } return innerFn; } var fnRef = outerFn(); fnRef(); fnRef(); var fnRef2 = outerFn(); fnRef2(); fnRef2();

每当通过引用或其它方式调用这个内部函数时，就会创建一个新的innerVar变量，然后加1，最后显示

Outer function Inner function innerVar = 1 Inner function innerVar = 1 Outer function Inner function innerVar = 1 Inner function innerVar = 1

内部函数也可以像其他函数一样引用全局变量：

var globalVar = 0; function outerFn() { document.write("Outer function<br/>"); function innerFn() { globalVar++; document.write("Inner function\t"); document.write("globalVar = " + globalVar + "<br/>"); } return innerFn; } var fnRef = outerFn(); fnRef(); fnRef(); var fnRef2 = outerFn(); fnRef2(); fnRef2();

现在每次调用内部函数都会持续地递增这个全局变量的值：

Outer function Inner function globalVar = 1 Inner function globalVar = 2 Outer function Inner function globalVar = 3 Inner function globalVar = 4