日期:2014-05-16  浏览次数:20384 次

JavaScript语法中常见的陷阱
即使你是一位经验丰富的Web开发人员,也可能被某个小问题而陷入几个小时的沉思
下面看一下九种常见的陷阱
1. 区分大小写
创建的所有函数和变量都是区分大小写的
也就是说function myFunction() {}和function MyFunction() {}是不一样的
2. 单引号与双引号
单引号(‘字符串’)和双引号(“字符串”)在JavaScript中没有特殊的区别,都可以用来创建字符串。但作为一般性的原则,大多数Web开发人员使用单引号
3. 换行
不论你使用哪种引号来创建字符串,字符串中间都不能包含强制换行符号:
var html = ‘<h2 class=”a”>A list!</h2>
	<ol>
		<li class = “a”>Foo</li>
		<li class = “a”>Bar</li>
	</ol>’;

如果这样做的话,会导致解析错误,因为换行符被解释为分号,如果你想告诉浏览器这是一个完整的html的话,就得通过反斜杠来转义换行符
var html = ‘<h2 class=”a”>A list!</h2>\
	<ol>\
		<li class = “a”>Foo</li>\
		<li class = “a”>Bar</li>\
	</ol>’;

如果使用第三方压缩工具来压塑代码的话,上面这种方法也是会出现问题的,我们还有另外一种方案就是使用字符串操作符(+)并将每一行用引号括起来:
var html = ‘<h2 class=”a”>A list!</h2>\
	+ ‘<ol>’
		+’<li class = “a”>Foo</li>’
		+’<li class = “a”>Bar</li>’
	+’</ol>
’;
4. 可选的分号和花括号
用分号来结束一行代码并不是必须的
alert(‘hello’)
alert(‘world’)

等同于
alert(‘hello’);
alert(‘world’);

但是如果是有逻辑关系的话,就不能这样等同了
if(a==b)
alert(‘true!’)
alert(‘false?’)

不同于
if(a==b) {
	alert(‘true!’);
}
alert(‘false?’);

5. 重载(并非真正的重载)
JavaScript是不支持重载,我们这里将的更像是替换。
对于重载而言,假设有下面两个同名函数:
function myFunction(a,b) { alert(a+b);}
function myFunction(a) {alert(a);}

在程序中根据参数的不同,会调用不同的函数来处理,但这在JavaScript是能实现的,对于JavaScript,它是不会考虑函数定义时的参数的,它会直接使用作用域链中最后定义的那个函数,也就是说相同的函数永远只存在一个实例i,所以当你创建自己的函数时,确保没有覆盖掉JavaScript核心元素,除非你希望那么做,假设,我们创建了如下函数:
function alert(message) {
	//LEO.$方法是我自己一个JS库中的方法
	LEO.$(‘messageBox’).appendChild(document.createTextNode(message));
}

那么当调用alert时,浏览器并不会像往常那样提示一个信息,而是按照我新定义的alert函数来执行相应动作
6. 函数的调用和引用(不带括号)
var fun1 = exampleFunction();
var fun2 = exampleFunction;

发现上述的不同之处了吗?,区别在于fun2的exampleFunction没有圆括号,它对结果的影响极大,没有圆括号的话,fun2得到的是函数本身,而不是结果,我们就把fun2作为参数传递给其他方法
《AdvancED DOM Scripting Dynamic Web Design Techniques》