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，如需转载请自行联系原作者
