定义JavaScript类：工厂模式、构造函数模式、原型模式、构造函数原型模式、动态原型模式

1 工厂模

<script type="text/javascript">
//通过包装函数封装模具
function wrapBook(title,pages){
var book = new Object();
//申明属性并接收参数
book.title = title;
book.pages = pages;
book.what = function(){
alert(this.title+":"+this.pages);
}
return book;   //返回初始化后的对象
}
window.onload = function(){
//调用模具快速生产
//var book1 = wrapBook("JavaScript权威指南",600);
//var book2 = wrapBook("Dojo权威指南",390);
var book1 = new wrapBook("JavaScript权威指南",600);
var book2 = new wrapBook("Dojo权威指南",390);
book1.what();
book2.what();
console.dir(book1);
console.dir(book2);
}
</script>

问题：上面方法what()封装在图书模具函数wrapBook结构中，这样每生产一本书，该函数就被创建一次，也就是说，每本书都有一个相同的方法，造成资源浪费。
解决：把方法what()分离出来，在模具中引用该方法。

<script type="text/javascript">
//申明一个全局变量
what = function (){
alert(this.title+":"+this.pages);
}
//通过包装函数封装模具
function wrapBook(title,pages){
var book = new Object();
//申明属性并接收参数
book.title = title;
book.pages = pages;
book.what = what;   //引用全局方法的引用指针
return book;   //返回初始化后的对象
}
window.onload = function(){
//调用模具快速生产
//var book1 = wrapBook("JavaScript权威指南",600);
//var book2 = wrapBook("Dojo权威指南",390);
var book1 = new wrapBook("JavaScript权威指南",600);
var book2 = new wrapBook("Dojo权威指南",390);
book1.what();
book2.what();
console.dir(book1);
console.dir(book2);
}
</script>

2 构造函数模式

//构造函数模型
function Book(title,pages){
//构造函数属性
this.title = title;
this.pages = pages;
//构造函数方法
this.what = function (){
alert(this.title+":"+this.pages);
}
}
window.onload = function(){
//实例化构造函数，并传递参数
var book1 = new Book("JavaScript权威指南",600);
var book2 = new Book("Dojo权威指南",390);
book1.what();
book2.what();
console.dir(book1);
console.dir(book2);
}
</script>

备注：构造函数模式只能使用new运算符进行调用，不能使小括号()来调用。
问题：类似于工厂模式，造成what()方法重复创建。

3 原型模式
采用函数的prototype属性来实现。

<script type="text/javascript">
//使用构造函数定义一个空类
function Book(){ }
//为原型申明属性并初始化
Book.prototype.title = "图书名称";
Book.prototype.pages = 120;
//为原型申明一个方法
Book.prototype.what = function (){
alert(this.title+":"+this.pages);
}
window.onload = function(){
//实例化构造函数，并传递参数
var book1 = new Book();
var book2 = new Book();
book1.what();
book2.what();
console.dir(book1);
console.dir(book2);
}
</script>

4 构造函数原型模式

<script type="text/javascript">
//构造函数模式设计
function Book(title,pages){
//构造函数属性
this.title = title;
this.pages = pages;
}
//原型模式设计
Book.prototype.what = function (){
alert(this.title+":"+this.pages);
}
window.onload = function(){
//实例化构造函数，并传递参数
var book1 = new Book("JavaScript权威指南",600);
var book2 = new Book("Dojo权威指南",390);
book1.what();
book2.what();
console.dir(book1);
console.dir(book2);
}
</script>

备注：推荐采用此模式。

5 动态原型模式

<script type="text/javascript">
//构造函数模式设计
function Book(title,pages){
//构造函数属性
this.title = title;
this.pages = pages;
//原型模式设计，位于类的内部
Book.prototype.what = function (){
alert(this.title+":"+this.pages);
}
}
window.onload = function(){
//实例化构造函数，并传递参数
var book1 = new Book("JavaScript权威指南",600);
var book2 = new Book("Dojo权威指南",390);
book1.what();
book2.what();
console.dir(book1);
console.dir(book2);
}
</script>

问题：当每次实例化时，类中包含的原型方法就会被创建一次，造成资源浪费。
解决：安装一个判断开关，检测该方法是否已经创建。

<script type="text/javascript">
//构造函数模式设计
function Book(title,pages){
//构造函数属性
this.title = title;
this.pages = pages;
//创建原型方法的锁，如果不存在，就创建该方法
if(typeof Book.isLock == "undefined"){
Book.prototype.what = function (){
alert(this.title+":"+this.pages);
};
//创建原型方法后，把锁锁上，避免重复创建
Book.isLock = true;
}
}
window.onload = function(){
//实例化构造函数，并传递参数
var book1 = new Book("JavaScript权威指南",600);
var book2 = new Book("Dojo权威指南",390);
book1.what();
book2.what();
console.dir(book1);
console.dir(book2);
}
</script>

总结：目前使用最广泛的是混合的构造函数/原型方式。此外，动态原型方法也很流行，在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式，因为这样会给代码引入问题。

本文出自 “IT技术学习与交流” 博客，谢绝转载！