JavaScript编程中常见的五个低级错误及修正指南

本文内容基于对英文文章《5 Reasons Your Javascript Stinks》的翻译与解读。

JavaScript在互联网上虽饱受争议，但其动态特性、广泛普及度以及深入生活的应用场景使其无可替代。尽管它常被误认为是简单的入门脚本语言，且其动态类型与静态类型概念的混合使用常遭诟病，但问题往往出在使用者身上。以下是五个导致JavaScript代码质量低下的常见原因。

未使用命名空间

1. 未使用命名空间。

大学老师曾告诫不要在作业中使用全局变量，JavaScript同样如此。网页中充斥着从各处引入的脚本和库，若不加管理，极易造成混乱。例如，定义一个名为loader()的变量或函数，极易引发冲突。若无意中重载了函数，JavaScript不会发出任何警告。作为一门被戏称为“学前教育”的语言，开发者必须清楚这些操作带来的后果。

 
function derp(){ alert("one"); }
function derp(){ alert("two"); }
derp();

执行结果可能是"two"，但也可能是"one"，这取决于加载顺序。因此，务必将所有代码封装在自己的命名空间中，这非常简单。以下是一种定义命名空间的简易方法。

 
var foospace={};
foospace.derp=function(){ alert("one"); }
function derp(){ alert("two"); }
foospace.derp();

变量定义随意

2. 变量定义随意，缺乏规范。

使用无意义的字母数字组合作为变量名是双输的选择。在40行代码中寻找一个无表意字符的变量，对维护工作而言简直是噩梦。将变量声明分散在代码块中同样令人头疼。即使是你自己，面对此类变量时也不得不问：“这是在哪里定义的？”然后迅速使用Ctrl+F搜索。这种做法是对JavaScript的滥用，应始终在变量使用范围的顶部进行声明。即便语言不强制要求，也应养成此习惯。

function(){

var a,//description

b; //description

//process…

未理解变量作用域

3. 未理解JavaScript的变量作用域。

优秀的程序员熟悉C++等语言的作用域概念，对变量有完全控制。然而，JavaScript的作用域机制与这些语言不同，它并不像其他语言那样依赖代码块（花括号）来划分作用域。

 
var herp="one";
{ 
var herp="two";
} 
alert(herp);

在此情况下，herp的值是"two"而非"one"。JavaScript的作用域是基于函数的，而非代码块。每个函数拥有独立的作用域，JavaScript对此处理得相当灵活，甚至可以将作用域像命名空间或变量一样传递。

误解面向对象特性

4. 误解JavaScript的面向对象特性。

JavaScript自诞生起便是面向对象语言，万物皆对象，包括数字和字符等原始类型也可通过内置构造器转化为对象。与其他面向对象语言不同，JavaScript没有类（class）的概念。JavaScript中的对象通过函数定义，函数本身也是对象。JavaScript拥有一个名为prototype的属性，所有对象内置此属性，可通过它修改对象构造、添加变量和功能。

 
var derp; //will hold a Herp instance
var Herp= function(){
this.opinion="Javascript is cooler than BASIC.";
} 
Herp.prototype.speak=function(){ alert(this.opinion); }
var derp= new Herp();
derp.speak();

若此概念对你陌生，建议查阅Google等资源深入学习。面向对象编程对于本文简短的篇幅而言过于宏大。

滥用new关键字

5. 滥用"new"关键字。

JavaScript可能是你的“初恋”，让你感到无所适从。若想让JavaScript表现良好，需了解对象符号。除实例化对象或罕见地需要延迟加载数据外，通常无需使用new关键字。在JavaScript中分配大量new变量地址是缓慢的操作，为追求效率，应始终使用对象字面量符号。

 
var rightway= [1, 2, 3];
var wrongway= new Array(1, 2, 3);

回顾前文，JavaScript的作用域基于函数。若不使用new关键字声明对象，该对象可能成为全局范围的对象。因此，正确使用new关键字声明对象是一个好习惯，这显得更专业。

 
var derp="one";
var Herp=function(){
this.derp="two";
} 
var foo=Herp();
alert(derp);

若按此写法，JavaScript不会报错，但弹出的答案可能是"two"！有多种方法可防止此类行为，如使用instanceOf，但更推荐正确使用new关键字。

现在你了解JavaScript代码为何写得糟糕了吧？记住上述要点，你的代码质量将有所提升。我个人偏好使用3个Tab键缩进，用下划线连接单词，并将函数名首字母大写以表示其为对象。当然，这是另一个话题。导致JavaScript代码质量低下的原因众多，正如我技术拙劣的原因一样，欢迎在评论中表达你的观点、支持或反对意见。

特别感谢rogeliorv和Jared Wein指出第五点中存在的错误。你们很专业。