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

本文介绍了JavaScript中四种常见的继承实现:原型链继承、构造继承、组合继承和圣杯模式。每种方式都有其特点,如原型链继承简单但不支持多继承,构造继承能传参但无法复用构造函数,组合继承结合两者优点但存在额外开销,而圣杯模式则尽量减少了对父类原型的影响。理解这些继承机制对于优化JavaScript代码结构至关重要。
摘要由CSDN通过智能技术生成

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
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值