前段时间温故了下JS OO之写类方式，从这篇开始我们看看JS OO之继承方式。
面向对象的语言多数都支持继承，继承最重要的优点就是代码复用，从而构建大型软件系统。如果一个类能够重用另一个类的属性和或方法，就称之为继承。从这个角度来看看JS的继承方式。JS中继承方式与写类方式息息相关。不同的写类方式造成不同的继承方式。各种流行JS库继承方式也各不相同。从最简单的复用开始。
1、构造函数方式写类，通过方法调用复制父类属性/字段到子类 实现继承
这里父类，子类都采用构造函数方式写，不用原型。子类调用父类函数来复制父类的属性。
/* *
* 父类Polygon:多边形
* @param {Object} sides
*/
function Polygon(sides) {
this .sides = sides;
this .setSides = function (s) { this .sides = s;}
}
/* *
* 子类Triangle:三角形
*/
function Triangle() {
this .tempfun = Polygon; // 父类引用赋值给子类的一个属性tempfun
this .tempfun( 3 ); // 调用
delete this .tempfun; // 删除该属性
this .getArea = function (){};
}
// new个对象
var tri = new Triangle();
console.log(tri.sides); // 继承的属性
console.log(tri.setSides); // 继承的方法
console.log(tri.getArea); // 自有的方法
// 缺点是对于Triangle的实例对象用instanceof为父类Polygon时是false
console.log(tri instanceof Triangle); // true
console.log(tri instanceof Polygon); // false
因为 JavaScript中具名函数的多种调用方式 ，子类还可以有以下的多种实现方式。只是在子类中调用父类方法不同而已。
function Triangle() {
Polygon.call( this , 3 ); // call方式调用父类
this .getArea = function (){};
}
function Triangle() {
Polygon.apply( this ,[ 3 ]); // apply方式调用父类
this .getArea = function (){};
}
function Triangle() {
var temp = new Polygon( 3 ); // new方式调用父类
for (atr in temp) { // 全部复制给子类
this [atr] = temp[atr];
}
this .getArea = function (){};
}
这种方式的缺点是子类的实例对象用instanceof检查父类时总是false。这与java中继承"is a "的关系是违背的。
2、原型方式写类，原型方式继承
core JS自身的对象系统就是采用原型方式(prototype based)继承的。或者说core JS没有采用常见的类继承(class based)系统，而是使用原型继承来实现自己的对象系统。工作中我们也可以用原型方式来实现继承，代码复用以构建自己的功能模块。
/* *
* 父类Polygon:多边形
*
*/
function Polygon() {}
Polygon.prototype.sides = 0 ;
Polygon.prototype.setSides = function (s) { this .sides = s;}
/* *
* 子类Triangle:三角形
*/
function Triangle() {}
Triangle.prototype = new Polygon(); // 这是原型继承关键的一句
Triangle.prototype.getArea = function (){}
// new个对象
var tri = new Triangle();
console.log(tri.sides); // 继承的属性
console.log(tri.setSides); // 继承的方法
console.log(tri.getArea); // 自有方法
// instanceof测试
console.log(tri instanceof Triangle); // true，表明该对象是三角形
console.log(tri instanceof Polygon); // true，表明三角形也是多边形
虽然从输出可以看出子类继承了父类Polygon的属性sides和方法setSides，但sides是0，怎么会是三角形呢。还得调用下tri.setSides(3)使之成为三角形。这样似乎很不方便。不能传参数，即是原型方式的缺点。优点是正确的维护了"is a"的关系。
3、组合构造函数/原型方式写类，采用前面种方式继承
这种方式父类，子类的属性都挂在构造函数里，方法都挂在原型上。
/* *
* 父类Polygon:多边形
*/
function Polygon(sides) {
this .sides = sides;
}
Polygon.prototype.setSides = function (s) { this .sides = s;}
/* *
* Triangle 三角形
* @param {Object} base 底
* @param {Object} height 高
*/
function Triangle(base,height) {
Polygon.call( this , 3 ); // 复制父类属性给自己
this .base = base;
this .height = height;
}
Triangle.prototype = new Polygon(); // 复制父类方法给自己
Triangle.prototype.getArea = function (){ // 最后定义自己的方法
return this .base * this .height / 2;
}
// new个对象
var tri = new Triangle( 12 , 4 );
console.log(tri.sides); // 继承的属性
console.log(tri.setSides); // 继承的方法
console.log(tri.base); // 自有属性
console.log(tri.height); // 自有属性
console.log(tri.getArea); // 自有方法
// instanceof测试，表明正确的维护了"is a"的关系
console.log(tri instanceof Triangle); // true，表明该对象是三角形
console.log(tri instanceof Polygon); // true，表明三角形也是多边形
105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
