轻松拿下JavaScript（一）——JavaScript常见问题

来源：互联网发布：mac默认图片查看器编辑：程序博客网时间：2024/05/23 13:29

我们接下来写一个系列，关于JavaScript的学习。希望能跟大家一起来学习JavaScript，至于为什么要学JavaScript呢?我们不用JavaScript也可以编程，对，但是学了会有什么作用，我给大家百度一下：

Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。简而言之JavaScript就是一种提高用户体验的语言。

好了废话不多说，我们接下来先了解一下JavaScript的常见的问题，以便在稍后的编写代码中我们能轻而易举的实现我们的代码。这部分的内容我们主要讲以下几点：

区分大小写：

其实这部分的内容主要是为了区分咱们用别的语言来编写；咱们之前使用过的语言：vb就不区分大小写，而咱们讲的这个JavaScript就区分大小写。

JS中方法和变量都是区分大小写的，因此function myFunction{}和function Myfunction()是不同的。

这一规则也适用于JavaScript核心对象例如:Array和Object.我们在定义一个数组的时候Array，就必须是大写开头，当你写成小写之后，你会发现array的字体颜色会发生变化。

单引号、双引号：

单引号、双引号在JS中没有特殊的区别，都可以用来创建字符串。但作为一般性规则，大多数Js开发人员喜欢使用单引号而不是双引号，但是因为XHTML规范要求所有属性值都必须使用双引号括起来。这样在JS中使用单引号，而对XHTML属性使用双引号会使混合两者代码更方便也更清晰。

单引号中可以包含双引号，反之双引号也可以包含单引号。

我们看一个例子：

在这个代码段里边，因为a是一个属性值，所以用双引号，然后我们的单引号可以包含双引号，所以整个单引号括起了的地方就是一个字符串，然后+是一个连接符，所以这一个整个部分也就连接了起来。那么我们看到第二部分的代码，由于a的旁边多了一个转移字符，要是没有这个转义字符，那么当这个代码运行到class=\的时候就结束了。我们很清楚的看到，下面这个代码明显没有上面这个代码清晰，舒服。

但是对于下面情况还是需要转义字符的：

var temp='<p class="a"> What\'s this?';

如果一个单引号里边还有单引号的话，还是需要转义字符的。

括号：

首先需要说明的是：JS中括号包含2种语义，可以是分隔符也可以是表达式。

分隔符大家非常熟悉，我们举个例子来说明：（1+3）*3等于12。

表达式是这么个类型，我们看一下：

(function(){})();

这里边，function之前的一对括号作为分隔符，后面的括号表示立刻执行这个方法。举个例子吧：

第一个：

<title>括号的意义</title></head><script type="text/javascript">var a='123';function aa(){alert(a);}</script><body onload="aa();"></body>

第二个：

<title>括号的意义</title></head><script type="text/javascript">var a='123';(function (){alert(a);})();</script><body ></body>

提前说明一下，这两个结果一样的；然后我们观察发现这两段代码的区别。第一个代码直接在onload里边就加载了；然而第二段代码是使用了括号表示立即执行的效果，而且我们干脆用匿名的效果，立即就执行了这个function。所以达到了一样的效果。还有另一种写法：

<title>括号的意义</title></head><script type="text/javascript">var a='123';function aa(){alert(a);};window.onload=aa;</script><body ></body>

这种写法跟第一种写法其实一样，我在这里想说的是：onload什么时候开始加载呢？就是在整个页面加载全部结束之后才会调用，整个页面加载包括图片加载；有时候当图片非常多的时候，我们调用这个onload就会很慢。当然我们还有别的办法，就是先加载文字部分，然后并行调用onload，同时我们再加载其他图片。我们是可以这么做的。我们简单的提一下。

函数调用和引用：

我们刚才写的两个形式，一种是带小括号的，在body里边的。然后我们直接在window里边写的就没有小括号；这就涉及到了我们函数调用和引用的问题。我们看一下：

var foo=example();    var foo1=example;

我们看得出来，前面的一个带小括号的，小括号在这里的意思就是立即执行的意思。这个的意思就是我们调用example并且把函数的返回值付给foo。第二个就是我们把这个example的函数指针指给这个foo1。所以带括号的表示一个函数的返回值；不带括号的表示一个函数的引用

换行：我们可以使用反斜杠转义字符来连接或者使用+来连接。

分号、大括号可选：

JS中每行语句的最后并不是必须用分号结尾。因此我们看：

alert();

与

alert()

是没有区别的。

但是对于一下代码，如：

if(a==b)alert(b)alert(a)

不会翻译为

if(a==b);alert(b);alert(a);

而是翻译成：

if(a==b){alert(b)}alert(a);

重载:

JS中不支持重载因此这里所说的重载其实更类似于替换。如：

function myFunction(a,b){}

function myFunction(a){}

由于没有重载所以上面的声明将导致下面的myFunction函数覆盖上面的函数。如：

<title>重载</title></head><script type="text/javascript">var a='123';function aa(){alert(a);}function aa(){alert("这是第二个");}window.onload=aa;</script><body ></body>

我们看到的结果是：

其实就是替换了第一个了。还有一点需要注意的是，JavaScript里边调用只与function的名字有关，与function的参数无关。如：

<title>重载</title></head><script type="text/javascript">var a='123';function aa(){alert(a);}function aa(x,y,z){alert("这是第二个");}window.onload=aa;</script><body ></body>

显示的结果还是和刚才一样。

当我们写JavaScript的方法的时候，一定要注意，名字不要使用保留字，除非你说我一定要覆盖他的保留方法，否则将导致你的代码覆盖JS核心函数：如：

<title>重载</title></head><script type="text/javascript">var a='123';function aa(){alert(a);}function aa(x,y,z){alert("这是第二个");}function alert(){}window.onload=aa;</script><body ></body>

则将什么也没显示，但是也不报错。

作用域、闭包：

作用域指对某一属性或方法具有访问权限的代码空间。

function myFunction(){

var temp="abc";

}

上面的temp在函数外面无法访问。

闭包是与作用域相关的一个概念，它指的是内部函数即使在外部函数执行完成并终止后仍然可以访问其外部函数的属性。如：

<title>闭包</title><script type="text/javascript">function newaa(){for(var i=1;i<=3;i++){var anchor=document.getElementById("anchor"+i);anchor.onclick=function(){alert("My anchor is anchor"+i);}}}window.onload=newaa;</script></head>http://write.blog.csdn.net/postedit/8200870<body ><a id="anchor1" href="#">abc</a><br /><a id="anchor2" href="#">abc</a><br /><a id="anchor3" href="#">abc</a><br /></body></html>

我们看一下效果：

无论我们点击那个abc都会出现这种情况，这是为什么？我们看一下，当我们点击事件发生后，我们的onload事件已经加载完了，所以i就变成了4了。所以就造成了这种情况。我们看一下应该如何来解决这个问题呢：

<title>闭包</title><script type="text/javascript">function newaa(){for(var i=1;i<=3;i++){var anchor=document.getElementById("anchor"+i);registerListener(anchor,i);}}function registerListener(anchor,i){anchor.onclick=function(){alert("My anchor is anchor"+i);}}window.onload=newaa;</script></head><body ><a id="anchor1" href="#">abc</a><br /><a id="anchor2" href="#">abc</a><br /><a id="anchor3" href="#">abc</a><br /></body></html>

这样我们就能达到我们想要的结果了。这就是闭包的一个作用。