Javascript基础 错误调试

一旦你发现一个错误，就可以清除它。不幸的是，发现它们的 
出处并不总是很容易 - 你的大部分调试时间只是花在指出错 
误的位置。 

最可靠的方法之一是在你的代码中加入一些简单的语句打印出 
正在发生什么。假如你在下面的两段程序中发现一个问题： 

function getName() 
{ 
    var first_name = prompt("what's your first name?",""); 
    var last_name = prompt("what's your last name?",""); 
    var the_name = first_name + " " + last_name; 

} 

function theGreeting() 
{ 
    var the_name = ""; 
    the_name = getName(); 

    if (the_name == "Dave Thau") 
    { 
alert("Hello, oh greatest one!"); 
    } else { 
alert("Ahoy palloi!"); 
    } 
} 
运行这段程序，看看你是否能发现出了什么问题（Netscape 3.x 
的用户可能会遇到一些错误检查的问题，这是由于Netscape 3.x 
本身的原因，以下的Javascript例子与此相同）。如果你在警告 
对话框中随意输入一些名字，你会得到问候：“Ahoy palloi!”。 
但是，如果你在第一个提示对话框中输入“Dave”，在第二个中 
输入“Thau”，你应该得到“Hello,oh greatest one!”这条 
信息。然而，你还是只得到“Ahoy palloi!”这条信息。很明显， 
函数中出了错误。在这个简单的例子程序中，你或许只是查看 
JavaScript代码就能发现错误。然而，当你的代码变得越来越复 
杂时，只靠目测来发现错误会变得愈加困难。 

如果JavaScript没能捕获你的错误，你也没有通过查看代码发现 
错误，有时打印出变量会对你有所帮助。最简单的方法是象下面 
这样使用一个alert()： 

// theGreeting gets a name using getName, then presents  
// one or two alert boxes depending on what the name is 
//function getName() 
{ 
    var first_name = prompt("what's your first name?",""); 
    var last_name = prompt("what's your last name?",""); 
    var the_name = first_name + " " + last_name;  
    alert("in getName, the_name is: " + the_name); 

} 

// theGreeting gets a name using getName, then presents  
// one of two alert boxes depending on what the name is 
// function theGreeting() 
{ 
   var the_name = ""; 
   the_name = getName(); 
   alert("after getName, the_name = " + the_name); 
   if (the_name == "Dave Thau") 
   { 
       alert("hello, oh greatest one!"); 
   }else{  
       alert("ahoy palloi!");  
   } 
} 

请注意我们已经在所有重要的地方加入警告语句。现在试着运行 
这段程序。如果你输入名称“Dave”和“Thau”，你会注意到第 
一个警告显示“in getName, the_name is: Dave Thau,”，但 
是第二个警告显示“after getName, the_name = undefined,”， 
这就告诉你在getName()的最后一行事情变得糟糕起来。不知何 
故，the_name只在函数存在前正确，但是theGreeting没有给变 
量the_name正确赋值。当你写的函数能正确运行，但返回值出现 
问题时，你最先要做的就是检查你是否的确让其返回了一个值。 
很明显，问题就出在这儿。getName()函数指出了名称，但没有 
返回它。所以我们应把语句“return the_name;”加到函数末尾。 

把一些警告对话框加入你的代码中是很有帮助的。不幸的是，每 
隔一行就按一次“OK”也是一种痛苦。 

不用警告对话框也能调试代码。一种选择是把调试信息写到窗体 
的一个文本区内。另一种可能是把调试信息写在另一个窗口上。 
这儿有一个把调试信息写在下面文本区的调试代码的例子。 

使你的调试经历更舒适的第三个诀窍是这样的：创建不同的调试 
等级，然后设置“调试”变量。下面就是在此页上运行的 
JavaScript代码： 

// debug can be either none, alert, or textarea  
//  depending on the kind of debugging I want to do 
// var debug = "none"; 
// function getName gets a first and last name,  
// concatenates them with a space in between,  
// and returns the name function getName() 
{  
    var first_name = prompt("what's your first name?",""); 
    var last_name = prompt("what's your last name?",""); 
    var the_name = first_name + " " + last_name;  
    var error_message = "in getName, the_name is: " + the_name;  
    doError("in getName, the_name is: " + the_name); 
} 

// theGreeting gets a name using getName, then presents  
// one of two alert boxes depending on what the name is 
// function theGreeting() 
{ 
   var the_name = ""; 
   the_name = getName();  
   doError("after getName, the_name = " + the_name); 
   if (the_name == "Dave Thau") 
   { 
        alert("hello, oh greatest one!"); 
   } else {  
        alert("ahoy palloi!"); 
   } 
} 

// doError is the error handling routine 
// depending on the type of debug message 
// it presents either no debug message, an alert 
// or puts the message in a textarea 
// 
function doError(the_message) 
{ 
    if (debug == "alert")  
    { 
        alert(the_message); 
    } else if (debug == "textarea") 
    {  
        window.document.the_form.the_text.value +=    the_message + "<br>\n";  
    } 
} 

    请注意我已经定义了一个叫“debug”的变量，它可以是 
“none”，“alert”或“textarea”。于是当我想产生一个错 
误信息时，我把它送给函数doError()，此函数可能什么也不做， 
或者显示一个消息对话框，或者把消息粘贴到一个文本区中，这 
取决于我怎样设置调试变量。当你想同时看到多条错误信息时， 
你可以设置调试变量为“textarea”。当你准备把你的代码显示 
给全世界时，你只需要把调试变量设为“none”，于是错误信息 
将不再出现，这样可以省去发现和清除所有调试语句的麻烦。 

通常，程序员可以创建不同的调试等级，如“none”，“brief” 
和“extreme”。“brief”将打印一些调试信息，“extreme” 
将打印大量调试信息，“none”当然不会打印任何信息。 

如果你按此方法建立你的调试系统，你可以在编码时把调试等级 
设为“brief”，在准备公布你的JavaScript时把调试变量设为 
“none”。如果有不可思议的事情发生，并且你不知道去哪儿发 
现问题，你可以把调试等级设为“extreme”，然后流览所有的 
调试信息直到发现可疑的地方。 

好了，调试系统就讨论到这儿。现在让我们看看JavaScript编码 
器产生的一般性错误。>> 

多数错误只是无聊的语法错误。记住关闭那些引号，大括号和 
小括号会花费很长时间，不过幸运的是JavaScript自动错误检 
测器能捕获大部分此类错误。虽然JavaScript错误检测器随着 
日渐复杂的流览器而不断完善，但是一些错误仍会溜走。下面 
是一些需要留意的常见错误： 

混淆变量名或函数名 

大写和复数变量和函数名产生的错误令人烦恼地经 
常出现，有时JavaScript错误检测器不能捕获它们。 
通过建立和坚持使用一种对变量和函数的命名协定， 
会大大减少这些麻烦的数量。例如，我全部用小写 
字母定义变量，并用下划线代替空格 （my_variable, 
the_data, an_example_variable），用内置符号表 
示函数 (addThreeNumbers(), writeError()等)。 
我避免使用任何复数，因为我总是忘记那些变量是 
不是复数。 

偶然地使用了保留字 

一些字不能作为变量名，因为它们已经被JavaScript 
使用。例如，不能定义一个叫“if”的变量，因为 
它实际上是JavaScript的一部分 - 如果使用“if”， 
你会遇到各种麻烦。当你因为使用命名为“if”的 
变量而变得疯狂时，一个叫做“document”的变量 
是很诱人的。不幸的是，“document”是一个 
JavaScript对象。另一个经常遇到的问题是把变量 
命名为“name”（窗体元素有“names”属性）。把 
变量命名为“name”不会总出问题，只是有时 -  
这会更使人迷惑 - 这就是避免使用“name”变量的 
原因。 

不幸的是，不同的流览器有不同的保留字，所以没 
有办法知道该回避哪些字。最安全的办法是避免使 
用已经成为JavaScript一部分的字和HTML使用的字。 
如果你因为变量遇到问题，并且不能发现哪儿错了， 
试着把变量改个名字。如果成功了，你或许就避开 
了保留字。 

记住在逻辑判断时应该用两个等号 

一些流览器能捕获这种错误，有些却不能。这是一 
种非常常见的错误，但是如果流览器不能替你指 
出来，你就很难发现。下面是一个这种错误的例子： 

var the_name = prompt("what's your name?", ""); 
if (the_name = "the monkey") 
{ 
 alert("hello monkey!"); 
} else { 
 alert("hello stranger."); 
} 
这段代码将产生“hello monkey!”警告对话框 -  
不管你在提示里敲的是什么 - 这不是我们希望的。 
原因是在if-then语句中只有一个等号，这句话告 
诉JavaScript你想让一件事等于另一件。假设你在 
提示中敲的是“robbie the robot”。最开始，变 
量the_name的值是“robbie the robot”，但是随 
后if语句告诉JavaScript你想把the_name设为 
“the monkey.”。于是JavaScript很高兴地执行你 
的命令，送一个“true”消息给if-then语句，结果 
警告对话框每次都出现“hello monkey!”。 

这种阴险的错误会使你发疯，所以注意使用两个 
等号。 

偶然给变量加上了引号，或忘了给字符串加引号 

我不时遇到这个问题。JavaScript区分变量和字符 
串的唯一方法是：字符串有引号，变量没有。下面 
有一个明显的错误： 

var the_name = 'koko the gorilla'; 
alert("the_name is very happy"); 
虽然the_name是一个变量，但是程序还会产生一个 
提示“the_name is very happy,”的警告对话框。 
这是因为一旦JavaScript看见引号包围着某些东西 
就不再考虑它，所以当你把the_name放在引号里， 
你就阻止了JavaScript从内存中查找它。 

下面是一个不太明显的此类错误的扩展（我们已经 
在第三天的课程里见过）： 

function wakeMeIn3() 
{ 
 var the_message = "Wake up! Hey! Hey! WAKE UP!!!!"; 
 setTimeout("alert(the_message);", 3000); 
} 
这里的问题是你告诉JavaScript三秒后执行alert 
(the_message)。但是，三秒后the_message将不再 
存在，因为你已经退出了函数。这个问题可以这样 
解决： 

function wakeMeIn3() 
{ 
 var the_message = "Wake up!"; 
 setTimeout("alert('" + the_message+ "');", 3000); 
} 
把the_message放在引号外面，命令“alert('Wake 
up!');”由setTimeout预定好，就可以得到你想 
要的。 

这只是一些可能在你的代码中作祟的很难调试的 
错误。一旦发现了它们，就有不同的或好或差的方 
法来改正错误。你很幸运，因为你能从我的经验和 
错误中获益

第页：修正错误  
找到错误，有时侯虽然很难，却只是第一步。然后你必须清除 
错误。下面是一些在清除错误时应该做的一些事： 

首先拷贝你的程序 

有些错误很难清除。实际上，有时在根除错误时， 
你会破坏整个程序 - 一个小错误使你疯狂。在开始 
调试前保存你的程序是确保错误不会利用你的最好 
方法。 

一次修正一个错误 

如果你知道有好几个错误，应该修正一个，检验其 
结果，再开始下一个。一次修正许多错误而不检验 
你的工作只会招致更多的错误。 

警惕迷惑性错误 

有时你知道存在一个错误，但不真正知道为什么。 
假设有一个变量“index”，由于某种原因“index” 
总比你期望的小1。你可以做下面两件事中的一件： 
在那儿坐一会儿，解决它为什么变小了，或只是耸 
耸肩；在使用“index”之前加1,然后继续进行。后 
一种方法称为迷惑编程。当你开始思考“究竟是怎 
么了 - 为什么index是2而不是3呢？好吧...我现在 
先让它正常工作，以后再修改错误。”时，你正在 
把一块护创膏布贴到一处潜在的硬伤上。 

迷惑编程可能在短期内有用，但是你可以看到长期 
的厄运 - 如果你没有完全理解你的代码到可以真正 
清除错误的程度，那个错误将会回来困扰你。它或 
者以另一种你不能解决的怪异错误的方式回来，或 
者当下一个可怜的被诅咒的灵魂读你的代码时，他 
会发现你的代码非常难以理解。 

寻找小错误 

有时侯，对程序员来说，剪切和粘贴代码的能力是 
一种很坏的事。通常，你会在一个函数中写一些 
JavaScript代码，然后把它们剪切和粘贴到另一个 
函数中。如果第一个函数有问题，那么现在两个函 
数都有问题。我并不是说你不应该剪切和粘贴代码。 
但是错误会以某种方式繁殖，如果你发现了一个 
错误，你就应该寻找与其相似的其它错误。（或者 
在制作它的若干版本之前确切知道会发生什么。） 
变量名拼写错误在一段JavaScript代码中会突然多 
次出现 - 在一个地方把the_name错拼成teh_name， 
你就有机会在其它地方发现这个错误。 

如果所有其它的方法都失败了 

如果你正坐在那儿盯着一个错误，并且不能指出是 
怎么回事（或者根本没有发现错误，但是因为程序 
不能正确运行，你知道存在错误），你最好从计算 
机前走开。去读一本书，在角落散散步，或者拿一 
杯可口的饮料 - 做些事，任何事，但不要去想程序 
或问题。这种技术在某种情况下叫做“酝酿”，效 
果非常好。在你稍做休息和放松后，再试着找出 
错误。你会得到一幅比较清晰的景象。“酝酿”起 
作用是因为它使你从思维混乱中解脱出来。如果沿 
着一条错路走太远，你有时会发现无法转身。这种 
情况下最好开辟一条新路。我知道这会令人发火， 
但确实有效。真的！ 

如果上面的方法还不成功... 

请求别人的帮助。有时你的思想会形成定式，只有 
换一种眼光才能洞察问题之所在。在结构化编程环 
境中，程序员们定期地互相复查别人的代码。这可 
以适当地叫做“代码复查”，不仅可以帮助消除 
错误，还可以得到更好的代码。不要怕把你的 
JavaScript代码给别人看,它会使你成为更好的 
JavaScript程序员。 

但是消除错误的绝对最好的办法是... 

一开始就创建没有错误的代码。>>

编好程序的关键是程序是写给人的，不是写给计算机的。如 
果你能明白其他人或许会阅读你的JavaScript，你就会写更 
清晰的代码。代码越清晰，你就越不容易犯错误。机灵的代 
码是可爱的，但就是这种机灵的代码会产生错误。最好的经 
验法则是KISS，即Keep It Simple,Sweetie（保持简单，可爱）。 

另一个有帮助的技术是在写代码之前作注释。这迫使你在动 
手之前先想好。一旦写好了注释，你就可以在其下面写代码。 
下面是一个用这种方法写函数的例子： 

第一步：写注释 

//function beSassy() 
// beSassy asks for a user's name, chooses a random  
// insult and returns an alert box with the user's name and the 
// insult. 
function beSassy() 
{ 
// first write a list of insults 
// 

// next get the user's name 
// 

// then choose a random insult  
// 

// finally, return the personalized sass 
// 
} 
第二步：填充代码 

//function beSassy() 
// beSassy asks for a user's name, chooses a random  
// insult and returns an alert box with the user's name and the 
// insult. 
function beSassy() 
{ 
// first write a list of insults 
// 
var the_insult_list = new Array; 
the_insult_list[0] = "your shoe lace is untied"; 
the_insult_list[1] = "your mama!"; 
the_insult_list[2] = "it's hard to be insulting"; 

// next get the user's name 
// 
var the_name = prompt("What's your name?", ""); 

// then choose a random insult  
// 
var the_number = Math.random() * 5; 
var insult_number = parseInt(the_number); 
var the_insult = the_insult_list[insult_number]; 

// finally, return the personalized sass 
// 
alert("Hey " + the_name + " " + the_insult); 
} 
这种先写注释的策略不仅迫使你在写代码前思考，而且 
使编码的过程看起来容易些 - 通过把任务分成小的， 
易于编码的各个部分，你的问题看起来就不太象珠穆朗 
玛峰，而象一群令人愉悦的起伏的小山。 

最后... 

总以分号结束你的每一条语句。 

虽然并不是严格必需，你应该养成以分号结束每一条语 
句的习惯，这样可以避免这行后面再有代码。忘了加 
分号，下一行好的代码会突然产生错误。 

把变量初始化为“var”，除非你有更好的理由不这样做。 

用“var”把变量局域化可以减少一个函数与另一个不相 
关函数相混淆的机会。 

好了，既然你已经知道了如何编码，下面就让我们学习怎样使 
你的JavaScript快速运行。>>

一旦你的JavaScript能运行，你就会想到使其运行得更快。 
在讲解加速代码的方法之前，让我先讲讲“80/20规则”： 
百分之八十的优化是由最初百分之二十的工作所完成的。竭 
力实现剩余百分之二十的速度优化是一种巨大的痛苦，而且 
经常导致完全不能读和难以管理的代码。简言之，如果你的 
JavaScript运行得很慢，你可以用很多简单的方法来加速它， 
但是除非你的代码确实运行得很慢，我不会对它进行再优化。 
下面是一些使你的代码轻松运行的方法。 

限制循环内的工作量 

程序运行慢的最常见原因是循环内的重复工作。如果一 
条命令只需要执行一次，就没有必要把它放在循环内。 
例如： 

var index = 0; 
while (index <10) 
{ 
 var the_date = new Date(); 
 var the_day = the_date.getDay(); 
 var the_name = prompt("what's the kid's name? " ,""); 
 alert("On " + the_day + " " + the_name + " is a very special person."); 
 index++; 
} 

此程序循环执行10次。每次得到当天的日期，询问小孩 
的名字，然后打印出“On Monday,so-and-so is a  
very special person.”。 

但是日期是不会改变的，总是今天。所以没有必要把前 
两行放在循环中。把它们从循环中拿出来，让其只执行 
一次而不是10次，这样会节省时间： 
var index = 0; 
var the_date = new Date(); 
var the_day = the_date.getDay(); 
while (index <10) 
{ 
var the_name = prompt("what's the kid's name? " ,""); 
alert("On " + the_day + " " + the_name + " is a very special person."); 
index++; 
} 


定制if-then-else语句，按最可能到最不可能的顺序 

因为if-then-else语句在遇到条件为真时结束，你可以 
通过把最有可能的条件放到最开始来减少需要判断的语 
句的数量。例如： 

var pet = prompt("what kind of pet do you have?", ""); 
if (pet == "cat")  
{ 
 doCatStuff(); 
} else if (pet == "dog")  
{ 
 doDogStuff(); 
} else if (pet == "bird") 
{ 
 doBirdStuff(); 
} else if (pet == "lizard") 
{ 
 doLizardStuff(); 
} 
一般来说，程序中的if子句比从lizard到dog需要执行的 
逻辑判断要少。 

最小化重复执行的表达式 

如果你发现需要重复计算一个特定的表达式，如 
var pi=22/7，只计算一次并把它放在一个全局变量中或 
许是个好主意。例如，不象下面程序这样： 

function theArea(radius) 
{ 
var pi = 22/7; 
var area = pi * radius * radius; 
return area; 
} 

function theCircumference(radius) 
{ 
var pi = 22/7; 
var circumference = 2 * pi * radius; 
return circumference; 
} 


而是这样做： 

var pi = 22/7; 
function theArea(radius) 
{ 
 var area = pi * radius * radius; 
 return area; 
} 
function theCircumference(radius) 
{ 
 var circumference = 2 * pi * radius; 
 return circumference; 
} 

我知道我在用一个全局变量，我也说过这不是一个好主意。 
然而，一些数字，如pi，其值在程序中永远不会改变，是 
此规则的特例。通过只计算pi一次，可以省去额外的计算。 
或许时间上的一些小的节省，累加起来会很管用。 

如果你发现代码运行很慢，你只要注意一些事情。这些都 
很明显，但是当你发现你经常忽略象这样简单的优化技巧 
时，你会很吃惊。 

还有，我的朋友，让我们结束今天的课程，这也是整个 
JavaScript高级教程的结束。如果你已经进行到这儿， 
并且你至少读过过去五天课程中的一半，那么你已经看 
过很多JavaScript代码了。实际上，如果你能理解跨越 
第一部分和第二部分的10课的大部分内容，你就可以很 
安全地把自己称为“JavaScript助手”。通往神秘真知 
的路就在你的脚下