JavaScript中的继承(3)

1.uber-子对象访问父对象的方式

在一般的面向对象语言中,通常都会提供一种用于子类访问父类的特殊语法,因为我们在实现子类方法时往往要父类方法的额外辅助。在这种情况下,子类通常就要去调用父类中的同名方法,以便最终完成工作。
JS中虽然没有这种语法,但是可以实现类似功能。
接下来,在之前构建的继承关系中引入一个uber属性,并令其指向父级原型对象。

function Shape(){}
//    augment prototype
Shape.prototype.name = 'shape';
Shape.prototype.toString = function () {
    var cst = this.constructor;
    return cst.uber
        ? this.cst.uber.toString() + ', ' + this.name
        : this.name;
};

function TwoDShape(){}
//take care of inheritance
var F = function(){};
F.prototype = Shape.prototype;
TwoDShape.prototype =new F();
TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.uber = Shape.prototype;
//augment prototype
TwoDShape.prototype.name = '2D shape';

function Triangle(side, height){
    this.side = side;
    this.height = height;
}

//take care of inheritance
var F = function() {};
F.prototype = TwoDShape.prototype;
Triangle.prototype = new F();
Triangle.prototype.constructor = Triangle;
Triangle.prototype.constructor = TwoDShape.prototype;
//augment prototype
Triangle.prototype.name = 'Triangle'
Triangle.prototype.getArea = function () {
    return this.side * this.height / 2;
}


对于这段代码,新增的部分有:

  • 将uner属性设置成指向其父级原型的引用
  • 对toString()方法进行了更新
    在此之前,toString所做的仅仅是返回this.name的内容而已。现在为其新增了一项额外任务,即检查对象中是否存在this.constructor.uber属性,如果存在,就先调用该属性的toString方法。由于this.constructor本身是一个函数,而this.constructor.uber是指向当前对象父级原型的引用。所以当我们调用Triangle实体的toString方法时,其原型链上所有的toString都会被调用。

2.将继承部分封装成函数

下面,将之前的实现继承关系的代码提炼出来,并封装进一个名字叫做extend的方法中:

function extend(Child, Parent){
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype= new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;
}

//实现继承

extend(TwoDShape, Shape);
extend(Triangle, TwoDShape);

下面看一个完整的例子:

function extend(Child, Parent){
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype= new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;
}

//实现继承

function Shape(){};
Shape.prototype.name = 'Shape';
Shape.prototype.toString = function(){
    return this.constructor.uber ?
        this.constructor.uber.toString() + ', '+ this.name
        : this.name;
};

function TwoDShape() {};
extend(TwoDShape, Shape);
TwoDShape.prototype.name = '2D Shape';


function Triangle(side,height) {
    this.side = side;
    this.height = height;
}

extend(Triangle, TwoDShape);

Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea= function () {
    return this.side * this.height / 2;
};

3.属性拷贝

在构建可重用的继承代码时,我们也可以简单的将父对象的属性拷贝给子对象,参照之前的extend()接口,我们可以创建一个extend2()函数,该函数也可以接收两个构造器函数为参数,并将Parent的原型的所有属性全部拷贝给Child的原型,其中包括方法。因为方法也是一种函数类型的属性。

function extend2(Child, Parent){
    var p = Parent.prototype;
    var c = Child.prototype;
    for (var i in p){
        c[i] = p[i];
    }
    c.uber = p;
}

如此,通过一个简单的循环遍历了函数所接受的所有属性。在之前的示例中,如果子对象主要访问父对象的方法,可以通过设置uber属性来实现。而这里的情况与之前有所不同,由于我们已经完成了对Child原型进行扩展,不需要再去重置Child.prototype.constructor属性,因为它不会再被完全覆盖了,因此在这里,constructor属性所指向的值是正确的。
这种方法只适用于包含基本类型的对象,所有的对象类型(函数与数组)都是不可复制的,因为那他们只支持引用传递。

下面有两个构造器函数Shape()和TwoDShape()。其中,Shape()的原型中包含了一个基本类型属性name,和一个非基本类型属性toString方法:

var Shape = function(){};
var TwoDShape = function(){};
Shape.prototype.name = 'shape';
Shape.prototype.toString = function(){
    return  this.uber
    ? this.uber.toString() + ', ' + this.name
        : this.name;
    
};

如果通过extend()方法来实现继承,name属性既不会是TwoDShape()示例的属性,也不会成为其原型对象的属性,但是子对象依然可以通过继承方式来访问属性。

如果继承是通过extend2来实现的,TwoDShape的原型中就会拷贝获得属于自己的name属性。同样,其中也会拷贝属于自己的toString方法,但这只是已和函数引用,函数本身并没有再次被创建。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值