1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>组合继承</title>
    8. </head>
    10. <body>
    12. </body>
    14. </html>
    15. <script>
    16.     /**
    17.      * 组合继承： 
    18.      *      原型继承 + 构造函数继承
    19.      *      避免了原型 && 构造函数 继承的缺点，融合他们的优点
    20.      * 优点：
    21.      *      可以使用原型上的方法和属性；
    22.      *      实现给父级构造函数传参
    23.      * 缺点：
    24.      *      创建实例的原型上会存在两份属性
    25.      *      父类构造函数调用一次，子类原型实现时候又会调用父类构造函数一次。因此会调用两次
    26.      */
    28.     function Person(name) {
    29.         this.name = name || 'not name';
    30.         this.books = ['html', 'css'];
    32.         Person.prototype.getName = function () {
    33.             console.log(`父级类的方法得到的name：${this.name}`);
    34.         }
    35.     }
    37.     function Adult(name, time) {
    38.         this.time = time
    39.         //  构造函数继承父类 && 传参name属性
    40.         Person.call(this, name);
    41.         Adult.prototype.getTime = function () {
    42.             console.log(this.time);
    43.         }
    44.     }
    46.     Adult.prototype = new Person();
    47.     // 是否设置下面这一行，具体请看65行
    48.     Adult.prototype.constructor = Adult;
    50.     //  子类属性修改后不会影响其他实例
    51.     //  子类的参数可以传递给父类
    52.     let ming = new Adult('小明', 0000);
    53.     let hong = new Adult('小红', 2020);
    54.     ming.books.push('vue')      //  books: (3) ["html", "css", "vue"]
    55.     hong.books.push('react');   //  books: (3) ["html", "css", "react"]
    57.     //  两个构造函数上面都会增加 books 和name属性   可以在增加属性测试
    58.     console.log(ming);
    59.     console.log(hong);
    61.     ming.getTime()    //  0
    62.     hong.getTime()    //  2020
    63.     ming.getName()    //  父级类的方法得到的name：小明
    64.     hong.getName()    //  父级类的方法得到的name：小红
    66.     //  讨论是否设置 constructor 问题   https://www.zhihu.com/question/19951896/answer/13457869
    67.     //  下面假设如果没有设置  Adult.prototype.constructor = Adult
    68.     console.log(Adult.prototype.constructor);   //  ƒ Person(name) {}
    69.     console.log(Person.prototype.constructor);  //  ƒ Person(name) {}
    71.     // 设置上之后  Adult.prototype.constructor = Adult
    72.     console.log(Adult.prototype.constructor);   //  ƒ Adult(name, time) {}
    73.     console.log(Person.prototype.constructor);  //  ƒ Person(name) {}
    74. </script>