封闭空间的主要思想在于：
- JS中给一个变量外面加小括号，是不改变任何结果的。比如
var show = function(){ //定义一个名字为show的函数 alert(12);};show(); //调用名字为show的函数上面的show()也可以写成(show)()，然后因为show本身又代表function(){alert(12);};，所以左边括号里的show完全可以用函数本身代替而写成(function(){alert(12);})()。而右边的括号里可以传参数。
这样做的好处至少有：
- 可以在定义函数的同时又可以执行它，省去命名的步骤；
- 封闭空间里定义的变量是这个空间里的局部变量。
看下面这个典型错误的选项卡例子，是运用封闭空间来解决for循环里事件函数里i的问题
for (var i=0; i<aBtn.length; i++) { aBtn[i].onclick = function(){ for (var i=0; i<aBtn.length; i++) { aBtn[i].className = ''; aDiv[i].style.display = 'none'; } this.className = 'active'; aDiv[i].style.display = 'block'; //这行的i就是有问题的，因为在没有点击aBtn[i]之前而执行里面代码的时候i早就变成了3，而不是我们要的每次循环得到的那个i }; }上述代码是错的，可以想到，如果for循环里的代码如果是一个函数执行，那函数执行就能和for循环同步执行，每次循环i，只要把i传进里面函数的参数里，就能保证同时递增（严格来讲也不是同步，这个以后再说）。所以完全可以用封闭空间的方式来直接执行函数，并把i当做参数传进封闭空间函数即可。
for (var i=0; i<aBtn.length; i++) { (function(index){ //在定义的时候就要求传一个index变量 aBtn[i].onclick = function(){ for (var i=0; i<aBtn.length; i++) { aBtn[i].className = ''; aDiv[i].style.display = 'none'; } this.className = 'active'; aDiv[index].style.display = 'block'; //这里的index就相当于每次递增的i }; })(i); //这里将每次递增的i传给封闭函数里的参数}上面的例子，最外层for循环里的代码是一个封闭空间函数，它在定义的同时就执行了，而且是通过传参的方式将每次递增的i传进了函数，所以可以每次执行i都不同。
- 封闭空间的注意事项
一般在工作中，用封闭空间可以很好地避免变量重名的问题，比如下面这个例子
//下面是员工A写的代码var oBtn = document.getElementsByTagName('input')[0];oBtn.onclick = function(){ alert(oBtn.value);};//下面是员工B写的代码,但是他们2个人是分别在不同的文件里写的，而他也定义了oBtn，所以把前面的覆盖了var oBtn = document.getElementsByTagName('input')[1];oBtn.onclick = function(){ alert(oBtn.value);};为了避免这样的情况出现，可以用封闭空间的方法，把各自的变量封闭为局部变量
//下面是员工A写的代码;(function(){ var oBtn = document.getElementsByTagName('input')[0]; oBtn.onclick = function(){ alert(oBtn.value); }; })();//下面是员工B写的代码;(function(){ var oBtn = document.getElementsByTagName('input')[1]; oBtn.onclick = function(){ alert(oBtn.value); }; })();这时每个函数里的oBtn只在各自的函数里起作用。
另外每个(function()前加一个;的目的是，在实际工作中，不同人写不同的部分，最后会压缩在一个文件中，而这个;是为了防止前面的一个人写的代码忘了用;结束，而导致后面的代码出错，但是即使2个;;连在一起也不会有问题。