您当前的位置:首页 > 网站建设笔记 >

JavaScript语法中常见的陷阱

来源:JavaScript DOM 高级程序设计0

JavaScript语法中常见的陷阱

即使你是一位具有十多年脚本编写经验的Web开发老手,也可能会遇到被某个问题难住几小时都想不通的时候。而大多数这种时候,问题都出在被你忽略的一个简单的错误上。因此,我认为最好提前指出一些你在学习本书例子时可能会遇到的常见陷阱。

区分大小写

你创建的所有函数和变量都是区分大小写的,因此
function myFunction() {}
不同于
function MyFunction() {}

换行

不论你使用哪种引号来创建字符串,字符串中间都不能包含强制换行符:

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>';

要注意的是,这样做虽然能够在字符串中保留空白和缩进,但如果你打算使用第三方压缩工具来压缩代码,那它可能会带来负面效果。

另一个可选的方案,是使用字符串连接操作符(+)并将每一行用引号括起来:

var html = '<h2 class="a">A list!</h2>'
    + '<ol>'
    + '<li class="a">Foo</li>'
    + '<li class="a">Bar</li>'
    + '</ol>';

通过使用引号和连接操作符,结果字符串的标签之间不会存在空白。

重载(并非真正的重载)

JavaScript不支持重载,因此这里所说的重载实际上更像是替换。所谓重载,指的是一门编程语言根据传递给函数或方法的参数的数据类型及参数的个数,区别不同的函数或方法的能力。例如,利用重载可以像下面这样声明两个同名函数:

function myFunction(a,b) {alert(a+b);}
function myFunction(a) {alert(a);}

根据它们参数的个数不同(也包括每个参数的数据类型,而这在JavaScript中是无效的)这一事实,可以将它们视为两个单独的函数。因此,在支持真正重载的语言中,调用下面的函数:

myFunction(1);

将提示1,而调用下面这个

myFunction(1,2);

则会提示3。然而,如果在JavaScript中尝试以上过程,那么第二个声明的myFunction()将会替换第一个,因而接下来的两次调用都将执行同一个函数,并且都提示1。

在JavaScript中,脚本在执行时不会顾及函数定义时的参数,而是直接使用在作用域链中最后定义的那个函数。这意味着,相同名称的函数永远只存在一个实例,所以当创建自己的函数或方法时,要确保不会覆盖现有的JavaScript核心元素——除非你是有意那么做。也就是说,可以通过定义自己的同名对象来轻易地覆盖任何JavaScript对象。如果编写下面这个函数:

function alert(message) {
    ADS.$("messageBox").appendChild(document.createTextNode(message));
}

那么浏览器将不会再像往常一样提示信息,而是会按照新定义的alert函数执行规定动作——此处会将信息添加到指定的<div>。在某些情况下,这可能是你期望的,不过一定要记住,如果你在同一页面中组合使用了多个库和不同来源的代码,而这些脚本恰好需要使用被你覆盖的核心函数完成相应的功能,那么就可能会得到意外的结果。

建站咨询

在线咨询真诚为您提供专业解答服务

咨询热线

137 1731 25507×24小时服务热线

微信交流

二维码终于等到你,还好我没放弃
返回顶部