2020前端复习-js部分-类的继承

93 阅读2分钟

JS继承

类:封装,继承,多态

  1. 封装:类也是个函数,把实现一个功能代码进行封装,以此实现低耦合高内聚
  2. 多态:重载,重写
    1. 重写:子类重写父类上的方法(伴随着继承运行)
    2. 重载:相同的方法,由于参数或者返回值不同,具备了不同的功能(js中不具备严格意义上的重载,js的重载:同一个方法,根据传参不同实现不同的功能)
  3. 继承:子类继承父类中的方法
function fn(x,y){
    if(y===undefined){
        ....
    } else {
        ...
    }
}

js中的继承和其他语言继承不同

继承的目的:让子类的实例同事也具备父类中私有的属性和公共的方法

  1. 原型继承(子类的原型等于父类的实例)
    1. Child.prototype = new Parent;子类的原型指向父类的实例
    2. 父类中私有的和公有的属性方法,最终都变为子类实例公有的
    3. 和其他语言不同,原型继承并不会把父类的属性方法拷贝给子类,而是让子类实例基于__proto__原型链找到自己定义的属性和方法:‘指向、查找’方式
    4. c1.proto.xxx=xxx 修改子类原型(原有父类中的一个实例)中的内容,内容被修改后,对子类的其他实例有影响,但是对父类的实例不会有影响
    5. c1.proto.proto.xxx=xxx 直接修改的是父类原型,这样不仅会影响其他弗雷德实例,也影响其他子类的实例
function Parent(){
    this.x =100;
}
Parent.prototype.getX = function getX(){
    return this.x;
}
function Child(){
    this.y = 200;
}
Child.prototype = new Parent;
Child.prototype.getY = function getY(){
    return this.y;
}
let c1 = new Child;
console.log(c1);
  1. call继承
    1. 只能继承父类中私有的,不能继承父类中公有的
    2. 把父类私有的变为子类私有的
  2. 寄生组合式继承(call继承+另类原型继承)
function Parent(){
    this.x =100;
}
Parent.prototype.getX = function getX(){
    return this.x;
}
function Child(){
    //在子类构造函数中,把父类当做普通方法执行(没有父类实例,父类原型上的那些东西也就和他没有关系了)
    //this->Child的实例c1
    Parent.call(this);//this.x=100相当于强制给c1这个实例设置一个私有的属性x,属性值100,相当于让子类的实例继承了父类私有的属性,并且也变为子类私有的属性‘拷贝式’
    this.y = 200;
};
//Child.prototype.__proto__ === Parent.prototype;
//Object.create:创建一个空对象,让其原型链指向括号里的参数
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
Child.prototype.getY = function getY(){
    return this.y;
}
let c1 = new Child;
console.log(c1);

ES6中创建类和继承

class Parent{
    constructor(){
        this.x=100;
    }
    //Parent.prototype.getX=function....
    getX(){
        return this.x
    }
}
//继承 extends Parent(类似于寄生组合继承)
// 继承后,一定要在constructor第一行加上super()
class Child extends Parent{
    constructor(){
        super();//类似于之前的call继承,super(100,200),相当于把Parent中的constructor执行,传递了100和200;
        this.y=200;
    }
    getY(){
        return this.y;
    }
}
Child();//Error:es6中创建的是类,不能当做普通函数执行,只能new执行
let c1= new Child;
console.log(c1);