ES6 - 類與繼承

ES6之前的類

1. 函式模擬： 建構函式（首字母大寫），this.property；方法掛在prototype上：

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.showName = function(){
    console.log(this.name);
}
複製程式碼

ES6的類 class

1. 基本語法：

class Person{
    constructor(name,age){ //構造方法，new呼叫的時候，立即執行
        this.name = name;
        this.age = age;
    } //不要逗號
    showName(){
        return this.name;
    }
}
let p1 = new Person('murphy',18);
複製程式碼

2. 注意：
   • class沒有變數提升，必須先定義後使用；
   • 方法名用變數： (react裡受控表單裡會用到）

   let a = 'murphy';
   let b = 'method';
   class Person{
       constructor(){
           ...
       }
       [a+b](){    //使用字串拼接 作為方法名
           console.log(this.name);
       }
   }
   let p1 = new Person;
   p1.murphymethod();
   複製程式碼

   • 關於this：解決了ES5 this指向的問題；
   • class裡面的取值函式getter存值函式setter;常用於封裝相關；
   • 靜態方法： 類自身的方法，前面加關鍵字 static;可以被子類繼承

類的繼承

1. ES6之前：

   function Student (name, skill){
       Person.call(this.name); //繼承屬性
       this.skill = skill;
   }
   Student.prototype = new Person(); // 繼承方法
       
   let stu1 = new Student('murphy','技能');
   複製程式碼

2. ES6 的繼承：

   class Student extends Person{   //就這麼簡單
       constructor(name,skill){
           super(name); //繼承父級屬性和方法；
           this.skill = skill; //新增子類的屬性
       }
       showName(){
           super.showName(); //父類方法的執行
           console.log('子類的showName'); //子類的執行
       }
       showSkill(){    //新增子類的方法
           return `技能是${this.skil}`;
       }
   }
   let stu1 = new Student('murphy','逃學')；
   
   複製程式碼