JS继承-构造函数式继承

ES5

// 定义: 在子类的构造函数中, 把父类当成一个普通函数进行调用
//1, 声明父类
    function SuperClass(id) {
        this.books=["js","vue","angular"];
        this.id=id;
    }
    SuperClass.prototype.showBooks=function () {
        console.log(this.books);
    }
    //2, 声明子类
    function SubClass(id) {
        //调用父类
        SuperClass.call(this,id);
    }
    //3, 测试
    var instance=new SuperClass(10);
    var instance2=new SubClass(11);

    instance.books.push("design pattern");
    console.log(instance.books);
    console.log(instance2.books);

    console.log("--------------");
    //instance2.showBooks();  子类实例没有父类原型中的方法
    //4, 导致的问题
    //子类实例没有父类原型中的方法.
    //5, 解决方案
    // 类式继承和构造函数继承结合起来
    // 类式继承解决拥有父类原型方法的问题.
    // 构造函数继承解决子类共有父类引用类型属性问题.
    // 前提是 父类原型中不能有引用类型属性了.

ES6

    //父类
    class SuperClass2{
        constructor(id){
            this.books=["js","vue","angular"];
            this.id=id;
            this.name="hyylsw";
        }
        showBooks(){
           console.log(this.books);
        }
    }
     //子类

    //super说明:
    //一, super作为函数调用时.
    //1, super作为函数调用时, 代表父类的构造函数,
    //2, 子类构造函数中调用父类的构造函数
    //3, 这时super内部的this指向的是子类.
    //4, 综上得出, 子类会拥有父类的实例属性.
    //5, 可以在super()之后,再设置子类与父类同名的属性, 从而可以覆盖从父类继承的实例属性.
    //6, 子类从父类继承的实例属性,属于深复制.

    //二,super作为对象时,
    //1, 在普通方法中, 指向父类的原型对象.
    //2, 在静态方法中,指向父类.
    class SubClass2 extends SuperClass2{
        constructor(id){
            super();//相当于: SuperClass2.prototype.constructor.call(this);
            this.id=id;
            this.books=["js","go","python"];
        }
    }
    let sup=new SuperClass2(10);
    let sub=new SubClass2(11);

    sub.books.push("design pattern");
    console.log(sup.books);
    console.log(sub.books);