es5原型继承与 es6类继承

es6 的代码无参数

class people{
    constructor(){  //构造函数，填写需要向下继承的属性
        this.name = 'sss'
        this.age = 25
        this.weight = '65kg'
    }
    showage(){ //方法，填写 需要向下继承的方法
        console.log(this.age)
    }
}

class women extends people{  //extends 继承
    constructor(){        ////构造函数，填写需要向下继承的属性
        super();   //当该类 为继承自某一父类的派生类时，必须添加 super();
        this.sex = 'women' 
    }
    showsex(){   //方法，填写 需要向下继承的方法
        console.log(this.name,this.sex)
    }
    showage(){ //覆写，覆盖父类中的方法
        console.log(this.age+11)
    }
}
console.log(new people())
console.log(new women())
new people().showage()
new women().showsex()

es6 有参数继承

class people{
    constructor(name,age,weight){  //构造函数，填写需要向下继承的属性,实例化时需要传参
        this.name = name
        this.age = age
        this.weight = weight
    }
    showage(){ //方法，填写 需要向下继承的方法
        console.log(this.age)
    }
}

class women extends people{  //extends 继承
    constructor(name,age,weight){        ////构造函数，填写需要向下继承的属性
        super(name,age,weight);   //当该类 为继承自某一父类的派生类时，必须添加 super();
        this.sex = 'women' 
    }
    showsex(){   //方法，填写 需要向下继承的方法
        console.log(this.name,this.sex)
    }
    showage(){ //覆写，覆盖父类中的方法
        console.log(this.age+11)
    }
}
console.log(new people('sss',25,'55kg'))
console.log(new women('sss',25,'40kg'))
new people('sss',25,'55kg').showage()
new women('sss',25,'40kg').showsex()

es5 的代码无参数

function person(){ //构造函数  可采用参数变量传入，也可使用常量，向下继承的属性
    this.name = 'sss'
    this.age = 25
    this.weight = '65kg'
}
person.prototype={  //向下继承的方法
    showage:function(){
        console.log(this.age)
    }
}

function womens(){  //构造函数  可采用参数变量传入，也可使用常量，向下继承的属性
    this.sex = 'women'

    // this.name = 'sss'
    // this.age = 25
    // this.weight = '65kg'
}
womens.prototype = {//向下继承的方法
    ...new person(), //继承自person 的常量属性，此处偷懒用了es6 的对象展开
    showsex:function(){    //向下继承的方法
        console.log(this.name,this.sex)
    },
    showage:function(){ //覆写，覆盖继承的showage方法
        console.log(this.age+11)
    }
}

console.log(new person());
console.log(new womens());
new person().showage()
new womens().showsex()

es5 有参数

function person(name, age, weight) {
  //构造函数  可采用参数变量传入，也可使用常量，向下继承的属性
  this.name = name;
  this.age = age;
  this.weight = weight;
}
person.prototype = {
  //向下继承的方法
  showage: function() {
    console.log(this.age);
  }
};
person.prototype.constructor = person; //如果prototype是对象的写法，则需要将原型的构造函数绑定到本身。否则constructor 指向 object

function womens(name, age, weight) {
  //构造函数  可采用参数变量传入，也可使用常量，向下继承的属性
  this.name = name;
  this.age = age;
  this.weight = weight;
  this.sex = "women";
}
//womens.prototype = person.prototype; //继承自 person的方法，这样写实际上是指针的复制，当某一方修改prototype 的时候，都会导致另一方也会被修改

for(var i in person.prototype){
    womens.prototype[i] = person.prototype[i]
}
womens.prototype.showsex = function() {
  //向下继承的方法
  console.log(this.name, this.sex);
};
womens.prototype.showage = function() {
  //覆写，覆盖继承的showage方法，如果person 中没有，则初次定义，如果person中存在，则覆盖
  console.log(this.age + 11);
};

console.log(new person("sss", 25, "55kg"));
console.log(new womens("sss", 25, "40kg"));
new person("sss", 25, "55kg").showage();
new womens("sss", 25, "40kg").showsex();

console.log(person.prototype);
console.log(womens.prototype);

es6中新定义的类实际上是 es5中基于原型继承的语法糖。javascript 依然是一个基于原型继承的语言。

es5原型继承 与 es6类 继承

es5原型继承与 es6类继承