js中三种不同的继承方式

1. 原型链继承

让父类 作为 子类的 原型对象

思路:是否可以让Student类,Teacther类 来继承People类

查找属性或者方法:优先找构造函数中的属性或者方法,构造函数中没有就去原型中找对应内容

// 人类 (父类)
    function People(name, age, like) {
        this.name = name;
        this.age = age;
        this.like = like;
    }
    People.prototype.move = function () {
        console.log(this.name + "正在走");
    }
    
    // 老师类 (子类)
    function Teacher() { }
    Teacher.prototype = new People("张老师", 32, "羽毛球");//把Teacher的原型 = People实例化对象
    Teacher.prototype.teach = function () {
        console.log("教学");
    }
    var t1 = new Teacher(); //创建教师类实例化对象t1
    console.log(t1);
    console.log(t1.name + t1.age + t1.like); //张老师 32 羽毛球

在这里插入图片描述

原型链继承图:

在这里插入图片描述

原型链继承存在问题:无法对父类的属性进行初始化,所有的对象的所有的属性都是相同的。(继承people类的属性,name,age,like固定)

2. 冒充继承 call

冒充继承存在的问题:无法继承父级原型中的方法

// 人类 (父类) 构造函数
    function People(name, age, like) {
        this.name = name;
        this.age = age;
        this.like = like;
    }
    People.prototype.move = function () {
        console.log(this.name + "正在走");
    }

    // 学生类 (子类) 构造函数
    function Student(name, age, like) {
        //通过call方法,把父类People的this改变指向 = 子类Student的this
        People.call(this, name, age, like); //通过父类People继承了name,age,like属性
    }

    var s1 = new Student("张三", 21, "足球"); // 实例化对象s1
    s1.move(); //报错 无法继承父类原型中的Move方法
    console.log(s1);

在这里插入图片描述

3. 混合继承 (原型链继承+冒充继承)

// 人类 (父类) 构造函数
    function People(name, age, like) {
        this.name = name;
        this.age = age;
        this.like = like;
    }
    People.prototype.move = function () {
        console.log(this.name + "正在走");
    }

    // 原型链继承:把Police原型 = People实例化对象
    Police.prototype = new People();

    //冒充继承call将父级的this=子级的this
    function Police(name, age, like) { // 警察 (子类) 构造函数
        People.call(this, name, age, like);
    }

    var p1 = new Police("李警官", 40, "搏击");
    p1.move();
    console.log(p1);

在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值