es6中的class与继承 (二 )

Dear 丶 2022-12-23 11:09 146阅读 0赞

# ***es6中的class与继承 (二 )*** #

### ES5中的继承 （组合继承:原型链继承 + 借用构造函数) ###

##### 一、原型链继承： #####

###### 父类的实例作为子类的原型 ######

## ==================================================== ##

##### 二、借用构造函数继承： #####

###### 在子类内,使用call()调用父类方法,并将父类的this修改为子类的this.相当于是把父类的实例属性复制了一份放到子类的函数内. ######

//父类
    function Persion(name,age){ 
        this.name=name;
        this.age=age;
        this.say=function(){ 
            console.log(`${ this.name} ${ this.age}`);
        }
    }
    Persion.prototype.test=function(){ 
        console.log("我是原型上的方法");
    }
    //子类
    function Women(){ 
        //在子类内,使用call()调用父类方法,并将父类的this修改为子类的this.相当于是把父类的实例
        // 属性复制了一份放到子类的函数内.
        Persion.call(this);
        this.name="child";
        this.age=18;
    }
    var one=new Women();
    one.say();//child 18
    one.test();// 报错 不能继承原型上的方法

## ==================================================== ##

##### 三、 组合继承: #####

###### 既能调用父类实例属性，又能调用父类原型属性 ######

//解决方法，组合是继承，把子类的原型变成父类的实例
    function Persion(name,age){ 
        this.name=name;
        this.age=age;
        this.say=function(){ 
            console.log(`${ this.name} ${ this.age}`);
        }
    }
    Persion.prototype.test=function(){ 
        console.log("我是原型上的方法");
    }
    //子类
    function Women(name,age,sex){ 
        Persion.call(this,name,age);//实现继承的一种方式
        this.sex=sex
    }
    //把Women的原型变成Persion的实例（因为Women的实例能够访问到Women原型上的方法）
    Women.prototype=new Persion();
    
    var c=new Women('tom',20,'女');
    c.say();
    c.test();//成功继承原型上的方法

## ==================================================== ##

### ES6中的 class继承 ###

##### 一、父类（基类） #####

##### 二、子类 #####

##### 三、extends 关键字 #####

//class 相当于es5中构造函数
    //class中定义方法时，前后不能加function，全部定义在class的protopyte属性中
    //class中定义的所有方法是不可枚举的
    //class中只能定义方法，不能定义对象，变量等
    //class和方法内默认都是严格模式
    //es5中constructor为隐式属性
    
    
    //父类
    class People{ 
      constructor(name='wang',age='27'){ 
        this.name = name;
        this.age = age;
      }
      eat(){ 
        console.log(`${ this.name} ${ this.age} eat food`)
      }
    }
    //子类 通过extends 继承父类
    class Woman extends People{  
       constructor(name = 'ren',age = '27'){  
         //继承父类属性
         super(name, age); 
       } 
        eat(){  
         //继承父类方法
          super.eat() 
        } 
    } 
    let wonmanObj=new Woman('xiaoxiami'); 
    wonmanObj.eat();

## ==================================================== ##