1 工厂模
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<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()分离出来，在模具中引用该方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<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 构造函数模式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//构造函数模型 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属性来实现。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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 构造函数原型模式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<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 动态原型模式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<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>
|
问题：当每次实例化时，类中包含的原型方法就会被创建一次，造成资源浪费。
解决：安装一个判断开关，检测该方法是否已经创建。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<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>
|
总结：目前使用最广泛的是混合的构造函数/原型方式。此外，动态原型方法也很流行，在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式，因为这样会给代码引入问题。
本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1363513，如需转载请自行联系原作者