程序博客网 > mac os x 10.11破解版

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

来源：互联网 发布：mac os x 10.11破解版 编辑：程序博客网 时间：2024/05/01 10:43
 到了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 plaincopy
  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>  
[html] view plaincopy
  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] view plaincopy
  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>  
[html] view plaincopy
  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] view plaincopy
  1. <script type="text/javascript">  
  2.     alert(this == window);  
  3.     alert(this === window);  
  4. </script>  
[html] view plaincopy
  1. <script type="text/javascript">  
  2.     alert(this == window);  
  3.     alert(this === window);  
  4. </script>  

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

[html] view plaincopy
  1. <script type="text/javascript">  
  2.   
  3.     function Fo1() {  
  4.         return this;  
  5.     }  
  6.   
  7.     alert(Fo1());  
  8.     alert(new Fo1());  
  9.       
  10. </script>  
[html] view plaincopy
  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] view plaincopy
  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  
[html] view plaincopy
  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] view plaincopy
  1. function fun1() {  
  2.     var m = n = 10; //n是全局，m是局部  
  3.     var x, y = 1, k = 10; //xyk都是局部  
  4. }  
[html] view plaincopy
  1. function fun1() {  
  2.     var m = n = 10; //n是全局，m是局部  
  3.     var x, y = 1, k = 10; //xyk都是局部  
  4. }  

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

[html] view plaincopy
  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] view plaincopy
  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] view plaincopy
  1. function fun1() {  
  2.     alert(x); //undefined  
  3.     alert(y); //提示y没有定义  
  4.     var x = 10;  
  5.     alert(x); //number  
  6. }  
  7.   
  8. fun1();  
[html] view plaincopy
  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] view plaincopy
  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();  
[html] view plaincopy
  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();  

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

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

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

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


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

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

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

[html] view plaincopy
  1. function fun1() {  
  2.     return   
  3.     {  
  4.         Title: "title",  
  5.         Style: "style",  
  6.         Value: "Value"  
  7.     }  
  8. }  
  9.   
  10. alert(typeof fun1());   
[html] view plaincopy
  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] view plaincopy
  1. function fun1() {  
  2.     return {  
  3.         Title: "title",  
  4.         Style: "style",  
  5.         Value: "Value"  
  6.     };  
  7. }  
  8.   
  9. alert(typeof fun1());   
[html] view plaincopy
  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
mac os x 10.11破解版 mac os x 10.11破解版
原创粉丝点击
热门IT博客
关联分析算法java代码关联分析算法java代码
单片机室温监测装置单片机室温监测装置
淘宝会员名
淘宝达人机构
成都游戏原画培训 知乎
手机自带内存数据恢复
sql server 巡检报告
三菱可编程软件
淘宝卖海鲜干货手续
淘宝互粉群qq群
ios11 蜂窝移动数据
为什么淘宝app不精简
淘宝电子面单充值
第三届大数据金融论坛
网络大电影ppt
淘宝客 订单积分
取代迅雷 知乎
java xml转pdf itext
广数简单编程实例
dbscan聚类算法python
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 上林县旅游景区景点 广西上林县旅游景点 上林县中学 上林县白圩中学 广西上林县 上林风景 上林论坛 上林网站 林家工坊 阳光城上林湖 上林湖越窑青瓷 上林湖 上林溪小学 北京上林溪租房 阵阳林悦溪 上林溪房价 上林溪南区 上林溪售楼处 上林溪均价 上林溪怎么样 上林溪户型图 上林溪 售楼处 上林溪三居 上林溪装修 上林溪位置 海淀上林溪 上林溪 价格 北京上林溪小区 北京 上林溪 上林溪南区开盘 上林溪小区地址 上林溪南区户型图 海淀区上林溪 上林溪 怎么样 上林溪 电话 北京上林溪幼儿园 上林溪 南区 上林溪物业电话 上林溪 租房 陈阳林悦溪免费阅读 主角叫陈阳林若溪

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里