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.      *      想实现继承必须 new 父级构造函数
    23.      *      创建的子类实例 无法向父类传参
    24.      *      无法实现多继承
    25.      *      来自父级的所有`引用类型`都是共享的
    26.      */
    27.     function Language() {
    28.         this.arr = ['html', 'css'];
    29.         this.str = '123'
    30.     };
    31.     function Css(){
    32.         this.css = 'css'
    33.     }
    36.     //  多继承只能继承最后一个    无法给父级传参
    37.     JavaScript.prototype = new Css()
    38.     JavaScript.prototype = new Language();
    39.     function JavaScript(val) {
    40.         this.val = val;
    41.         JavaScript.prototype.get = function (val) {
    42.             console.log(val);      //  get fun
    43.             console.log(this.val);  //  this.val
    44.         }
    45.     }
    47.     const js1 = new JavaScript('this.val');
    48.     const js2 = new JavaScript();
    50.     //  这样直接修改Language上面的属性，会导致在其他实例中的同属性也会被修改掉
    51.     //  父级属性·引用类型·共享
    52.     console.log(js1.arr);   //  (2) ["html", "css"]
    53.     console.log(js2.arr);   //  (2) ["html", "css"]
    54.     js1.arr.push('JavaScript')
    55.     console.log(js1.arr);   //  (3) ["html", "css", "JavaScript"]
    56.     console.log(js2.arr);   //  (3) ["html", "css", "JavaScript"]
    57.     //  基本类型不共享
    58.     js1.str = 333;
    59.     console.log(js1.str);   //  33
    60.     console.log(js2.str);   //  '123'
    62.     js1.get('get fun')
    64.     //  无法实现多继承  根据上面案例只能继承 Language 无法继承 Css
    65.     console.log(js1.css);  //   1.1实例继承.html:70 undefined
    66. </script>