分享

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

 看见就非常 2012-05-16
到了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代码 复制代码
  1. <script type="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>  

以上代码说明,当fun1被执行后,函数内没有用var声明的n变量,被注册为全局变量了。


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

Html代码 复制代码
  1. <script type="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>  

那么,我们可以明显的得到一个推理,在全局里面,window和this是同一个对象指向。

Html代码 复制代码
  1. <script type="text/javascript">  
  2.     alert(this == window);   
  3.     alert(this === window);   
  4. </script>  

那么下面的函数在其函数状态和对象状态时this的指向是不同的,因为javaScript的动态的执行,当其执行到的时候,才去计算上下文情况。

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

同样作为变量,使用var声明的变量是不可以删除的,没有使用var声明的变量是可以删除的

Html代码 复制代码
  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  

在javaScript中声明变量非常的灵活,但这个灵活性,对控制全局和局部要有所注意。

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

而且,有意思的是,在通常的语言中,我们对变量总是先定义后使用,不过在javaScript中嘛……看以下代码

Html代码 复制代码
  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();  

这样的结果,对你来说是完全可以接受和预期的,不过……

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

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

更需要注意的是,在函数内部声明的var变量,并不局限在声明的代码语句块中,看看以下代码

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

所以呢,我们推荐在一个对象/函数的第一行就把所有的局部变量全部声明完毕

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


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

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

以上的代码写法我不知道有什么特别的好处,如果是炫耀你知道可以不用;来结束语句,那就到此为止吧。因为下面的代码会得到一个错误

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

因为javaScript会再return后面加一个;

正确的做法是

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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多