類的宣告以及使用

宣告

先宣告，再訪問 （函式宣告會提升，類宣告不會）

類關鍵字

class YourName {

// 類的主體

}

類運算式

var YourName = class {

/ /類的主體

}

類的實體化

var myUser = new YourName();

構造方法constructor()

constructor 是一種用于創建和初始化class創建的物件的特殊方法

在一個類中只能有一個名為 “constructor” 的特殊方法， （否則報SyntaxError 錯誤）

如果沒有顯式指定構造方法，則會添加默認的 constructor 方法，

如果不指定一個建構式(constructor)方法, 則使用一個默認的建構式(constructor)，

class User {
    constructor(name) {
        		name; // => 'Fundebug'
        		this.name = name;
    		}
}

var user = new User("Fundebug");

類公有域（Public）

都可以訪問該實體欄位，實體方法

class ClassWithPrivateField {
  publicField
}

class ClassWithPrivateMethod {
  publicMethod() {
    return 'hello world'
 }
}

類私有域（Private）

只有定義該私有欄位，方法的類能訪問該欄位，方法

class ClassWithPrivateField {
  #privateField
}

class ClassWithPrivateMethod {
  #privateMethod() {
    return 'hello world'
 }
}

靜態（static）

類（class）通過 static 關鍵字定義靜態方法，不能在類的實體上呼叫靜態方法，而應該通過類本身呼叫，這些通常是實用程式方法，例如創建或克隆物件的功能，

        class ClassWithStaticMethod {

          static staticProperty = 'someValue';
          static staticMethod() {
            return 'static method has been called.';
          }

        }
        
        var StaticMethod = new ClassWithStaticMethod();

        console.log(ClassWithStaticMethod.staticProperty);
        // output: "someValue"
        console.log(ClassWithStaticMethod.staticMethod());
        // output: "static method has been called."

        console.log(StaticMethod.staticProperty);
        //underfind
        console.log(StaticMethod.staticMethod());
        //報錯Uncaught TypeError: StaticMethod.staticMethod is not a function

靜態私有欄位

只有定義靜態私有欄位的類可以訪問該欄位

        class ClassWithStaticMethod {

            static #staticProperty = 'someValue';
            static staticMethod() {
                return ClassWithStaticMethod.#staticProperty;
            }

        }

        var StaticMethod = new ClassWithStaticMethod();

        console.log(ClassWithStaticMethod.staticProperty);
        // underfind
        console.log(ClassWithStaticMethod.staticMethod());
        // someValue

靜態私有方法

靜態私有方法也是在類里面而非實體中呼叫的，和靜態私有欄位一樣，它們也只能在類的宣告中訪問，

        class ClassWithStaticMethod {

            static #staticProperty = 'someValue';
            static #staticMethod() {
                return ClassWithStaticMethod.#staticProperty;
            }

            static staticShow_staticMethod(){
                return ClassWithStaticMethod.#staticMethod()
            }
            Show_staticMethod(){
                return ClassWithStaticMethod.#staticMethod()
            }

        }

        var StaticMethod = new ClassWithStaticMethod();

        console.log(ClassWithStaticMethod.staticShow_staticMethod());
        // someValue
        console.log(StaticMethod.Show_staticMethod());
        // someValue

繼承（extends）

extends關鍵字用于類宣告或者類運算式中，以創建一個類，該類是另一個類的子類

子類可以繼承父類中的公有成員

父類的私有成員不會被子類繼承

//父類
class User {
    name;

    constructor(name) {
        this.name = name;
    }

    getName() {
        return this.name;
    }
}

//子類
class ContentWriter extends User {
    posts = [];
}

//子類實體
const writer = new ContentWriter("John Smith");

//子類可以訪問父類中的公有欄位和方法
writer.name; // => 'John Smith'
writer.getName(); // => 'John Smith'

//同時也有自己的欄位
writer.posts; // => []

super

super關鍵字用于訪問和呼叫一個物件的父物件上的函式

在建構式中使用時，super關鍵字將單獨出現，并且必須在使用this關鍵字之前使用，super關鍵字也可以用來呼叫父物件上的函式

constructor()中的super()

//父類
class Polygon {
  constructor(height, width) {
    this.name = 'Rectangle';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
  get area() {
    return this.height * this.width;
  }
  set area(value) {
    this._area = value;
  }
}


//子類
class Square extends Polygon {
  constructor(length) {
    this.height; // ReferenceError，super 需要先被呼叫！

    // 這里，它呼叫父類的建構式的,
    // 作為Polygon 的 height, width
    super(length, length);

    // 注意: 在派生的類中, 在你可以使用'this'之前, 必須先呼叫super()，
    // 忽略這, 這將導致參考錯誤，
    this.name = 'Square';
  }
}

\

呼叫父類上的靜態方法

super相當于父類

class Rectangle {
  constructor() {}
  static logNbSides() {
    return 'I have 4 sides';
  }
}

class Square extends Rectangle {
  constructor() {}
  static logDescription() {
    
    //super相當于父類 Rectangle
    return super.logNbSides() + ' which are all equal';
  }
}
Square.logDescription(); // 'I have 4 sides which are all equal'