js继承常见的几种方式

1.原型链继承

function Parent(sex) {
        this.sex = sex ? sex : 'men'
    }
    Parent.prototype.getSex = function() {
        return this.sex
    }
    function Son(name) {
        this.name = name
    }
    Son.prototype = new Parent()
    var son1 = new Son('奥特曼')
    console.log(son1.getSex())

在这里插入图片描述
关键:把子类的原型指向父类的实例,从而继承父类的私有属性和原型属性
优点:父类新增的原型属性和方法,子类实例都能访问的到,简单易用
缺点:1无法实现多继承
2.创建子类实例的时候没办法向父类构造函数传参
3.所有子类共享父类的属性,(比如某个属性是一个数组,一个子类对其进行了修改,导致其他子类访问的也发生改变)

2.借用构造函数的方法师实现

function Parent(sex) {
        this.sex = sex;
    }
    Parent.prototype.getSex = function() {
        return this.sex;
    }

    function Son(sex, name) {
        Parent.call(this, sex)
        this.name = name
    }
    var son = new Son('men', '洛克王国')
    console.log(son)

在这里插入图片描述
关键:在子类的构造函数中使用call 或者apply 调用父类的构造函数实现父类私有属性
优点:1.创建子类实例的时候可以向父类传参
2,可以实现多继承(在子类构造函数中调用多个父类构造函数)
3. 解决了原型链继承中子类实例共享父类实例的引用数据类型属性的问题(即使父类中有引用数据类型,在创建子类实例时,都会重新调用父类的构造函数重新创建一个引用数据类型的属性,并且从新申请地址空间)
缺点:1.每次创建子类的实例都要调用一次父类的构造函数,影响性能
2.自能继承父类的私有属性,没有继承父类的原型

 var son = new Son('men', '洛克王国')
    var son1 = new Son('women', '怪兽')
    console.log(son, son1)
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020091619361187.png#pic_center)

在这里插入图片描述

//组合式继承

function Parent(sex) {
        this.sex = sex;
    }
    Parent.prototype.getSex = function() {
        return this.sex
    }

    function Son(name, sex, age) {
        Parent.call(this, sex)
        this.name = name
        this.age = age
    }
    Son.prototype = Object.create(Parent.prototype)
    Son.prototype.constructor = Son
    var son = new Son('奥特曼', 'men', 12)
    console.log(son)
    console.log(son.getSex())

在这里插入图片描述
关键:通过父类的构造函数,继承父类的属性并保留传参的功能,通过Object.create(Parent.prototype)来创建继承了父类原型的对象,并把这个对象赋给子类的原型,这样既保证了父类构造函数不会执行两次,也继承了父类的原型属性
优点:1.创建子类时可以向父类传参
2.可以实现多继承
3.解决了原型链继承中子类实例共享父类实例的引用数据类型属性的问题(即使父类中有引用数据类型,在创建子类实例时,都会重新调用父类的构造函数重新创建一个引用数据类型的属性,并且从新申请地址空间)
4.父类构造函数只执行一次
在这里插入图片描述

es6class实现继承

class Parent {
        constructor(sex) {
            this.sex = sex;
        }
        showSex() {
            console.log('这是父类的方法')
        }
    }
    class Son extends Parent {
        constructor(name, sex, age) {
            super(sex)
            this.name = name;
            this.age = age
        }
        showSex() {
            console.log('这是子类的方法')
        }
    }

    const b = new Son('奥特曼', 'men', 15)
    console.log(b)
    b.showSex()

关键:使用extends关键字实现继承父类的原型属性,调用super来继承父类的实例属性,其保留传参 的优点
优点:简单易用,不用自己来修改原型链来完成

将其转换成ES5 代码如下

  var Parent = (function() {
        function Parent(sex) {
            this.sex = sex;
        }
        Parent.prototype.showSex = function() {
            console.log('我是父类的方法')
        }
        return Parent
    })()
    var Son = (function(_super) {
        function Son(name, age, sex) {
            var _this = _super.call(this, sex) || this
            _this.name = name
            _this.age = age
            return _this
        }
        Son.prototype.showSex = function() {
            console.log('我是子类的方法')
        }
        return Son;
    })(Parent)
    var son = new Son('奥特曼', 12, 'women')
    console.log(son)
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值