对象继承训练(2):继承后可以调用父类方法

上节课(http://blog.csdn.net/github_26672553/article/details/54890416),我们做了一个js的简单的继承。

所谓的继承

1、js中并没有类似java或者php一样的类继承
2、仅仅是通过一些『模拟方法』使得看起来好像是继承。因此方法很多,大家可以百度一下。
3、今天我们要实现的是,怎么让子类可以调用父类的方法?

回顾

上节课我们的简单的『继承』
父类

//基类
var BaseNews = function () {
    this.display = function(){
        alert('新闻基类');
    };
}

父类有用一个display方法。
然后我们在Functionprototype上定义了一个名为extends的方法,此方法用来实现所谓的继承。

//给Function进行扩展
Function.prototype.extends = function (className) {
    className.call(this.prototype); //this 指向实例化过后的对象
}

子类SportsNews

var SportsNews = function () {
    //有自己的属性
    this.version = '1.0';
}

注意:此时SportsNews还不是BaseNews的子类,还没有继承父类BaseNews
下面代理来实现所谓的继承:

//扩展SportsNews,实现所谓的继承
SportsNews.extends(BaseNews);

因为我们给Function的原型上添加了extends方法,SportsNews也是Function,所以可以调用extends方法,然后传入BaseNews类,就实现了继承BaseNews类。

我们实例化SportsNews后,发现该类也有了父类BaseNews的display方法

//实例化
var sn = new SportsNews();
sn.display(); //发现确实存在这个方法

继承后可以调用父类的方法

如果我们的子类SportsNews类,也有一个display方法

var SportsNews = function () {
    //有自己的属性
    this.version = '1.0';
    this.display = function(){
        alert('体育新闻');
    };
}

那么实例化SportsNews类后调用display放就是自己的,而不是父类BaseNews的。

var sn = new SportsNews();
sn.display(); //弹出:'体育新闻'

实现我们今天的需求

//给Function进行扩展
Function.prototype.extends = function (className) {
    className.call(this.prototype); //this 指向实例化过后的对象

    //给实例化后的对象的原型上增加一个father对象
    //该对象是父类实例化后的对象
    //所以 xxx.father就是BaseNews类实例化后的对象
    this.prototype.father = new className();
}

注意:我们在extends 方法中给this(实例化后的对象,比如sn)原型(prototype) 上添加的一个属性father ,这个father 就是extends() 传入的类的实例化对象(也就是父类new出来的对象)。

所以,在子类SportsNews调用extends() 继承了父类BaseNews后,子类实例化后的对象就有了father ,也就有了父类中的方法。

//扩展SportsNews,实现所谓的继承
SportsNews.extends(BaseNews);

//实例化
var sn = new SportsNews();
sn.father.display(); //弹出:'新闻基类'

到这里,其实我们已经实现了继承后的子类可以调用父类的方法了。

但是,还有一个小问题,比如

//基类
var BaseNews = function () {
    alert('父类实例化');

    this.display = function(){
        alert('新闻基类');
    };
}

在子类对象调用父类的方法的时候,alert('父类实例化') 会执行2次,相当于初始化了2次父类。我们要稍作修改:

//基类
var BaseNews = function bb() {
    if (this instanceof bb){
        alert('父类实例化');
    }

    this.display = function(){
        alert('新闻基类');
    };
}

这样alert('父类实例化'); 只会执行一次了。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值