JavaScript 面向对象编程：闭包与原型模式对比及框架选型

JavaScript工程与网站开发的规范差异

在大型工程项目中，JavaScript的使用往往不如网站开发那样规范。许多客户端可处理的任务被转移至服务端，导致前端JS代码缺乏统一标准，进而引发代码可读性差、内存泄漏及书写不规范等问题。相比之下，网站开发（尤其是大型网站）对JS的输出质量要求极高，无论是否使用jQuery或Prototype等框架，都会形成一套良好的编码规范。

JavaScript面向对象编程的两种模式

为了提高代码的可维护性，JavaScript的编写建议采用面向对象的方式，通过类进行封装。目前JS中实现面向对象主要有两种模式：闭包模式和原型模式。

闭包模式示例

首先介绍闭包模式的实现方式，以下为一个典型示例。

 
function Person(firstName, lastName, age)
{ 
//私有变量：
var _firstName = firstName;
var _lastName = lastName;
//公共变量:
this.age = age;
//方法：
this.getName = function()
{ 
return(firstName + " " + lastName);
}; 
this.SayHello = function()
{ 
alert("Hello, I'm " + firstName + " " + lastName);
}; 
}; 
var BillGates = new Person("Bill", "Gates", 53);

原型模式与继承示例

接下来介绍原型模式的实现方式，同样借用一个示例。

 
//定义构造函数
function Person(name)
{ 
this.name = name; //在构造函数中定义成员
}; 
//方法定义到构造函数的prototype上
Person.prototype.SayHello = function()
{ 
alert("Hello, I'm " + this.name);
}; 
//子类构造函数
function Employee(name, salary)
{ 
Person.call(this, name); //调用上层构造函数
this.salary = salary; //扩展的成员
}; 
//子类构造函数首先需要用上层构造函数来建立prototype对象，实现继承的概念
Employee.prototype = new Person() //只需要其prototype的方法，此对象的成员没有任何意义！
//子类方法也定义到构造函数之上
Employee.prototype.ShowMeTheMoney = function()
{ 
alert(this.name + " $" + this.salary);
}; 
var BillGates = new Person("Bill Gates");
BillGates.SayHello();
var SteveJobs = new Employee("Steve Jobs", 1234);
SteveJobs.SayHello();

模式优缺点对比与框架选型建议

这两种方法各有优劣。第一种（闭包）看起来更像传统的类，但每个对象都会创建一份方法副本，造成内存浪费且资源回收不利；第二种（原型）结构上稍显复杂，但性能更优。若使用Prototype框架，则能较好地平衡结构与性能问题。

关于jQuery与Prototype框架的选择，个人体会是：jQuery倾向于使用闭包方式，更适合对单个对象进行操作；而Prototype基于原型模式，更适合开发客户端控件。在实际项目中，我更倾向于在应用中使用jQuery，而在注重界面表现的网站上使用Prototype。