JavaScript基础之继承（附实例）
\n
前些天写了一篇关于JavaScript基础的帖子”JavaScript基础之对象“。在那篇帖子中说马上就会写一些关于继承方面的东西。可是上周杂事太多，都没有时间动笔，就一直拖到今天才终于下笔写了。上一篇帖子中很多人认为我自己的东西太少了，所以这篇帖子中在说完基础知识之后我会给出一个完整的例子。
\n
大家都知道面向对象语言的三大特性为：封装、继承、多态。面向对象的语言之所以强大就全依赖于这三大特性。脚本作为一种准面向对象的语言虽然有先天的不足，但还是能在某种程度上去实现这些特性。实现最多、技术最成熟的就数继承了，不过脚本也不能像C#一样简单地用一个”：”就能实现继承，而是要自己去实现继承的细节。
\n
1 继承的几种实现方法
\n
要实现继承首先就必须要有子类、父类（超类、基类等叫法）。子类去继承父类的方法和属性。在脚本里所有开发人员定义的类都可以作为父类，不过本地类（native object）和宿主类（host object）不能作为父类。由于脚本里面没有访问修饰符，父类所有的属性和方法都可以被子类直接访问。子类也可以扩展父类的属性和方法。
\n
1.1 call()方法
\n
Call方法是脚本的一个内置(build in)方法。官方说明为：调用一个对象的方法，以另一个对象替换当前对象。语法为：call([thisObj[,arg1[, arg2[, [,.argN]]]]])。用这个方法可以很容易地模拟继承的实现：
\n
1function funCreateElement(sClassName)
2 {
3 this.sAClassName=sClassName;
4
5 this.createALink=function()
6 {
7 var oA=document.createElement(“a”);
8 oA.className=this.sAClassName;
9 return oA;
10 }
11 }
\n
类（funCreateElement）有一个属性（sAClassName）和一个方法（createALink）。它的作用是创建一个DOM元素。这个类使用this关键字给属性赋值，这样就确保了所有的实例指向的都是自己的值。
\n
1function funCurrNavi()
2 {
3 // 继承元素创建类
4 funCreateElement.call(this,”tblNavigatorA”);
5 }
\n
这样就实现了一个最简单的继承了。在funCurrNavi的实例里就可以直接使用funCreateElement类里面的方法了。
\n
var o=new funCurrNavi();
o.createALink();
\n
1.2 apply()方法
\n
apply方法也是脚本的一个内置(build in)方法。其用法和call对象类似。官方说明为：应用某一对象的一个方法，用另一个对象替换当前对象。语法为：apply([thisObj[,argArray]])。实际上这两个的作用几乎是相同的，要注意的地方是call(thisObj[,arg1[, arg2[,)中的arg参数可以是变量，而apply([thisObj[,argArray]])中的参数为数组集合。由于和call方法就只有参数的不同而已所以就不举例子了。
\n
1.3 原型链
\n
Prototype对象是所有类的源头。如果修改了prototype类的方法则这个修改会反映到所有类的实例里面。比如：在string.prototype里面加一个方法trim()，String.prototype.trim=function(){}。那么所有的字符串都会具有trim()方法了(“aa”.trim())。由于prototype的这个特性，我们就可以实现继承方法了。如果用原型链的方式重定义前面的例子，它们将变为下面的形式：
1function funCreateElement()
2 {
3 }
4
5 funCreateElement.prototype.sAClassName=sClassName; // 样式类
6 funCreateElement.prototype.createALink=function()
7 {
8 var oA=document.createElement(“a”);
9 oA.className=this.sAClassName;
10 return oA;
11 }
12
13
14 function funCurrNavi()
15 {
16 }
17
18 funCurrNavi.prototype=new funCreateElement();
19 funCurrNavi.prototype.showMeInDiv=function()
20 {
21 }
\n
这种方式采用funCurrNavi.prototype=new funCreateElement()方法，将funCreateElement类里面所有的属性和方法都复制到funCurrNavi类里面。非常的快捷。这种方式虽然非常的快捷，但是也有其缺点。采用这种方式时子类所有的属性和方法都必须在funCurrNavi.prototype=new funCreateElement()语句之后。因为该语句会覆盖funCurrNavi类原有的prototype类，添加了新的属性和方法的原有prototype类将被销毁。而且父类和子类都没有参数，只能通过设置属性的方法传入参数。
\n
1.4 混合方式
\n
混合方式就是指将前两种方式结合起来使用，取长避短。在call方式里面定义类的方式不理想，相同的方法在实例里面被重复的实例化了。原型链的方法则因为没有参数而不理想，使用参数前得额外的去设置其属性，不如构造函数的参数来的方便。根据上一篇帖子中定义类的混合方式，我们重新定义funCreateElement类：
\n
1function funCreateElement(sClassName)
2 {
3 this.sAClassName=sClassName;
4 }
5
6 funCreateElement.prototype.createALink=function()
7 {
8 var oA=document.createElement(“a”);
9 oA.className=this.sAClassName;
10 return oA;
11 }
\n
然后在funCurrNavi类里面采用call方式继承funCreateElement类的属性，采用原型链的方式继承其方法。如下:
\n
1function funCurrNavi(sLinkText)
2 {
3 funCreateElement.call(this,”tblNavigatorA”);
4
5 this.LinkText=sLinkText;
6 }
7
8 funCurrNavi.prototype=new funCreateElement(); // 继承超链接类
9
10 funCurrNavi.prototype.showMeInDiv=function()
11 {
12 var oLink=this.createALink();
13 oLink.text=this.LinkText;
14 }
\n
采用funCreateElement.call(this,”tblNavigatorA”)方式继承其参数，funCurrNavi.prototype=new funCreateElement()方式继承其方法。从而达到方法不会被实例化多次的目的。
\n
2 实例
\n
前面讲述了几种继承的实现方式，这一小节就利用前面讲述的方法去练习一个小例子。这个例子是根据一个字符串去呈现一个树状的列表，这种需求常见于页面的导航中。由于只是为了辅助讲述继承，例子有些地方不免有些牵强附会和小题大做的地方。这些就希望各位网友包涵了，请各位珍惜自己的砖头了。我在这里戴上钢盔等候大家的批评了。：）
下面是其运行成功的样图：
左面的那个是用table作为容器，右边的那个是用div作为容器。
\n
1<html xmlns=”http://www.w3.org/1999/xhtml”>
2<head>
3 <title>Create Admin Pages’ Navigator</title>
4 <style type=”text/css”>
5 /**//*导航table的样式*/.tblNavigator
6 {
7 border: 2px solid #FFD7AC;
8 width: 200px;
9 margin: 3px;
10 background: #fff;
11 margin-top: 5px;
12 margin-bottom: 5px;
13 border-collapse: collapse;
14 }
15 /**//*每个根节点的样式*/.tblNavigatorRoot
16 {
17 height: 30px;
18 line-height: 30px;
19 text-align: left;
20 vertical-align: middle;
21 }
22 /**//*根节点的子节点的样式*/.tblNavigatorTD
23 {
24 border-collapse: collapse;
25 border: 1px solid #FFE6CB;
26 height: 22px;
27 text-indent: 15px;
28 background: #fff;
29 width: 100%;
30 }
31 /**//*导航中的超链接*/.tblNavigatorA
32 {
33 font-weight: 700;
34 text-decoration: none;
35 color: Black;
36 width: 100px;
37 }
38 </style>
39</head>
40<body>
41 <div id=”divMain”>
42 </div>
43 <div id=”divMain2″ class=”tblNavigator”>
44 </div>
45
46 <script type=”text/javascript”>
47
48 var sNavigatorMain =
49 {
50 sNavigators:[
51 {
52 root:[{name:\'root1\'}],
53 sons:[{name:\'root1Son1\',url:\'bcc\'},{name:\'root1Son2\',url:\'bcc\'}]
54 },
55 {
56 root:[{name:\'root2\'}],
57 sons:[{name:\'root2Son1\',url:\'bcc\'}]
58 },
59 {
60 root:[{name:\'root3\'}],
61 sons:[{name:\'root3Son1\',url:\'bcc\'},{name:\'root3Son2\',url:\'bcc\'},{name:\'root3Son3\',url:\'bcc\'}]
62 },
63 {
64 root:[{name:\'root4\'}],
65 sons:[{name:\'root4Son1\',url:\'bcc\'},{name:\'root4Son3\',url:\'bcc\'}]
66 }
67 ,
68 {
69 root:[{name:\'root4\'}],
70 sons:[{name:\'root4Son1\',url:\'bcc\'},{name:\'root4Son3\',url:\'bcc\'}]
71 }
72 ]
73 };
74
75 /**//*
76 * 创建一个元素
77 * sClassName：元素的样式控制类
78 */
79 function funCreateElement(sClassName)
80 {
81 // 样式类
82 this.sAClassName=sClassName;
83 }
84
85 /**//*
86 * 创建超链接元素
87 * sText：超链接显示的文本
88 * sUrl：超链接的href
89 * sTarget：打开链接的目标
90 * 返回：超链接元素
91 */
92 funCreateElement.prototype.createALink=function(sText,sUrl,sTarget)
93 {
94 var oA=document.createElement(“a”);
95 oA.href=sUrl; // 链接文本
96 oA.className=this.sAClassName; // 样式类
97 oA.target=sTarget; // 打开链接的目标
98 oA.appendChild(document.createTextNode(sText)); // 显示文本
99
100 return oA;
101 }
102
103 /**//*
104 * 创建Div元素
105 * sText：显示的文本
106 * 返回：Div元素
107 */
108 funCreateElement.prototype.createDivBlank=function()
109 {
110 var oDiv=document.createElement(“div”);
111 oDiv.className=this.sAClassName;
112 return oDiv;
113 }
114
115 /**//*
116 * 创建Div元素
117 * sText：显示的文本
118 * 返回：Div元素
119 */
120 funCreateElement.prototype.createDivNoLink=function(sText)
121 {
122 var oDiv=document.createElement(“div”);
123 oDiv.className=this.sAClassName;
124 oDiv.appendChild(document.createTextNode(sText));
125
126 return oDiv;
127 }
128
129 /**//*
130 * 创建一个模块的节点
131 * oNaviJSON：一个模块节点的文本
132 * oParentObject：父节点
133 * sClassNameRoot：根节点的样式类
134 * sClassNameNode：子节点的样式类
135 */
136 function funCurrNavi(oNaviJSON,oParentObject,sClassNameRoot,sClassNameNode)
137 {
138 // 继承元素创建类
139 funCreateElement.call(this,”tblNavigatorA”);
140
141 // 当前导航的菜单
142 this.oNavi=oNaviJSON;
143 // 当前导航的父节点
144 this.oParent=oParentObject;
145 // 根节点的样式类
146 this.oNClassNameRoot=sClassNameRoot;
147 // 子节点的样式类
148 this.oNClassNameNode=sClassNameNode;
149 }
150
151 // 继承超链接类
152 funCurrNavi.prototype=new funCreateElement();
153
154 // 显示自己（在Table容器里）
155 funCurrNavi.prototype.showMeInTable=function()
156 {
157 // 在父容器中添加一行，并将父节点写入
158 this.oParent.insertRow(0);
159 this.oParent.rows[0].onclick=function(){alert(this.innerText)};
160 this.oParent.rows[0].insertCell(0);
161 this.oParent.rows[0].cells[0].className=this.oNClassName;
162 this.oParent.rows[0].cells[0].appendChild(document.createTextNode(this.oNavi.root[0].name));
163
164 var j=this.oNavi.sons.length;
165 for(var i=0;i<j;i++)
166 {
167 this.oParent.insertRow(i+1);
168 this.oParent.rows[i+1].insertCell(0);
169 this.oParent.rows[i+1].cells[0].className=this.oNClassNameNode;
170 this.oParent.rows[i+1].cells[0].appendChild(this.createALink(this.oNavi.sons[i].name,this.oNavi.sons[i].url,”_blank”));
171 }
172 }
173
174 // 显示自己（在Div容器里） 返回：div
175 funCurrNavi.prototype.showMeInDiv=function()
176 {
177 // 创建一个暂时的容器
178 var oDivContainer=document.createElement(“div”);
179
180 // 在父容器中将父节点写入
181 var oDivRoot=this.createDivNoLink(this.oNavi.root[0].name);
182 oDivRoot.className=this.oNClassNameRoot;
183 oDivRoot.onclick=function(){alert(this.innerText);};
184 oDivContainer.appendChild(oDivRoot);
185
186 // 链接节点
187 var oDivLinkNode;
188
189 var j=this.oNavi.sons.length;
190 for(var i=0;i<j;i++)
191 {
192 oDivLinkNode=this.createDivBlank();
193 oDivLinkNode.appendChild(this.createALink(this.oNavi.sons[i].name,this.oNavi.sons[i].url,”_blank”));
194 oDivLinkNode.className=this.oNClassNameNode;
195 oDivContainer.appendChild(oDivLinkNode);
196 }
197
198 return oDivContainer;
199 }
200
201
202 /**//*
203 * 创建所有的节点
204 * oNavisJSON：所有节点的文本
205 */
206 function funCurrNavis(oNavisJSON,sClassName)
207 {
208 // 当前导航的菜单
209 this.oNavis=oNavisJSON;
210 // 样式类
211 this.oNsClassName=sClassName;
212 }
213
214 // 创建所有的节点（以Table为容器）
215 funCurrNavis.prototype.createNavigatorsInTable=function()
216 {
217 // 创建父Table
218 var oTable=document.createElement(“table”);
219 oTable.className=this.oNsClassName;
220
221 // 创建tbody
222 var oTBody=document.createElement(“tbody”);
223 oTable.appendChild(oTBody);
224
225 var j=this.oNavis.sNavigators.length;
226 var CNavi;
227
228 for(var i=j-1;i>=0;i–)
229 {
230 CNavi=new funCurrNavi(this.oNavis.sNavigators[i],oTBody,”tblNavigatorRoot”,”tblNavigatorTD”);
231 CNavi.showMeInTable();
232 }
233
234 return oTable;
235 }
236
237 // 创建所有的节点（以Div为容器）
238 funCurrNavis.prototype.createNavigatorsInDiv=function()
239 {
240 // 创建容器
241 var oContainer=document.createDocumentFragment();
242
243 var j=this.oNavis.sNavigators.length;
244 var CNavi;
245
246 for(var i=0;i<j;i++)
247 {
248 CNavi=new funCurrNavi(this.oNavis.sNavigators[i],{},”tblNavigatorRoot”,”tblNavigatorTD”);
249 oContainer.appendChild(CNavi.showMeInDiv());
250 }
251
252 return oContainer;
253 }
254
255 /**//*
256 * 供调用的函数
257 * sNavigatorMain：所有节点的文本
258 * sParentID：导航父容器的ID
259 */
260 function showNavigator(sNavigatorMain,sParentID,sFlag)
261 {
262 var oTemp=eval(“ddkk=”+sNavigatorMain);
263 var main=new funCurrNavis(oTemp,”tblNavigator”);
264
265 if(sFlag==”div”)
266 {
267 document.getElementById(sParentID).appendChild(main.createNavigatorsInDiv());
268 }
269 else
270 {
271 document.getElementById(sParentID).appendChild(main.createNavigatorsInTable());
272 }
273 }
274
275 </script>
276
277 <script type=”text/javascript”>
278 // showNavigator(“{sNavigators:[{root:[{name:\'用户管理\'}],sons:[{name:\'个人信息管理\',url:\'~/UserMng/frmMyInfoMng.aspx\'},{name:\'本单位用户管理\',url:\'~/UserMng/frmUserMng.aspx\'},{name:\'本单位信息管理\',url:\'~/SysMaintenance/frmDeptInfo.aspx\'}]},{root:[{name:\'申报管理\'}],sons:[{name:\'项目管理\',url:\'~/Declaration/frmProjAppMng.aspx\'}]},{root:[{name:\'留言板管理\'}],sons:[{name:\'给管理员留言\',url:\'~/Information/frmQuestion.aspx\'}]}]}”,”divMain”,”table”);
279
280 //showNavigator(“{sNavigators:[{root:[{name:\'用户管理\'}],sons:[{name:\'个人信息管理\',url:\'~/UserMng/frmMyInfoMng.aspx\'},{name:\'本单位用户管理\',url:\'~/UserMng/frmUserMng.aspx\'},{name:\'本单位信息管理\',url:\'~/SysMaintenance/frmDeptInfo.aspx\'}]},{root:[{name:\'申报管理\'}],sons:[{name:\'项目管理\',url:\'~/Declaration/frmProjAppMng.aspx\'}]},{root:[{name:\'留言板管理\'}],sons:[{name:\'给管理员留言\',url:\'~/Information/frmQuestion.aspx\'}]}]}”,”divMain2″,”div”);
281 </script>
282
283</body>
284</html>
\n
在这个实例里面采用了JSON字符串作为数据源“{sNavigators:[{root:[{name:\'用户管理\'}],sons:[{name:\'个人信息管理\',url:\'~/UserMng/frmMyInfoMng.aspx\'},{name:\'本单位用户管理\',url:\'~/UserMng/frmUserMng.aspx\'},{name:\'本单位信息管理\',url:\'~/SysMaintenance/frmDeptInfo.aspx\'}]},{root:[{name:\'申报管理\'}],sons:[{name:\'项目管理\',url:\'~/Declaration/frmProjAppMng.aspx\'}]},{root:[{name:\'留言板管理\'}],sons:[{name:\'给管理员留言\',url:\'~/Information/frmQuestion.aspx\'}]}]}”。其格式好了的形式类似于上面例子中的
\n
1var sNavigatorMain =
2 {
3 sNavigators:[
4 {
5 root:[{name:\'root1\'}],
6 sons:[{name:\'root1Son1\',url:\'bcc\'},{name:\'root1Son2\',url:\'bcc\'}]
7 },
8 {
9 root:[{name:\'root2\'}],
10 sons:[{name:\'root2Son1\',url:\'bcc\'}]
11 },
12 {
13 root:[{name:\'root3\'}],
14 sons:[{name:\'root3Son1\',url:\'bcc\'},{name:\'root3Son2\',url:\'bcc\'},{name:\'root3Son3\',url:\'bcc\'}]
15 },
16 {
17 root:[{name:\'root4\'}],
18 sons:[{name:\'root4Son1\',url:\'bcc\'},{name:\'root4Son3\',url:\'bcc\'}]
19 }
20 ,
21 {
22 root:[{name:\'root4\'}],
23 sons:[{name:\'root4Son1\',url:\'bcc\'},{name:\'root4Son3\',url:\'bcc\'}]
24 }
25 ]
26 };
\n
用JSON字符串作为数据源非常的方便，他能直接转化成类。上面的例子非常简单就不详细地说明了，通过注释就能看明白了。
相关文章：”JavaScript基础之对象“;
\n
来源：http://www.cnblogs.com/syuko
\n