Javascript ES6

ES6 繼承

1. 學會定義子類別。(extends 關鍵字)
2. 學會使用 super 關鍵字呼叫父類別建構式。
3. 學會利用已經定義好的子類別物件。

class 子類別名稱 extends 父類別名稱

建立子類別物件: new 子類別名稱()

定義子類別建構式: constructor{ super(); //呼叫父類別建構式 }

子類別物件 同樣擁有 父類別 中定義的屬性和方法

在 子類別 中定義方法，會覆蓋 / 取代 父類別 中的同名方法 car.run(); 子類別物件可以呼叫父類別的方法

定義靜態方法: 在 類別 中定義

• static 方法名稱(參數) { 程式碼 }

呼叫靜態方法: 使用 類別名稱 呼叫

• 類別名稱.方法名稱(參數)

取得原型物件: Object.getPrototypeOf(物件)

null是Object的原型物件

class Car{ constructor(color){this.color=color;} run(){} } // let car =new Car(“green”);

let carProto=Object.getPrototype(car); console.log(carProto);//Car 原型物件 let objProto=Object.getPrototype(carProto); //Object 原型物件 console.log(objProto); let lastOne=Object.getPrototype(objProto); console.log(lastOne);//原形練的終點 null

練習

// 定義子類別
class 子類別 extends 父類別{
   constructor(參數){
      super(參數); // 呼叫父類別的建構式
   }
   sleep(){
    
   }// 子類別的其他方法定義
}


// 這是 Animal 類別，請不要更動
class Animal{
    constructor(name){
        this.name=name;
    }
    sleep(){ //定義sleep 方法
        console.log(this.name+"睡覺");
    }
}
/* 
練習一：
    定義一個 Cat 子類別，繼承 Animal 類別。
    並滿足下方程式碼的操作需求
*/
class Cat extends Animal{
    constructor(name);
    super(name);
 
}
  speak(){
      console.log("喵!喵!");
    }
// 以下 Cat 子類別的操作
let cat=new Cat("小花");
cat.sleep(); // 印出："小花睡覺"
cat.speak(); // 印出："喵!喵!"

/*
練習二：
    定義一個 Dog 子類別，繼承 Animal 類別。
    並滿足下方程式碼的操作需求
*/
class Dog extends Animal{
     constructor(name);
      super(name);// 請在這裡完成 Dog 子類別的定義
}
sleep(hours){
  console.log(this.name+"睡了"+hours+"小時")
}
// 以下 Dog 子類別的操作
let dog=new Dog("小黑");
dog.sleep(3); // 印出："小黑睡了3小時"

// 定義靜態方法 class 類別名稱{ static 靜態方法名稱(參數列表){ 靜態方法中的程式碼 } } // 使用靜態方法 類別名稱.靜態方法名稱(參數資料);

// Geometry 類別提供平面座標系統的數學運算功能
class Geometry{
    // 在這裡定義靜態方法
    static distance(x1,y1,x2,y2){
    let length=Math.sqrt(Math.pow(x2-x1, 2)+Math.pow(y2-y1, 2));
        console.log(length);
    }
}
// 計算座標 (1,1) 和 (4,4) 的直線距離：大約 4.24
Geometry.distance(1,1,4,4);
// 計算線段 (1,2) ~ (3,4) 的斜率：1
Geometry.slope(1,2,3,4);

/*
    以上簡易的幾何計算，使用 JS 內建的 Math 物件，以及公式：
        直線距離：開根號(平方(x2-x1)+平方(y2-y1))
        斜率：(y2-y1)/(x2-x1)

    由於這是程式課程，非數學課程
    若只能寫出靜態方法的骨架，印出訊息，也算過關
*/