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

杏子与鸡腿

于 2013-06-13 10:05:39 发布

阅读量753

点赞数

我们接下来写一个系列，关于JavaScript的学习。希望能跟大家一起来学习JavaScript，至于为什么要学JavaScript这部分的内容我们主要讲以下几点：

(1)区分大小写：

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

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

(2)单引号、双引号：

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

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

[javascript] view plain copy print ?

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

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

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

(3)括号：

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

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

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

[javascript] view plain copy print ?

(function(){})();

(function(){})();

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

第一个：

[html] view plain copy print ?

<title>括号的意义</title>
</head>
<scripttype="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 aa(){
	alert(a);
}
</script>
<body οnlοad="aa();">
</body>

第二个：

[html] view plain copy print ?

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

<title>括号的意义</title>
</head>
<script type="text/javascript">

var a='123';
(function (){
	alert(a);
})();
</script>
<body >
</body>

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

[html] view plain copy print ?

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

<title>括号的意义</title>
</head>
<script type="text/javascript">

var a='123';
function aa(){
	alert(a);
};
window.οnlοad=aa;
</script>

<body >
</body>

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

(4)函数调用和引用：

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

[html] view plain copy print ?

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

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

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

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

(5)分号、大括号可选：

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

alert();

与

alert()

是没有区别的。

但是对于一下代码，如：

[javascript] view plain copy print ?

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

if(a==b)

alert(b)

alert(a)

不会翻译为

[javascript] view plain copy print ?

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

if(a==b);

alert(b);

alert(a);

而是翻译成：

[javascript] view plain copy print ?

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

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

(6)重载:

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

function myFunction(a,b){}

function myFunction(a){}

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

[html] view plain copy print ?

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

<title>重载</title>
</head>
<script type="text/javascript">

var a='123';
function aa(){
	alert(a);
}
function aa(){
	alert("这是第二个");
}
window.οnlοad=aa;
</script>

<body >
</body>

我们看到的结果是：

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

[html] view plain copy print ?

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

<title>重载</title>
</head>
<script type="text/javascript">

var a='123';
function aa(){
	alert(a);
}
function aa(x,y,z){
	alert("这是第二个");
}
window.οnlοad=aa;
</script>

<body >
</body>

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

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

[html] view plain copy print ?

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

<title>重载</title>
</head>
<script type="text/javascript">

var a='123';
function aa(){
	alert(a);
}
function aa(x,y,z){
	alert("这是第二个");
}
function alert(){}
window.οnlοad=aa;
</script>

<body >
</body>

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

(7)作用域、闭包：

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

function myFunction(){

var temp="abc";

}

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

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

[html] view plain copy print ?

<title>闭包</title>
<scripttype="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 >
<aid="anchor1"href="#">abc</a><br/>
<a id="anchor2"href="#">abc</a><br/>
<aid="anchor3"href="#">abc</a><br/>
</body>
</html>

<title>闭包</title>

<script type="text/javascript">
function newaa(){
	for(var i=1;i<=3;i++){
		var anchor=document.getElementById("anchor"+i);
		anchor.οnclick=function(){
			alert("My anchor is anchor"+i);
		}
		
	}
}
window.οnlοad=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了。所以就造成了这种情况。我们看一下应该如何来解决这个问题呢：

[html] view plain copy print ?

<title>闭包</title>
<scripttype="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/>
<aid="anchor2"href="#">abc</a><br/>
<a id="anchor3"href="#">abc</a><br/>
</body>
</html>

<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.οnclick=function(){
			alert("My anchor is anchor"+i);
	}
}

window.οnlοad=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>

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

杏子与鸡腿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轻松拿下JavaScript（一）——JavaScript常见问题

我们接下来写一个系列，关于JavaScript的学习。希望能跟大家一起来学习JavaScript，至于为什么要学JavaScript这部分的内容我们主要讲以下几点：(1)区分大小写：JS中方法和变量都是区分大小写的，因此function myFunction{}和function Myfunction()是不同的。这一规则也适用于JavaScript核心对象.例如:Arra
复制链接

扫一扫