• 实现寄生组合继承


    寄生组合继承是一种继承方式,它通过组合使用构造函数继承和原型继承的方式,实现了高效而且正确的继承方式。

    具体实现步骤如下:

    ① 定义一个父类,实现其属性和方法:

    1. function Person(name) {
    2. this.name = name
    3. this.age = 18
    4. }
    5. Person.prototype.sayName = function() {
    6. console.log(this.name)
    7. }

    ② 定义一个子类,通过调用父类构造函数,实现属性的继承:

    1. function Child(name, age) {
    2. // 调用父类的构造函数
    3. // 这里使用了构造函数继承实现了属性的继承
    4. Person.call(this, name)
    5. this.age = age
    6. }

    ③ 将子类的原型指向一个父类的实例,实现方法的继承并避免父类构造函数被调用多次

    1. // Object.create(proto, prop) 创建一个新对象,指定新对象的原型对象
    2. // proto:新创建对象的原型对象
    3. // prop:可选,设置属性及属性描述,默认值:undefined。
    4. Child.prototype = Object.create(Person.prototype)
    5. Child.prototype.constructor = Child

    ④ 在子类的原型上添加子类自己的方法

    1. // 在子类的原型上添加子类自己的方法
    2. Child.prototype.sayAge = function() {
    3. console.log(this.age)
    4. }

    完整代码:

    1. // 定义一个父类,实现其属性和方法
    2. function Person(name) {
    3. this.name = name
    4. this.age = 18
    5. }
    6. Person.prototype.sayName = function() {
    7. console.log(this.name)
    8. }
    9. // 定义一个子类,通过调用父类构造函数,实现属性的继承
    10. function Child(name, age) {
    11. // 调用父类的构造函数
    12. // 这里使用了构造函数继承实现了属性的继承
    13. Person.call(this, name)
    14. this.age = age
    15. }
    16. // 将子类的原型指向一个父类的实例,实现方法的继承并避免父类构造函数被调用多次
    17. // Object.create(proto, prop) 创建一个新对象,指定新对象的原型对象
    18. // proto:新创建对象的原型对象
    19. // prop:可选,设置属性及属性描述,默认值:undefined。
    20. Child.prototype = Object.create(Person.prototype)
    21. Child.prototype.constructor = Child
    22. // 在子类的原型上添加子类自己的方法
    23. Child.prototype.sayAge = function() {
    24. console.log(this.age)
    25. }

    实践:

    1. const child1 = new Child('小草莓', 6)
    2. console.log(child1)
    3. child1.sayName()
    4. child1.sayAge()

  • 相关阅读:
    [要素察觉]C语言六讲:函数
    极客日报:宿华不再担任快手CEO,程一笑接任;微软市值重登全球第一;Bootstrap 4.6.1发布
    ECR - Elastic Container Registry
    搭建GraphQL服务
    代码随想录二刷 |数组 | 螺旋矩阵II
    Vue+SpringBoot打造考研专业课程管理系统
    沉浸式视听体验:全景声技术是如何实现的?
    mysql_my.cnf参数设置说明
    Tomcat下载与安装
    1、cvpr2024
  • 原文地址:https://blog.csdn.net/qq_38290251/article/details/134081760