JS继承-构造函数式继承

来源:互联网 发布:python sftp 断点续传 编辑:IT博客网 时间:2020/02/25 14:17

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);
原创粉丝点击