javaScript从入门到提高前需要注意的细节：变量部分

到了HTML5的时代，对javaScript的要求不是降低了，而是更提高了。javaScript语言的入门非常简单，如果你有java、C#等C风格的结构化语言的基础，那javaScript你最多半天就可以写点什么了。但是javaScript是一种动态语言，这个特性决定了他在很多方面和java、C#等语言有极大的不同。很多人说只要会java、C#就可以在短时间内搞定javaScript，估计一般都是吹牛来的，用javaScript写点简单的应用没有问题，如果要完全比较好的掌握，那需要真正的理解javaScript的动态这个特性。
当你快速的了解的javaScript入门编程后，在提高开发能力之前，需要的是确保掌握javaScript的编程细节或者说特殊性。
而且和css在不同的浏览器中有兼容性问题一样，javaScript在不同的浏览器和版本中也同样有不同的变化。


我认为javaScript入门之后，向中级（基于面向对象的编程）发展之前，有两个问题会对开发者有影响：类型的动态和语法的灵活性。而这两点的集合，是另很多入门级的javaScript人员造成各种诡异问题的核心。我这篇文章不讨论关于语法的基础，关于核心对象的方法，也不关心dom的处理，这些内容在网上的任何javaScript教程中都有，我们讨论一个些基于代码级别但容易写错的地方，为你将来的高质量的javaScript奠定些好的基础。


我以下的内容是在IE7/8、Chrome14、FireFox10下进行测试。同时声明一个事情，下面的内容的次序比较随意，比javaScript还随意，不是作为一步步的教程给零基础看的。需要你至少有些javaScript的代码经验了。

关于变量部分

在javaScript中变量使用var声明的变量是当前作用域的变量，不使用var声明的则肯定是全局变量。

[html] view plaincopyprint?

1. <scripttype="text/javascript"> 
2.  
3.     var x = 10; //全局 
4.     y = 100; //全局 
5.  
6.     function fun1() { 
7.         var m = 99; //局部 
8.         n = 9; //全局 
9.     } 
10.  
11.     alert(typeof this.x); //number 
12.     alert(typeof this.y); //number 
13.     alert(typeof this.m); //undefined 
14.     alert(typeof this.n); //undefined 
15.     fun1(); 
16.     alert(typeof this.m); //undefined 
17.     alert(typeof this.n); //number 
18.      
19.  
20. </script> 

<script type="text/javascript"> var x = 10; //全局 y = 100; //全局 function fun1() { var m = 99; //局部 n = 9; //全局 } alert(typeof this.x); //number alert(typeof this.y); //number alert(typeof this.m); //undefined alert(typeof this.n); //undefined fun1(); alert(typeof this.m); //undefined alert(typeof this.n); //number </script>
以上代码说明，当fun1被执行后，函数内没有用var声明的n变量，被注册为全局变量了。


下面的代码得到同样的执行效果

[html] view plaincopyprint?

1. <scripttype="text/javascript"> 
2.  
3.     var x = 10; //全局 
4.     y = 100; //全局 
5.  
6.     function fun1() { 
7.         var m = 99; //局部 
8.         n = 9; //全局 
9.     } 
10.  
11.     alert(typeof window.x); //number 
12.     alert(typeof window.y); //number 
13.     alert(typeof window.m); //undefined 
14.     alert(typeof window.n); //undefined 
15.     fun1(); 
16.     alert(typeof window.m); //undefined 
17.     alert(typeof window.n); //number 
18.      
19.  
20. </script> 

<script type="text/javascript"> var x = 10; //全局 y = 100; //全局 function fun1() { var m = 99; //局部 n = 9; //全局 } alert(typeof window.x); //number alert(typeof window.y); //number alert(typeof window.m); //undefined alert(typeof window.n); //undefined fun1(); alert(typeof window.m); //undefined alert(typeof window.n); //number </script>
那么，我们可以明显的得到一个推理，在全局里面，window和this是同一个对象指向。

[html] view plaincopyprint?

1. <scripttype="text/javascript"> 
2.     alert(this == window); 
3.     alert(this === window); 
4. </script> 

<script type="text/javascript"> alert(this == window); alert(this === window);</script>
那么下面的函数在其函数状态和对象状态时this的指向是不同的，因为javaScript的动态的执行，当其执行到的时候，才去计算上下文情况。

[html] view plaincopyprint?

1. <scripttype="text/javascript"> 
2.  
3.     function Fo1() { 
4.         return this; 
5.     } 
6.  
7.     alert(Fo1()); 
8.     alert(new Fo1()); 
9.      
10. </script> 

<script type="text/javascript"> function Fo1() { return this; } alert(Fo1()); alert(new Fo1()); </script>
同样作为变量，使用var声明的变量是不可以删除的，没有使用var声明的变量是可以删除的

[html] view plaincopyprint?

1. var x = 10; //全局 
2. y = 100; //全局 
3.  
4. function fun1() { 
5.     var m = 99; //局部 
6.     n = 9; //全局 
7.     delete m; 
8.     delete n; 
9.     alert(typeof m); //number 
10.     alert(typeof n); //undefined 
11. } 
12.  
13. delete x; 
14. delete y; 
15.  
16. alert(typeof x); //number 
17. alert(typeof y); //undefined 
18. fun1(); 
19. alert(typeof n); //undefined 

var x = 10; //全局y = 100; //全局function fun1() { var m = 99; //局部 n = 9; //全局 delete m; delete n; alert(typeof m); //number alert(typeof n); //undefined}delete x;delete y;alert(typeof x); //numberalert(typeof y); //undefinedfun1();alert(typeof n); //undefined
在javaScript中声明变量非常的灵活，但这个灵活性，对控制全局和局部要有所注意。

[html] view plaincopyprint?

1. function fun1() { 
2.     var m = n = 10; //n是全局，m是局部 
3.     var x, y = 1, k =10; //xyk都是局部 
4. } 

function fun1() { var m = n = 10; //n是全局，m是局部 var x, y = 1, k = 10; //xyk都是局部}
而且，有意思的是，在通常的语言中，我们对变量总是先定义后使用，不过在javaScript中嘛……看以下代码

[html] view plaincopyprint?

1. function fun1() { 
2.     alert(typeof x); //undefined 
3.     alert(typeof y); //undefined 
4.     var x = 10; 
5.     alert(typeof x); //number 
6. } 
7.  
8. fun1(); 

function fun1() { alert(typeof x); //undefined alert(typeof y); //undefined var x = 10; alert(typeof x); //number}fun1();
这样的结果，对你来说是完全可以接受和预期的，不过……

[html] view plaincopyprint?

1. function fun1() { 
2.     alert(x); //undefined 
3.     alert(y); //提示y没有定义 
4.     var x = 10; 
5.     alert(x); //number 
6. } 
7.  
8. fun1(); 

function fun1() { alert(x); //undefined alert(y); //提示y没有定义 var x = 10; alert(x); //number}fun1();上面的现象很奇怪，如果我们当真要用x和y的时候，编译器却给予不同的对待，认为x仅仅是没有定义（认可已经声明了），而y是真正的不存在。这说明在处理一个范围的变量的时候，var无论你在哪里声明的，总是一开始就进行分配了。对于非var定义的变量嘛，就没有这样的待遇了，必须等执行到才进行分配

[html] view plaincopyprint?

1. <prename="code"class="html">function fun1() { 
2.     alert(x); //提示x没有定义 
3.     alert(y); //提示y没有定义 
4.     x = 10; 
5.     alert(x); //number 
6. } 
7. fun1(); 

<pre name="code" class="html">function fun1() { alert(x); //提示x没有定义 alert(y); //提示y没有定义 x = 10; alert(x); //number}fun1();
更需要注意的是，在函数内部声明的var变量，并不局限在声明的代码语句块中，看看以下代码

[html] view plaincopyprint?

1. function fun1() { 
2.     for (var i = 0; i<10; i++) { 
3.  
4.     } 
5.     alert(i); //10 
6. } 
7.  
8. fun1(); 

function fun1() { for (var i = 0; i < 10; i++) { } alert(i); //10}fun1();
所以呢，我们推荐在一个对象/函数的第一行就把所有的局部变量全部声明完毕

[html] view plaincopyprint?

1. function fun1() { 
2.     var value = 1, 
3.     arr = [], 
4.      obj = {}, 
5.     date = new Date(), 
6.     has = false; 
7. } 

function fun1() { var value = 1, arr = [], obj = {}, date = new Date(), has = false;}

注意变量之间用逗号隔离,这样的好处是明显的，自己去考虑吧。
javaScript的语法很灵活，语句后面可以不加;来表示结束，这个时候编译器会讲硬回车作为语句的结束符合

[html] view plaincopyprint?

1. function fun1() { 
2.     var x = 10 
3.     var y = 9 
4.     return x + y 
5. } 
6.  
7. alert(fun1()); //19 

function fun1() { var x = 10 var y = 9 return x + y}alert(fun1()); //19
以上的代码写法我不知道有什么特别的好处，如果是炫耀你知道可以不用;来结束语句，那就到此为止吧。因为下面的代码会得到一个错误

[html] view plaincopyprint?

1. function fun1() { 
2.     return  
3.     { 
4.         Title: "title", 
5.         Style: "style", 
6.         Value: "Value" 
7.     } 
8. } 
9.  
10. alert(typeof fun1());  

function fun1() { return { Title: "title", Style: "style", Value: "Value" }}alert(typeof fun1());
因为javaScript会再return后面加一个;

正确的做法是

[html] view plaincopyprint?

1. function fun1() { 
2.     return { 
3.         Title: "title", 
4.         Style: "style", 
5.         Value: "Value" 
6.     }; 
7. } 
8.  
9. alert(typeof fun1());  

function fun1() { return { Title: "title", Style: "style", Value: "Value" };}alert(typeof fun1());
我不好说，这个原因一定是；不写引起的，但我想说明的是，你要小心javaScript对随意代码的随意处理：你总是应该让javaScript编译器知道你明确的要干嘛，而不是由他去猜呀猜的。