天天看點

reactjs 類的基本知識

總結:

1.類中的構造器不是必須要寫的,要對執行個體進行一些初始化的操作,如添加指定屬性時才寫。

2.如果A類繼承了B類,且A類中寫了構造器,那麼A類構造器中的super是必須要調用的。

3.類中所定義的方法,都放在了類的原型對象上,供執行個體去使用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>1_類的基本知識</title>
</head>
<body>
  <script type="text/javascript" >
    /* 
      總結:
        1.類中的構造器不是必須要寫的,要對執行個體進行一些初始化的操作,如添加指定屬性時才寫。
        2.如果A類繼承了B類,且A類中寫了構造器,那麼A類構造器中的super是必須要調用的。
        3.類中所定義的方法,都放在了類的原型對象上,供執行個體去使用。
    */
    //建立一個Person類
    class Person {
      //構造器方法
      constructor(name,age){
        //構造器中的this是誰?—— 類的執行個體對象
        this.name = name
        this.age = age
      }
      //一般方法
      speak(){
        //speak方法放在了哪裡?——類的原型對象上,供執行個體使用
        //通過Person執行個體調用speak時,speak中的this就是Person執行個體
        console.log(`我叫${this.name},我年齡是${this.age}`);
      }
    }

    //建立一個Student類,繼承于Person類
    class Student extends Person {
      constructor(name,age,grade){
        super(name,age)
        this.grade = grade
        this.school = '尚矽谷'
      }
      //重寫從父類繼承過來的方法
      speak(){
        console.log(`我叫${this.name},我年齡是${this.age},我讀的是${this.grade}年級`);
        this.study()
      }
      study(){
        //study方法放在了哪裡?——類的原型對象上,供執行個體使用
        //通過Student執行個體調用study時,study中的this就是Student執行個體
        console.log('我很努力的學習');
      }
    }

    class Car {
      constructor(name,price){
        this.name = name
        this.price = price
        // this.wheel = 4
      }
      //類中可以直接寫指派語句,如下代碼的含義是:給Car的執行個體對象添加一個屬性,名為a,值為1
      a = 1
      wheel = 4
      static demo = 100
    }
    const c1 = new Car('奔馳c63',199)
    console.log(c1);
    console.log(Car.demo);
  </script>
</body>
</html>