1. 程式人生 > >ES6中。類與繼承的方法,以及與ES5中的方法的對比

ES6中。類與繼承的方法,以及與ES5中的方法的對比

// 在ES5中,通常使用建構函式方法去實現類與繼承

 

 1         // 建立父類
 2         function Father(name, age){
 3          this.name = name;
 4          this.age = age;
 5     }
 6     Father.prototype.show = function(){
 7          console.log(this.name);
 8          console.log(this.age);
 9     }
10 
11     const obj = new
Father('李大師', 30); 12 obj.show(); // 輸出 李大師 30 13 14 // 建立子類,然後讓子類繼承父類 15 function Child(name,age,sex){ 16 //繼承第一句:讓子類例項化的物件具備父類的所有屬性 17 Father.apply(this,arguments); 18 this.sex = sex; 19 } 20 //繼承第二句:讓子類例項化物件具備父類的所有原型方法 21 Child.prototype = Object.create(Father.prototype);
22 23 //繼承第三句:找回丟失的建構函式 24 Child.prototype.constructor = Child; 25 26 Child.prototype.run = function(){ 27 console.log(this.sex) 28 } 29 30 const son = new Child('123', 10, 'boy'); 31 son.show(); // 輸出 123 10 32 son.run(); // 輸出boy

// ES6中,類的實現和繼承非常方便

class SuperClass{
    
//例項化類時預設會執行建構函式 constructor(name,age){ //初始化物件的語句 this.name=name; this.age=age; } //原型方法 show(){ console.log(this.name); console.log(this.age); } } const sup = new SuperClass('super', 20); sup.show(); // 輸出 super 20 class SonClass extends SuperClass{ constructor(name, age, sex){ super(name,age); // name 和 age屬性可以繼承父類 this.sex = sex; // sex 屬性 子類自己定義 } run(){ console.log(this.sex); } } const sonclass = new SonClass('abc', 15, 'girl'); sonclass.show(); // 輸出 abc 15 sonclass.run(); // 輸出 girl