JavaScript代码编写中各种各样的坑和填坑方法
坑”这个字，在此的意思是“陷阱”。由于JavaScript“弱语言”的性质，使得其在使用过程中异常的宽松灵活，但也极为容易“中招”。这些坑往往隐藏着，所以必须擦亮双眼，才能在学习与应用JS的道路上走的一帆风顺。
一、全局变量
JavaScript通过函数管理作用域。在函数内部声明的变量只在这个函数内部，函数外面不可用。另一方面，全局变量就是在任何函数外面声明的或是未声明直接简单使用的。
“未声明直接简单使用”，指的是不用var关键字来声明变量。这个我们已经非常清楚，避免造成隐式产生全局变量的方法就是声明变量尽量用var关键字。
可你以为用了var就ok了？来看看这个坑：
functionfoo(){
vara=b=0;
//body...
}
也许你期望得到的是两个局部变量，但b却是货真价实的全局变量。why?Because赋值运算是自右往左的，所以这相当于：
functionfoo(){
vara=(b=0);
//body...
}
所以b是全局变量。
填坑：变量声明，最好一个个来，别搞批发~_~;
二、变量声明
先来看坑：
myName="global";
functionfoo(){
alert(myName);
varmyName="local";
alert(myName);
}
foo();乍看上去，我们预计期望两次alert的结果分别为“global”与“local”，但真实的结果是“undefined”与“local”。why?Because变量在同一作用域（同一函数）中，声明都是被提至作用域顶部先进行解析的。
所以以上代码片段的执行行为可能就像这样：
functionfoo(){
varmyName;
alert(myName);//"undefined"
myName="local";
alert(myName);//"local"
}用另一个坑来测试下你是否真的理解了预解析：
if(!("a"inwindow)){
vara=1;
}
alert(a);a变量的声明被提前到了代码顶端，此时还未赋值。接下来进入if语句，判断条件中"a"inwindow已成立（a已被声明为全局变量），所以判断语句计算结果为false，直接就跳出if语句了，所以a的值为undefined。
vara;//"undefined"
console.log("a"inwindow);//true
if(!("a"inwindow)){
vara=1;//不执行
}
alert(a);//"undefined"填坑：变量声明，最好手动置于作用域顶部，对于无法当下赋值的变量，可采取先声明后赋值的手法。
三、函数声明
函数声明也是被提前至作用域顶部，先于任何表达式和语句被解析和求值的
alert(typeoffoo);//"function"
functionfoo(){
//body...
}可以对比一下：
alert(typeoffoo);//"undefined"
varfoo=function(){
//body...
};明白了这个道理的你，是否还会踩以下的坑呢？
functiontest(){
alert("1");
}
test();
functiontest(){
alert("2");
}
test();
运行以上代码片段，看到的两次弹窗显示的都是“2”，为什么不是分别为“1”和“2”呢？很简单，test的声明先于test()被解析，由于后者覆盖前者，所以两次执行的结果都是“2”。
填坑：多数情况下，我用函数表达式来代替函数声明，特别是在一些语句块中。
四、函数表达式
先看命名函数表达式，理所当然，就是它得有名字，例如：
varbar=functionfoo(){
//body...
};要注意的是：函数名只对其函数内部可见。如以下坑：
varbar=functionfoo(){
foo();//正常运行
};
foo();//出错：ReferenceError
填坑：尽量少用命名函数表达式（除了一些递归以及debug的用途），切勿将函数名使用于外部。
五、函数的自执行
对于函数表达式，可以通过后面加上()自执行，而且可在括号中传递参数，而函数声明不可以。坑：
//(1)这只是一个分组操作符，不是函数调用！
//所以这里函数未被执行，依旧是个声明
functionfoo(x){
alert(x);
}(1);以下代码片段分别执行都弹窗显示“1”，因为在(1)之前，都为函数表达式，所以这里的()非分组操作符，而为运算符，表示调用执行。
//标准的匿名函数表达式
varbar=functionfoo(x){
alert(x);
}(1);
//前面的()将function声明转化为了表达式
(functionfoo(x){
alert(x);
})(1);
//整个()内为表达式
(functionfoo(x){
alert(x);
}(1));
//new表达式
newfunctionfoo(x){
alert(x);
}(1);
//&&,||,!,+,-,~等操作符（还有逗号），在函数表达式和函数声明上消除歧义
//所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了
true&&functionfoo(x){
alert(x);
}(1);填坑：这个坑的关键在于，弄清楚形形色色函数表达式的实质。
六、循环中的闭包
以下演示的是一个常见的坑：
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>whenclickinglinksbelow,showthenumberofitssequence</h3>
<ul>
<li><ahref="#">link#0</a></li>
<li><ahref="#">link#1</a></li>
<li><ahref="#">link#2</a></li>
<li><ahref="#">link#3</a></li>
<li><ahref="#">link#4</a></li>
</ul>
</body>
</html>
varlinks=document.getElementsByTagName("ul")[0].getElementsByTagName("a");
for(vari=0,l=links.length;i<l;i++){
links[i].onclick=function(e){
e.preventDefault();
alert("Youclicklink#"+i);
}
}
我们预期当点击第i个链接时，得到此序列索引i的值，可实际无论点击哪个链接，得到的都是i在循环后的最终结果：”5”。
解释一下原因：当alert被调用时，for循环内的匿名函数表达式，保持了对外部变量i的引用（闭包），此时循环已结束，i的值被修改为“5”。
填坑：为了得到想要的结果，需要在每次循环中创建变量i的拷贝。以下演示正确的做法：
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>whenclickinglinksbelow,showthenumberofitssequence</h3>
<ul>
<li><ahref="#">link#0</a></li>
<li><ahref="#">link#1</a></li>
<li><ahref="#">link#2</a></li>
<li><ahref="#">link#3</a></li>
<li><ahref="#">link#4</a></li>
</ul>
</body>
</html>
varlinks=document.getElementsByTagName(“ul”)[0].getElementsByTagName(“a”);
for(vari=0,l=links.length;i<l;i++){
links[i].onclick=(function(index){
returnfunction(e){
e.preventDefault();
alert("Youclicklink#"+index);
}
})(i);
}
可以看到，(function(){...})()的形式，就是上文提到的函数的自执行，i作为参数传给了index，alert再次执行时，它就拥有了对index的引用，此时这个值是不会被循环改变的。当然，明白了其原理后，你也可以这样写：
for(vari=0,l=links.length;i<l;i++){
(function(index){
links[i].onclick=function(e){
e.preventDefault();
alert("Youclicklink#"+index);
}
})(i);
}
Itworkstoo.