当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声明的则肯定是全局变量。

 
  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变量,被注册为全局变量了。

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

 
  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是同一个对象指向。

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

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

 
  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声明的变量是可以删除的

 
  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中声明变量非常的灵活,但这个灵活性,对控制全局和局部要有所注意。

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

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

 
  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(); 

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

 
  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定义的变量嘛,就没有这样的待遇了,必须等执行到才进行分配

 
  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变量,并不局限在声明的代码语句块中,看看以下代码

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

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

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

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

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

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

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

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

 

正确的做法是

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

我不好说,这个原因一定是;不写引起的,但我想说明的是,你要小心javaScript对随意代码的随意处理:你总是应该让javaScript编译器知道你明确的要干嘛,而不是由他去猜呀猜的。



本文转自shyleoking 51CTO博客,原文链接:http://blog.51cto.com/shyleoking/803091

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/393157.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PAT乙级 1003. 我要通过!

题目&#xff1a; “答案正确”是自动判题系统给出的最令人欢喜的回复。本题属于PAT的“答案正确”大派送 —— 只要读入的字符串满足下列条件&#xff0c;系统就输出“答案正确”&#xff0c;否则输出“答案错误”。 得到“答案正确”的条件是&#xff1a; 1. 字符串中必须仅有…

电台复活节_如何通过在控制台中隐藏复活节彩蛋使您的应用程序用户惊讶

电台复活节by Ethan Ryan由伊桑瑞安(Ethan Ryan) 如何通过在控制台中隐藏复活节彩蛋使您的应用程序用户惊讶 (How to surprise your app’s users by hiding Easter eggs in the console) I love console.logging(“stuff”).我喜欢console.logging(“ stuff”)。 I do it th…

leetcode1267. 统计参与通信的服务器(dfs)

这里有一幅服务器分布图&#xff0c;服务器的位置标识在 m * n 的整数矩阵网格 grid 中&#xff0c;1 表示单元格上有服务器&#xff0c;0 表示没有。 如果两台服务器位于同一行或者同一列&#xff0c;我们就认为它们之间可以进行通信。 请你统计并返回能够与至少一台其他服务…

System类入门学习

第三阶段 JAVA常见对象的学习 System类 System类包含一些有用的字段和方法&#xff0c;他不能被实例化 //用于垃圾回收 public static void gc()//终止正在运行的java虚拟机。参数用作状态码&#xff0c;根据惯例&#xff0c;非0表示异常终止 public static void exit(int stat…

gulpfile php,Laravel利用gulp如何构建前端资源详解

什么是gulp&#xff1f;gulp是新一代的前端项目构建工具&#xff0c;你可以使用gulp及其插件对你的项目代码(less,sass)进行编译&#xff0c;还可以压缩你的js和css代码&#xff0c;甚至压缩你的图片&#xff0c;gulp仅有少量的API&#xff0c;所以非常容易学习。 gulp 使用 st…

ios jenkins_如何使用Jenkins和Fastlane制作iOS点播构建系统

ios jenkinsby Agam Mahajan通过Agam Mahajan 如何使用Jenkins和Fastlane制作iOS点播构建系统 (How to make an iOS on-demand build system with Jenkins and Fastlane) This article is about creating iOS builds through Jenkins BOT, remotely, without the need of a de…

菜鸟也学hadoop(1)_搭建单节点的hadoop

其实跟官方的教程一样 只是 我想写下来 避免自己搞忘记了&#xff0c;&#xff0c;&#xff0c;&#xff0c;好记性不如烂笔头 首先确认自己是否安装了 java&#xff0c; ssh 以及 rsync 没有装的直接就 apt-get install 了嘛&#xff0c;&#xff0c;&#xff0c;java的不一定…

SP703 SERVICE - Mobile Service[DP]

题意翻译 Description   一个公司有三个移动服务员。如果某个地方有一个请求&#xff0c;某个员工必须赶到那个地方去&#xff08;那个地方没有其他员工&#xff09;&#xff0c;某一时刻只有一个员工能移动。只有被请求后&#xff0c;他才能移动&#xff0c;不允许在同样的位…

CF758 D. Ability To Convert 细节处理字符串

link 题意&#xff1a;给定进制数n及一串数字,问在此进制下这串数能看成最小的数&#xff08;10进制&#xff09;是多少&#xff08;如HEX下 1|13|11 475&#xff09; 思路&#xff1a;此题要仔细思考细节。首先要想使数最小那么必定有个想法是使低位的数尽可能大即位数尽可能…

java 可能尚未初始化变量,java - 局部变量“变量”可能尚未初始化-Java - 堆栈内存溢出...

我得到这个错误。线程“主”中的异常java.lang.Error&#xff1a;未解决的编译问题&#xff1a;rgb2无法解析为变量它总是导致错误的rgb2数组。 如何解决这个问题呢&#xff1f;BufferedImage img1 ImageIO.read(file1);BufferedImage img2 ImageIO.read(file2);int w img1.…

leetcode1249. 移除无效的括号(栈)

给你一个由 ‘(’、’)’ 和小写字母组成的字符串 s。 你需要从字符串中删除最少数目的 ‘(’ 或者 ‘)’ &#xff08;可以删除任意位置的括号)&#xff0c;使得剩下的「括号字符串」有效。 请返回任意一个合法字符串。 有效「括号字符串」应当符合以下 任意一条 要求&…

软件工程——个人课程总结

软件工程&#xff0c;我就是冲着软件这两个字来的&#xff0c;开始我觉得我们大多数人也是这样的&#xff0c;能开发一款属于自己的软件应该是我们人生中的第一个小目标八&#xff0c;在上学期学完java语言后&#xff0c;我们自认为自己已经具备了开发一款小软件的能力&#xf…

规则网络_实用的网络可访问性规则

规则网络by Tiago Romero Garcia蒂亚戈罗梅罗加西亚(Tiago Romero Garcia) 实用的网络可访问性规则 (Pragmatic rules of web accessibility that will stick to your mind) I first started to work with web accessibility back in 2015, at an American retail giant. It h…

8-python自动化-day08-进程、线程、协程篇

本节内容 主机管理之paramiko模块学习 进程、与线程区别python GIL全局解释器锁线程语法join线程锁之Lock\Rlock\信号量将线程变为守护进程Event事件 queue队列生产者消费者模型Queue队列开发一个线程池进程语法进程间通讯进程池 转载&#xff1a;  http://www.cnblogs.co…

部署HDFS HA的环境

> 环境架构部署规划&#xff1a; bigdata1 NameNode ResourceManager Zookeeper JournalNode failOverController bigdata2 NameNode ResourceManager Zookeeper JournalNode failOverController bigdata3 DataNode NodeManager Zookeeper bigdata4 DataNode NodeManager &g…

php layui 框架,Thinkphp5+Layui高颜值内容管理框架

Thinkphp5Layui高颜值内容管理框架TP5Layui高颜值内容管理框架&#xff0c;新增API模块Thinkphp5Layui响应式后台权限管理系统专注打造好用的框架&#xff0c;极速开发&#xff0c;高效灵活&#xff0c;从架构上兼顾系统复杂度的迭代与需求多变。代码结构清晰&#xff0c;接口开…

leetcode657. 机器人能否返回原点

在二维平面上&#xff0c;有一个机器人从原点 (0, 0) 开始。给出它的移动顺序&#xff0c;判断这个机器人在完成移动后是否在 (0, 0) 处结束。 移动顺序由字符串表示。字符 move[i] 表示其第 i 次移动。机器人的有效动作有 R&#xff08;右&#xff09;&#xff0c;L&#xff…

在Angular专家Dan Wahlin的免费33部分课程中学习Angular

According to the Stack Overflow developer survey 2018, Angular is one of the most popular frameworks/libraries among professional developers. So learning it increases your chances of getting a job as a web developer significantly.根据2018年Stack Overflow开…

select查询语句执行顺序

查询中用到的关键词主要包含六个&#xff0c;并且他们的顺序依次为 select--from--where--group by--having--order by 其中select和from是必须的&#xff0c;其他关键词是可选的&#xff0c;这六个关键词的执行顺序 与sql语句的书写顺序并不是一样的&#xff0c;而是按照下面的…

Python的Virtualenv(虚拟环境)的使用(Windows篇)2

Python的Virtualenv(虚拟环境)的使用&#xff08;Windows篇&#xff09; 2018年04月13日 11:35:01 D_FallMoon 阅读数 771 版权声明&#xff1a;版权所有 装载请注明 …