构造函数继承和ES6类的继承

79 阅读1分钟

ES5 继承 构造函数的继承 子类继承父类属性(会出现引用问题) 如果父类自身属性有复杂数据类型,那么还需要进行深拷贝 父类:

function PersonDad.propotype. (){
    this.name = name;
    this.age = 56;
}
//原型上的方法
PersonDad.propotype.hobby = function(){
        console.log("喜欢象棋");
    }


//子类:可以继承父类原有属性,但无法直接继承原型上的方法
function Son(...args){
        Dad.call(this,...args);//通过改变this指向继承父类属性
        this.height = "178cm";//支持组合继承
        }
        
//利用赋值,解决原型的引用问题
function Link(){}; //创建一个新的构造函数
Link.prototype = Dad.prototype; //将父类的原型对象赋值给新构造函数的原型对象
Son.prototype = new Link();//将新构造函数的实例化对象赋值给子类的原型对象

//还需要把子类原型对象里的固有属性constructor重新指向自己
Son.prototype.constructor = Son;

//此时再重新定义原型方法便不会再引起引用问题,不会改变父类原有属性和方法
Son.prototype.hobby = function(){
            console.log("喜欢篮球");
        }

ES6继承 类的继承 解决了构造函数原型的引用问题,不需要深拷贝,支持组合继承

父类:
class Dad {
    constructor(name, age) { //constructor函数,接收子类传的参数,属性直接写再函数体中
        this.name = name;
        this.age = age;
    }
    //原型方法需要另外写在函数体外
    hobby() {
        console.log("喜欢象棋");
            }
}


子类:
class Son extends Dad{  //关键字extends
    constructor(name,age){  //如果子类没有调用constructor函数,那么子类可以省略super关键字
        super(name,age); //子类有 constructor 那么一定需要调用 super 函数 ,super可以用于传参到父类 ;
        //super 不能直接使用 ,只能在子类构造函数 或者函数里使用
        //super一定需要在使用this之前调用
        this.height = "178cm";
    }
    myhobby(){
        super.hobby();  // 调用父类 hobby方法;
    }
}