原型的继承,几种常用的继承方法

bnh# 原型的继承
原型的继承方式有很多多种,今天主要说四种常用的方法

一、 子类原型继承父类的实例(原型链继承)

例:

    function Father(){
            this.firstName="李";
        }
        var father=new Father();
        Father.prototype.lastName="名";
        function Son(){
            this.firstName="张";
            this.sex="男";
        }
        // 子类原型继承父类的实例
        Son.prototype=father;
        var son=new Son();
        console.log(son.firstName,son.lastName,son.sex);

效果图:
在这里插入图片描述
这种继承方式
1.实例既是父类的实例也是子类的实例
2.父类新增原型方法或是原型属性子类都可以访问到。
3.简单易实现。
缺点:
1.无法实现多继承(多继承就是将多个对象和成员交给当前对象);
2.创建子类实例时,无法向父类传参.

二、 在子构造中执行父构造,将this指向本身,拉取父类私有属性(构造继承)

例:

  function Father(name,age,sex){
            this.name=name;
            this.age=age;
            this.sex=sex;
        }
        function Son(name,age,sex,gf){
            // call方法第一个值写this指向
            Father.call(this,name,age,sex)
            this.gf=gf;
        }
        var son=new Son("李飞",20,"男","张晓丽");
        console.log(`${son.name}今年${son.age}岁,性别${son.sex},女朋友叫${son.gf}`);

效果图:
在这里插入图片描述
特点:
1.只继承了父类的构造函数的属性,没有继承父类原型的属性
2.可以实现多继承(多次使用call)
3.可以向父类传参
4.无法实现构造函数的复用(每次都要从新调用)
5.每个新实例都有父类构造函数的副本。

三、 原型链继承和构造继承一起使用(组合继承)

//就是构造继承加一句
Son.prototype=new Father();

特点:
1.可以继承父类原型的属性,可以传参,可以复用。
2.每个新实例引入的构造函数是私有的
3.调用了两次父类构造函数(耗内存)

四、 圣杯模式

 function Father(){
        };
        function Son(){
        }
        // 封装一个可以多次使用的函数
        function inherit(A,B){
            function C(){};//创建中间构造层函数
            C.prototype=A.prototype;
            B.prototype=new C();//把中间构造函数生成的对象付给需要继承的子类
            B.prototype.constructor=B;//指针归位
            B.prototype.uber=A;//定义子类继承自谁
        }
        inherit(Father,Son);//调用函数

特点:
1.由于有中间层的存在,因此父类的原型自始至终都没有受到影响

五、圣杯模式和构造继承一起使用a

(如果这篇文章有什么问题请及时联系我!)

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值