JavaScript基础之继承（附实例） [ZT]
2008-03-18 09:11
399 查看
JavaScript基础之继承（附实例）
前些天写了一篇关于JavaScript基础的帖子"JavaScript基础之对象"。在那篇帖子中说马上就会写一些关于继承方面的东西。可是上周杂事太多，都没有时间动笔，就一直拖到今天才终于下笔写了。上一篇帖子中很多人认为我自己的东西太少了，所以这篇帖子中在说完基础知识之后我会给出一个完整的例子。
大家都知道面向对象语言的三大特性为：封装、继承、多态。面向对象的语言之所以强大就全依赖于这三大特性。脚本作为一种准面向对象的语言虽然有先天的不足，但还是能在某种程度上去实现这些特性。实现最多、技术最成熟的就数继承了，不过脚本也不能像C#一样简单地用一个"："就能实现继承，而是要自己去实现继承的细节。
1 继承的几种实现方法
要实现继承首先就必须要有子类、父类（超类、基类等叫法）。子类去继承父类的方法和属性。在脚本里所有开发人员定义的类都可以作为父类，不过本地类（native object）和宿主类（host object）不能作为父类。由于脚本里面没有访问修饰符，父类所有的属性和方法都可以被子类直接访问。子类也可以扩展父类的属性和方法。
1.1 call()方法
Call方法是脚本的一个内置(build in)方法。官方说明为：调用一个对象的方法，以另一个对象替换当前对象。语法为：call([thisObj[,arg1[, arg2[, [,.argN]]]]])。用这个方法可以很容易地模拟继承的实现：
1function funCreateElement(sClassName)
2function funCurrNavi()
2function funCreateElement()
2
5 funCreateElement.prototype.sAClassName=sClassName; // 样式类
6 funCreateElement.prototype.createALink=function()
7
13
14 function funCurrNavi()
15
18 funCurrNavi.prototype=new funCreateElement();
19 funCurrNavi.prototype.showMeInDiv=function()
20function funCreateElement(sClassName)
2
6 funCreateElement.prototype.createALink=function()
7function funCurrNavi(sLinkText)
2
8 funCurrNavi.prototype=new funCreateElement(); // 继承超链接类
9
10 funCurrNavi.prototype.showMeInDiv=function()
11<html xmlns="http://www.w3.org/1999/xhtml">
2<head>
3 <title>Create Admin Pages' Navigator</title>
4 <style type="text/css">
5 </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
75 function funCreateElement(sClassName)
80
85 funCreateElement.prototype.createALink=function(sText,sUrl,sTarget)
93
103 funCreateElement.prototype.createDivBlank=function()
109
115 funCreateElement.prototype.createDivNoLink=function(sText)
121
129 function funCurrNavi(oNaviJSON,oParentObject,sClassNameRoot,sClassNameNode)
137
151 // 继承超链接类
152 funCurrNavi.prototype=new funCreateElement();
153
154 // 显示自己（在Table容器里）
155 funCurrNavi.prototype.showMeInTable=function()
156
174 // 显示自己（在Div容器里） 返回：div
175 funCurrNavi.prototype.showMeInDiv=function()
176
201
202 function funCurrNavis(oNavisJSON,sClassName)
207
214 // 创建所有的节点（以Table为容器）
215 funCurrNavis.prototype.createNavigatorsInTable=function()
216
237 // 创建所有的节点（以Div为容器）
238 funCurrNavis.prototype.createNavigatorsInDiv=function()
239
255 function showNavigator(sNavigatorMain,sParentID,sFlag)
261
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>
在这个实例里面采用了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'}]}]}"。其格式好了的形式类似于上面例子中的
1var sNavigatorMain =
2 sNavigators:[
4 root:[ sons:[ },
8 root:[ sons:[ },
12 root:[ sons:[ },
16 root:[ sons:[ }
20 ,
21 root:[ sons:[ }
25 ]
26 };
用JSON字符串作为数据源非常的方便，他能直接转化成类。上面的例子非常简单就不详细地说明了，通过注释就能看明白了。
这篇帖子我希望各位兄台就技术方面多提提意见。千万别扔砖头！！
相关文章："JavaScript基础之对象";
前些天写了一篇关于JavaScript基础的帖子"JavaScript基础之对象"。在那篇帖子中说马上就会写一些关于继承方面的东西。可是上周杂事太多，都没有时间动笔，就一直拖到今天才终于下笔写了。上一篇帖子中很多人认为我自己的东西太少了，所以这篇帖子中在说完基础知识之后我会给出一个完整的例子。
大家都知道面向对象语言的三大特性为：封装、继承、多态。面向对象的语言之所以强大就全依赖于这三大特性。脚本作为一种准面向对象的语言虽然有先天的不足，但还是能在某种程度上去实现这些特性。实现最多、技术最成熟的就数继承了，不过脚本也不能像C#一样简单地用一个"："就能实现继承，而是要自己去实现继承的细节。
1 继承的几种实现方法
要实现继承首先就必须要有子类、父类（超类、基类等叫法）。子类去继承父类的方法和属性。在脚本里所有开发人员定义的类都可以作为父类，不过本地类（native object）和宿主类（host object）不能作为父类。由于脚本里面没有访问修饰符，父类所有的属性和方法都可以被子类直接访问。子类也可以扩展父类的属性和方法。
1.1 call()方法
Call方法是脚本的一个内置(build in)方法。官方说明为：调用一个对象的方法，以另一个对象替换当前对象。语法为：call([thisObj[,arg1[, arg2[, [,.argN]]]]])。用这个方法可以很容易地模拟继承的实现：
1function funCreateElement(sClassName)
2function funCurrNavi()
2function funCreateElement()
2
5 funCreateElement.prototype.sAClassName=sClassName; // 样式类
6 funCreateElement.prototype.createALink=function()
7
13
14 function funCurrNavi()
15
18 funCurrNavi.prototype=new funCreateElement();
19 funCurrNavi.prototype.showMeInDiv=function()
20function funCreateElement(sClassName)
2
6 funCreateElement.prototype.createALink=function()
7function funCurrNavi(sLinkText)
2
8 funCurrNavi.prototype=new funCreateElement(); // 继承超链接类
9
10 funCurrNavi.prototype.showMeInDiv=function()
11<html xmlns="http://www.w3.org/1999/xhtml">
2<head>
3 <title>Create Admin Pages' Navigator</title>
4 <style type="text/css">
5 </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
75 function funCreateElement(sClassName)
80
85 funCreateElement.prototype.createALink=function(sText,sUrl,sTarget)
93
103 funCreateElement.prototype.createDivBlank=function()
109
115 funCreateElement.prototype.createDivNoLink=function(sText)
121
129 function funCurrNavi(oNaviJSON,oParentObject,sClassNameRoot,sClassNameNode)
137
151 // 继承超链接类
152 funCurrNavi.prototype=new funCreateElement();
153
154 // 显示自己（在Table容器里）
155 funCurrNavi.prototype.showMeInTable=function()
156
174 // 显示自己（在Div容器里） 返回：div
175 funCurrNavi.prototype.showMeInDiv=function()
176
201
202 function funCurrNavis(oNavisJSON,sClassName)
207
214 // 创建所有的节点（以Table为容器）
215 funCurrNavis.prototype.createNavigatorsInTable=function()
216
237 // 创建所有的节点（以Div为容器）
238 funCurrNavis.prototype.createNavigatorsInDiv=function()
239
255 function showNavigator(sNavigatorMain,sParentID,sFlag)
261
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>
在这个实例里面采用了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'}]}]}"。其格式好了的形式类似于上面例子中的
1var sNavigatorMain =
2 sNavigators:[
4 root:[ sons:[ },
8 root:[ sons:[ },
12 root:[ sons:[ },
16 root:[ sons:[ }
20 ,
21 root:[ sons:[ }
25 ]
26 };
用JSON字符串作为数据源非常的方便，他能直接转化成类。上面的例子非常简单就不详细地说明了，通过注释就能看明白了。
这篇帖子我希望各位兄台就技术方面多提提意见。千万别扔砖头！！
相关文章："JavaScript基础之对象";
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [导入]JavaScript基础之继承（附实例）
- javascript 对象基础 继承机制实例 call() apply 方法!
- JavaScript基础之继承（附实例）
- javascript 对象基础 继承机制实例【对象冒充】
- JavaScript基础之继承（附实例）
- javascript基础实例
- JavaScript基础教程之alert弹出提示框实例
- javascript基础：prototype对象的继承
- javascript 用call来继承实例属性
- javascript继承机制实例详解
- 基础 JavaScript 实例
- JavaScript原型继承之基础机制（转）
- Javascript & DHTML 实例编程（教程）DOM基础和基本API
- JavaScript基础之继承与原型链
- java 基础之继承详解实例
- Javascript基础知识盲点总结——继承
- javascript 面向对象编程基础：继承
- JavaScript基础之继承
- javascript原型链继承用法实例分析
- JavaScript基础（8.全选取消实例）