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 依然是一個基於原型繼承的語言。