JavaScript 中类的使用(笔记)

1. 类的基本定义

class Person {
    // 构造函数
    constructor(name, age) {
        this.name = name;  // 成员变量
        this.age = age;
    }

    // 类方法
    printInformation(){
    	console.log(`name: ${this.name}; age: ${this.age}`);
    }
}

var person = new Person("Micheal", 18);
console.log(person.name, person.age);  // Micheal 18
person.printInformation();  // name: Micheal; age: 18

• 带默认参数的构造函数

  class Person {
      // 带默认参数的构造函数
      constructor(name, age=18) {
          this.name = name;  // 成员变量
          this.age = age;  // age 的默认值为18
      }
  }
  
  var person1 = new Person("Micheal");
  console.log(person1.name, person1.age);  // Micheal 18
  
  var person2 = new Person("Tom", 20);
  console.log(person2.name, person2.age);  // Tom 20

2. 类的成员变量

• 公有成员变量：

  class Person {
      // 带默认参数的构造函数
      constructor(name, age=18) {
          this.name = name;  // 默认为公有成员变量
          this.age = age
      }
  
      score = 80;  // 公有类成员变量，使用 this.score 方法调用
  
      // 类方法
      printInformation(){
      	console.log(`name: ${this.name}; age: ${this.age}; score: ${this.score}`);
      }
  }
  
  var person = new Person("Micheal");
  console.log(person.name, person.age, person.score);  // Micheal 18 80
  person.printInformation();  // name: Micheal; age: 18; score: 80

• 私有成员变量：

  class Person {
      // 带默认参数的构造函数
      constructor(name, age=18) {
          this.name = name;  // 默认为公有成员变量
          this.age = age
      }
  
      #score = 70; // 私有成员变量(使用#开头)，使用 this.#score 方法调用
  
      // 类方法
      printInformation(){
          console.log(`name: ${this.name}; age: ${this.age}; score: ${this.#score}`);
      }
  }
  
  var person = new Person("Micheal");
  console.log(person.name, person.age);  // Micheal 18
  // console.log(person.#score);  // error; 不可访问类内的私有变量
  person.printInformation();  // name: Micheal; age: 18; score: 70

• 静态成员变量：

  class Person {
      // 带默认参数的构造函数
      constructor(name, age=18) {
          this.name = name;  // 默认为公有成员变量
          this.age = age
      }
  
      static score = 90; // 静态成员变量(使用static 开头)，使用 类名.变量名 调用
  
      // 类方法
      printInformation(){
          console.log(`name: ${this.name}; age: ${this.age}; score: ${Person.score}`);
      }
  }
  
  var person = new Person("Micheal");
  console.log(person.name, person.age);  // Micheal 18
  console.log(person.score, Person.score);  // undefined 90
  person.printInformation();  // name: Micheal; age: 18; score: 70

3. 类的成员方法

• get 和 set 方法

  class Person {
      // 带默认参数的构造函数
      constructor(name, age=18) {
          this.name = name;  // 默认为公有成员变量
          this.age = age
      }
  
      // get method
      get myage() {
          return this.age;
      }
  
      // set method
      set myage(age) {
          this.age = age;
      }
  
  }
  
  var person = new Person("Micheal");
  console.log(person.name, person.age);  // Micheal 18
  
  // 直接改变量
  person.age = 20;
  console.log(person.name, person.age);  // Micheal 20
  
  // 使用 set 方法改变量
  person.myage = 30;
  person.myage(50);  // error； Uncaught TypeError: person.myage is not a function
  console.log(person.name, person.age);  // Micheal 30
  
  // 使用 get 方法获取变量
  console.log(person.myage);  // 30
  console.log(person.myage());  // error, Uncaught TypeError: person.myage is not a function

• 公有方法

  class Person {
      // 带默认参数的构造函数
      constructor(name, age=18) {
          this.name = name;  // 默认为公有成员变量
          this.age = age
      }
  
      method1(para1, para2, para3="default avlue"){
          console.log(para1, para2, para3);
      }
  
      method2 = function(para1, para2=0){
          console.log(para1, para2);
          return para1 + para2;
      }
  
  }
  
  var person = new Person("Micheal");
  
  person.method1(1, 2); // 1 2 'default avlue'
  person.method1(1, 2, 3); // 1 2 3
  
  person.method2(1);  // 1 0
  person.method2(1, 2); // 1 2

• 私有方法

  class Person {
      // 带默认参数的构造函数
      constructor(name, age=18) {
          this.name = name;  // 默认为公有成员变量
          this.age = age
      }
  
      // 私有方法， 以 # 开头
      #method1(para){
          console.log("调用了私有方法", para);
      }
  
      method2(){
          this.#method1("123");
      }
  }
  
  var person = new Person("Micheal");
  
  // person.#method1(1); // error, Uncaught SyntaxError
  person.method2();  // 调用了私有方法 123

• 静态方法: 静态方法调用直接在类上进行，不能在类的实例上调用。

  class Person {
      // 带默认参数的构造函数
      constructor(name, age=18) {
          this.name = name;  // 默认为公有成员变量
          this.age = age
      }
  
      // 公有方法
      method2(){
          console.log("公有方法");
      }
  
      // 静态方法, 采用 类名.方法名调用
      static method3(para){
          console.log("调用了静态方法", para);
      }
  }
  
  var person = new Person("Micheal");
  person.method2();  // 调用了私有方法 123
  
  // person.method3();  // error, Uncaught TypeError
  Person.method3("123");  // 调用了静态方法 123

4. 类的静态区域

class MyClass {
    static field1 = console.log("static field1");
    // 静态代码块
    static {
        console.log("static block1");
    };
    static field2 = console.log("static field2");
    static {
        console.log("static block2");
    };
}

// 执行顺序
// 'static field1'
// 'static block1'
// 'static field2'
// 'static block2'

5. 类的继承

class Rect{
    constructor(width, height){
        this._width = width;
        this._height = height;
    }

    area(){
        return this._width * this._height;
    }

    discribe(){
        console.log(`宽：${this._width}; 高：${this._height}`);
    }

    rectMethod(){
        console.log("矩形类的特有方法");
    }
}

class Square extends Rect{
    constructor(length){
        super(length, length);
        this._length = length;
    }

    area(){
        return this._length * this._length;
    }

    discribe(){
        super.discribe();  // 调用父类方法
        console.log(`边长为: ${this._length};`);
    }

    squareMethod(){
        console.log("正方形类的特有方法");
    }
}

var r = new Rect(2, 3);
console.log(r.area()); // 6
r.discribe();  // 宽：2; 高：3

var s = new Square(5);
console.log(s.area());  // 25
s.discribe();  // 宽：5; 高：5  \n 边长为: 5; 边长为: 5;
s.rectMethod();  // 矩形类的特有方法
s.squareMethod();  // 正方形类的特有方法