JavaScript的OO特性:继承
继承无疑是JavaScript体现OO特性的最为重要的一环,不能实现继承的语言就不能称为面向对象语言.
由于JavaScript是一门基于对象的语言,先天并不支持继承特性.这里使JavaScript具有继承的特点,是使用prototype关键字实现的.
prototype是原型关键字,它是一个对象,是属于每一个JavaScript类型变量的子对象.设想一下,如果变量b的prototype是变量a,而a具有方法show,那么通过b.prototype.show就等价于a.show.当然,b.prototype.show这种写法相当不友好,值得庆幸的是,浏览器总算支持一种特殊的访问规则:如b.show调用时,如果b变量自己具有show方法,则直接调用b的show方法,如果没有,则调用b.prototypt.show,如果还没有,则调用b.prototype.prototype.show...依次类推,一直到最底层.(这种调用机制,是JavaScript实现继承的核心机制!)
首先定义一个类,如下:
function Employee(name,dept){
this.name = name || "none";
this.dept = dept || "general";
this.toString = function(){
return this.name + "&" + this.dept;
}
}
Employee.show = function(s){ //show是Employee类的静态方法,只能由类调用,不能由实例对象调用.
alert(s);
}
这个类在前面几节有详细介绍.
现在我们要从这个Employee类派生出一个子类WorkerBee,该怎么做呢?如下:
//由Employee类派生一个WorkerBee子类
function WorkerBee(age,name,dept){
this.age = age || 0;
this.name = name;
this.dept = dept;
}
WorkerBee.prototype = new Employee;
关键还是在于WorkerBee.prototype = new Employee;这行代码实现了继承.(就是prototype成为Employee实例.
如下是全部的示例代码:
E
<script type="text/javascript">
//创建一个类Employee作为基类
//var Employee = function(name,dept){
} //or
function Employee(name,dept){
this.name = name || "none";
this.dept = dept || "general";
this.toString = function(){
return this.name + "&" + this.dept;
}
}
Employee.show = function(s){ //show是Employee类的静态方法,只能由类调用,不能由实例对象调用.
alert(s);
}
//由Employee类派生一个WorkerBee子类
function WorkerBee(age,name,dept){
this.age = age || 0;
this.name = name;
this.dept = dept;
this.toString = function(){ //这里为WorkerBee类重载基类的toString方法.
return this.name + "&" + this.dept + "&" + this.age;
}
}
WorkerBee.prototype = new Employee;
var w = new WorkerBee(24,"fanrong","技术部");
//WorkerBee.show(w.toString());//调用失败,显然javascript不支持静态方法的继承.
Employee.show(w.toString()); //这里w.toString()调用成功,表明支持类非静态方法与变量对象的继承
</script>
这里WorkerBee类继承并扩展了Employee类,重载了toString方法,但是比较遗憾,这里Employee.show静态方法不能为子类继承 :(
由于JavaScript是一门基于对象的语言,先天并不支持继承特性.这里使JavaScript具有继承的特点,是使用prototype关键字实现的.
prototype是原型关键字,它是一个对象,是属于每一个JavaScript类型变量的子对象.设想一下,如果变量b的prototype是变量a,而a具有方法show,那么通过b.prototype.show就等价于a.show.当然,b.prototype.show这种写法相当不友好,值得庆幸的是,浏览器总算支持一种特殊的访问规则:如b.show调用时,如果b变量自己具有show方法,则直接调用b的show方法,如果没有,则调用b.prototypt.show,如果还没有,则调用b.prototype.prototype.show...依次类推,一直到最底层.(这种调用机制,是JavaScript实现继承的核心机制!)
首先定义一个类,如下:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
现在我们要从这个Employee类派生出一个子类WorkerBee,该怎么做呢?如下:
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
如下是全部的示例代码:
E
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/dot.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)