forked from qiqiboy/createClass
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (137 loc) · 4.99 KB
/
index.html
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>createClass</title>
<script type="text/javascript" src="src/createClass.js"></script>
<style type="text/css">
h3{
margin:2em 0 0;
}
</style>
</head>
<body>
<a href="https://github.com/qiqiboy/createClass" target="_blank"><strong>测试代码说明请点击这里</strong></a>
<pre>
<script type="text/javascript">
//创建Car类，拥有一个`name`属性和`getName`方法
document.writeln('<h3>例子1：</h3>');
var Car=createClass(function(name){
this.name=name;
},{
getName:function(){
return this.name;
},
getNameByPrivate:function(){//内部调用将优先调用私有方法
return this.getName();
},
'private:getName':function(){
return '私有方法调用结果：'+this.getNamePrivate();
},
'private:getNamePrivate':function(){
return this.name;
},
'static:getName':function(){
return '静态调用';
},
'testPrefix:getName':function(){
return this.name;
}
});
//实例化
var car=new Car('宝马');
var car1=Car('奔驰'); //省略`new`操作符
//下面的getName属于外部调用，会执行公有方法
document.writeln(car.getName());//宝马
document.writeln(car1.getName());//奔驰
//getNameByPrivate是公有方法，但是其内部调用了私有的getName方法，所有输出有所不同
document.writeln(car.getNameByPrivate());//私有方法调用结果：宝马
//静态方法调用
document.writeln(Car.getName());//静态调用
//下面调用会报错，因为私有方法不允许外部调用
try{car1.getNamePrivate()}catch(e){document.writeln(e.message);}//Cant not run a private method!
//创建Bike类，继承Car的方法并添加一个新方法`getDesc`
document.writeln('<h3>例子2：</h3>');
var Bike=createClass(function(name){
this.name=name;
},{
getDesc:function(){
return '这是一辆'+this.getName();
}
},Car);
//实例化
var bike=new Bike('自行车');
document.writeln(bike.getName());//自行车
document.writeln(bike.getDesc());//这是一辆自行车
//使用普通方法创建一个Drive类（验证多继承同样适用于非使用createClass创建的类）
function Drive(name){this.name=name;}
Drive.prototype.start=function(){
this.status='行驶中';
}
Drive.prototype.stop=function(){
this.status='停止';
}
//创建Bus类，继承Car、Drive的方法并添加一个新方法`getColor`
document.writeln('<h3>例子3：</h3>');
var Bus=createClass(function(name,color){
this._super(name);
this.color=color;
},{
getColor:function(){
return this.color;
},
getDesc:function(){
return this._super()+'，颜色是'+this.getColor();
}
},Drive,Bike);
//实例化
var bus=new Bus('公共汽车','黄色');
bus.start();//调用继承自父类的方法
document.writeln(bus.status);//行驶中
document.writeln(bus.getName());//公共汽车
document.writeln(bus.getColor());//黄色
document.writeln(bus.getDesc());//这是一辆公共汽车，颜色是黄色
document.writeln('<h3>例子4：</h3>');
//该例子添加了 `setColor` 方法到 Bike 类的原型
Bike.fn.extend({
setColor:function(color){
this.color=color;
}
});
//该例子给bike对象添加了 `setName` 静态方法
bike.extend({
setName:function(name){
this.name=name;
}
});
var BikeSub=Bike.extend({
getDesc:function(){
return this._super()+'，非常非常漂亮'
}
}); //等同于 createClass(Bike,{});
var subbike=new BikeSub('漂亮的自行车');
bike.setColor('白色');
bike.setName('我的自行车');
document.writeln(bike.name);//我的自行车
document.writeln(bike.color);//白色
new Bike('又一辆自行车').setColor('white'); //white 因为setColor是绑定到Bike的原型中的，所以所有基于Bike派生的实例都具有这个方法，下面的setName则不是，会报错
try{new Bike('又一辆自行车').setName('我的自行车');}catch(e){document.writeln(e.message);} //TypeError: undefined is not a function.
document.writeln(subbike.getDesc());//这是一辆漂亮的自行车
document.writeln('<h3>例子5：</h3>');
document.writeln(car1 instanceof Car) //true
document.writeln(bike instanceof Bike) //true
document.writeln(bike instanceof Car) //true
document.writeln(subbike instanceof Bike) //true
document.writeln(subbike instanceof Car) //true
document.writeln(bus instanceof Bus) //true
document.writeln(bus instanceof Drive) //true Drive是默认被继承的父类，所以原生instanceof可以检测，但是Bike是通过复制属性方法形式继承的，所以原生instanceof或返回false
document.writeln(bus instanceof Car) //false 同上
document.writeln(bus instanceof Bike) //false 同上
document.writeln(bus.isInstanceof(Bus)) //true 通过isInstanceof可以正确检测所有父类以及多重父类
document.writeln(bus.isInstanceof(Car)) //true
document.writeln(bus.isInstanceof(Bike)) //true
document.writeln(bus.isInstanceof(Drive)) //true
</script>
</pre>
</body>
</html>