JavaScript基础之继承（附实例）
前些天写了一篇关于JavaScript基础的帖子"JavaScript基础之对象"。在那篇帖子中说马上就会写一些关于继承方面的东西。可是上周杂事太多，都没有时间动笔，就一直拖到今天才终于下笔写了。上一篇帖子中很多人认为我自己的东西太少了，所以这篇帖子中在说完基础知识之后我会给出一个完整的例子。
大家都知道面向对象语言的三大特性为：封装、继承、多态。面向对象的语言之所以强大就全依赖于这三大特性。脚本作为一种准面向对象的语言虽然有先天的不足，但还是能在某种程度上去实现这些特性。实现最多、技术最成熟的就数继承了，不过脚本也不能像C#一样简单地用一个"："就能实现继承，而是要自己去实现继承的细节。
1 继承的几种实现方法
要实现继承首先就必须要有子类、父类（超类、基类等叫法）。子类去继承父类的方法和属性。在脚本里所有开发人员定义的类都可以作为父类，不过本地类（native object）和宿主类（host object）不能作为父类。由于脚本里面没有访问修饰符，父类所有的属性和方法都可以被子类直接访问。子类也可以扩展父类的属性和方法。
1.1 call()方法
Call方法是脚本的一个内置(build in)方法。官方说明为：调用一个对象的方法，以另一个对象替换当前对象。语法为：call([thisObj[,arg1[, arg2[, [,.argN]]]]])。用这个方法可以很容易地模拟继承的实现：
2
类（funCreateElement）有一个属性（sAClassName）和一个方法（createALink）。它的作用是创建一个DOM元素。这个类使用this关键字给属性赋值，这样就确保了所有的实例指向的都是自己的值。
2
这样就实现了一个最简单的继承了。在funCurrNavi的实例里就可以直接使用funCreateElement类里面的方法了。
var o=new funCurrNavi();
o.createALink();
1.2 apply()方法
apply方法也是脚本的一个内置(build in)方法。其用法和call对象类似。官方说明为：应用某一对象的一个方法，用另一个对象替换当前对象。语法为：apply([thisObj[,argArray]])。实际上这两个的作用几乎是相同的，要注意的地方是call(thisObj[,arg1[, arg2[,)中的arg参数可以是变量，而apply([thisObj[,argArray]])中的参数为数组集合。由于和call方法就只有参数的不同而已所以就不举例子了。
1.3 原型链
Prototype对象是所有类的源头。如果修改了prototype类的方法则这个修改会反映到所有类的实例里面。比如：在string.prototype里面加一个方法trim()，String.prototype.trim=function(){}。那么所有的字符串都会具有trim()方法了("aa".trim())。由于prototype的这个特性，我们就可以实现继承方法了。如果用原型链的方式重定义前面的例子，它们将变为下面的形式：
2
这种方式采用funCurrNavi.prototype=new funCreateElement()方法，将funCreateElement类里面所有的属性和方法都复制到funCurrNavi类里面。非常的快捷。这种方式虽然非常的快捷，但是也有其缺点。采用这种方式时子类所有的属性和方法都必须在funCurrNavi.prototype=new funCreateElement()语句之后。因为该语句会覆盖funCurrNavi类原有的prototype类，添加了新的属性和方法的原有prototype类将被销毁。而且父类和子类都没有参数，只能通过设置属性的方法传入参数。
1.4 混合方式
混合方式就是指将前两种方式结合起来使用，取长避短。在call方式里面定义类的方式不理想，相同的方法在实例里面被重复的实例化了。原型链的方法则因为没有参数而不理想，使用参数前得额外的去设置其属性，不如构造函数的参数来的方便。根据上一篇帖子中定义类的混合方式，我们重新定义funCreateElement类：
2
然后在funCurrNavi类里面采用call方式继承funCreateElement类的属性，采用原型链的方式继承其方法。如下:
2
采用funCreateElement.call(this,"tblNavigatorA")方式继承其参数，funCurrNavi.prototype=new funCreateElement()方式继承其方法。从而达到方法不会被实例化多次的目的。
2 实例
前面讲述了几种继承的实现方式，这一小节就利用前面讲述的方法去练习一个小例子。这个例子是根据一个字符串去呈现一个树状的列表，这种需求常见于页面的导航中。由于只是为了辅助讲述继承，例子有些地方不免有些牵强附会和小题大做的地方。这些就希望各位网友包涵了，请各位珍惜自己的砖头了。我在这里戴上钢盔等候大家的批评了。：）
下面是其运行成功的样图：
左面的那个是用table作为容器，右边的那个是用div作为容器。
2
3
4
5
在这个实例里面采用了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'}]}]}"。其格式好了的形式类似于上面例子中的
2
用JSON字符串作为数据源非常的方便，他能直接转化成类。上面的例子非常简单就不详细地说明了，通过注释就能看明白了。
这篇帖子我希望各位兄台就技术方面多提提意见。千万别扔砖头！！
相关文章："JavaScript基础之对象";