535 es6 class 類

阿新 • • 發佈：2020-09-16

2.15. class 類

ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為物件的模板。通過 class 關鍵字，可以定義類。

基本上，ES6 的 class 可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的 class 寫法只是讓物件原型的寫法更加清晰、更像面向物件程式設計的語法而已。

知識點：

class 宣告類
constructor 定義建構函式初始化
extends 繼承父類
super 呼叫父級構造方法
static 定義靜態方法和屬性
父類方法可以重寫
class的get、set

// 父類
class Phone {
  // 構造方法
  constructor(brand, color, price) {
    this.brand = brand;
    this.color = color;
    this.price = price;
  }
  // 物件方法
  call() {
    console.log('我可以打電話!!!')
  }
}

// 子類
class SmartPhone extends Phone {
  constructor(brand, color, price, screen, pixel) {
    super(brand, color, price);
    this.screen = screen;
    this.pixel = pixel;
  }
  // 子類方法
  photo() {
    console.log('我可以拍照!!');
  }
  playGame() {
    console.log('我可以玩遊戲!!');
  }
  // 方法重寫
  call() {
    console.log('我可以進行視訊通話!!');
  }
  // 靜態方法
  static run() {
    console.log('我可以執行程式')
  }
  static connect() {
    console.log('我可以建立連線')
  }
}

// 例項化物件
const Nokia = new Phone('諾基亞', '灰色', 230);
const iPhone6s = new SmartPhone('蘋果', '白色', 6088, '4.7inch', '500w');

iPhone6s.playGame(); // 呼叫子類方法
iPhone6s.call(); // 呼叫重寫方法
SmartPhone.run(); // 呼叫靜態方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>類宣告</title>
</head>

<body>
  <script>
    //手機
    function Phone(brand, price) {
      this.brand = brand;
      this.price = price;
    }

    //新增方法
    Phone.prototype.call = function () {
      console.log("我可以打電話!!");
    }

    //例項化物件
    let Huawei = new Phone('華為', 5999);
    Huawei.call();
    console.log(Huawei);

    //class
    class Shouji {
      //構造方法 名字不能修改
      constructor(brand, price) {
        this.brand = brand;
        this.price = price;
      }

      //方法必須使用該語法, 不能使用 ES5 的物件完整形式
      call() {
        console.log("我可以打電話!!");
      }
    }

    let onePlus = new Shouji("1+", 1999);

    console.log(onePlus);
  </script>
</body>

</html>

class的靜態成員

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>靜態成員</title>
</head>

<body>
  <script>
    function Phone() { }
    Phone.name = '手機';
    Phone.change = function () {
      console.log("我可以改變世界");
    }
    Phone.prototype.size = '5.5inch';

    let nokia = new Phone();

    console.log(nokia.name);
    // nokia.change();
    console.log(nokia.size);

    // ---------------------------------

    class Phone2 {
      //靜態屬性
      static name = '手機';
      static change() {
        console.log("我可以改變世界");
      }
    }

    let nokia = new Phone2();
    console.log(nokia.name);
    console.log(Phone.name);
  </script>
</body>

</html>

class的類繼承，子類對父類方法的重寫

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>類繼承-2</title>
</head>

<body>
  <script>
    class Phone {
      // 構造方法
      constructor(brand, price) {
        this.brand = brand;
        this.price = price;
      }
      // 父類的成員屬性
      call() {
        console.log("我可以打電話!!");
      }
    }

    class SmartPhone extends Phone {
      // 構造方法
      constructor(brand, price, color, size) {
        super(brand, price); // Phone.call(this, brand, price)
        this.color = color;
        this.size = size;
      }

      photo() {
        console.log("拍照");
      }

      playGame() {
        console.log("玩遊戲");
      }

      call() {
        console.log('我可以進行視訊通話');
      }
    }

    const xiaomi = new SmartPhone('小米', 799, '黑色', '4.7inch');
    // console.log(xiaomi);
    xiaomi.call();
    xiaomi.photo();
    xiaomi.playGame();
  </script>
</body>

</html>

class 的get 和 set

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>get 和 set</title>
</head>

<body>
  <script>
    // get 和 set  
    class Phone {
      get price() {
        console.log("價格屬性被讀取了");
        return 'iloveyou';
      }

      set price(newVal) {
        console.log('價格屬性被修改了');
      }
    }

    // 例項化物件
    let s = new Phone();
    console.log(s.price); // iloveyou
    s.price = 'free';
    console.log(s.price); // iloveyou


    // 補充
    let temp = 666

    class Phone {
      get price() {
        console.log('get---')
        return temp
      }

      set price(newPrice) {
        console.log('set---')
        temp = newPrice
      }
    }

    const p = new Phone()
    console.log(p.price) // 666
    p.price = 888
    console.log(p.price) // 888

  </script>
</body>

</html>