JavaScript Class 的基础使用

Class 的使用

Class 是 ES6 引入的新语法，用来定义对象，可以用来创建自定义的对象类型。

定义类

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

1. class 关键字声明了一个类。
2. Person 是类名。
3. constructor 方法是类的构造函数，用来初始化类的实例。
4. this.name 和 this.age 是实例属性，用来存储对象的名字和年龄。
5. sayHello 方法是一个实例方法，用来打印对象的信息。

创建实例

const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

person1.sayHello(); // Hello, my name is Alice and I am 25 years old.
person2.sayHello(); // Hello, my name is Bob and I am 30 years old.

1. new 关键字用来创建类的实例。
2. person1 和 person2 是 Person 类的实例。
3. person1.sayHello() 和 person2.sayHello() 调用了 Person 类的 sayHello 方法，打印了对象的信息。

类继承

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old, and I am in grade ${this.grade}.`);
  }
}

const student1 = new Student('Charlie', 20, 3);
student1.sayHello(); // Hello, my name is Charlie and I am 20 years old, and I am in grade 3.

1. Student 类继承了 Person 类。
2. constructor 方法调用了 super 方法，用来初始化父类的属性。
3. sayHello 方法重写了父类的 sayHello 方法，打印了更多的信息。
4. student1 是 Student 类的实例。
5. student1.sayHello() 调用了 Student 类的 sayHello 方法，打印了对象的信息。

静态方法

class Math {
  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
}

console.log(Math.add(2, 3)); // 5
console.log(Math.subtract(5, 3)); // 2

1. Math 类定义了两个静态方法，用来进行加法和减法运算。
2. Math.add(2, 3) 和 Math.subtract(5, 3) 调用了静态方法，并打印了结果。

访问器属性

class Car {
  constructor(make, model, year) {
    this._make = make;
    this._model = model;
    this._year = year;
  }

  get make() {
    return this._make;
  }

  set make(make) {
    this._make = make;
  }

  get model() {
    return this._model;
  }

  set model(model) {
    this._model = model;
  }

  get year() {
    return this._year;
  }

  set year(year) {
    this._year = year;
  }
}

const car1 = new Car('Toyota', 'Camry', 2020);
console.log(car1.make); // Toyota
console.log(car1.model); // Camry
console.log(car1.year); // 2020

car1.make = 'Honda';
car1.model = 'Civic';
car1.year = 2021;

console.log(car1.make); // Honda
console.log(car1.model); // Civic
console.log(car1.year); // 2021

1. Car 类定义了三个访问器属性，用来获取、设置车的制造商、型号和年份。
2. get 和 set 关键字用来定义访问器属性的读写权限。
3. car1 是 Car 类的实例。
4. car1.make、car1.model 和 car1.year 调用了访问器属性的 get 方法，打印了车的制造商、型号和年份。
5. car1.make = 'Honda'、car1.model = 'Civic' 和 car1.year = 2021 调用了访问器属性的 set 方法，修改了车的制造商、型号和年份。
6. car1.make、car1.model 和 car1.year 再次调用了访问器属性的 get 方法，打印了修改后的车的制造商、型号和年份。

实例方法和静态方法的区别

实例方法和静态方法的区别主要在于调用方式和作用域。

• 实例方法：实例方法可以访问实例属性，可以通过 this 关键字访问实例自身。
• 静态方法：静态方法不能访问实例属性，只能访问类属性。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }

  static sayGoodbye() {
    console.log('Goodbye!');
  }
}

const person1 = new Person('Alice', 25);
person1.sayHello(); // Hello, my name is Alice and I am 25 years old.
Person.sayGoodbye(); // Goodbye!

1. Person 类定义了两个方法，一个是实例方法 sayHello，一个是静态方法 sayGoodbye。
2. person1 是 Person 类的实例。
3. person1.sayHello() 调用了实例方法，打印了对象的信息。
4. Person.sayGoodbye() 调用了静态方法，打印了 Goodbye! 信息。

类方法

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }

  static sayGoodbye() {
    console.log('Goodbye!');
  }

  static create(name, age) {
    return new Person(name, age);
  }
}

const person1 = Person.create('Alice', 25);
person1.sayHello(); // Hello, my name is Alice and I am 25 years old.

1. Person 类定义了三个方法，一个是实例方法 sayHello，两个是静态方法 sayGoodbye 和 create。
2. Person.create 方法是一个类方法，用来创建 Person 类的实例。
3. person1 是 Person.create 方法的返回值，是一个 Person 类的实例。
4. person1.sayHello() 调用了实例方法，打印了对象的信息。

私有属性和方法

class Person {
    #name;
    #age;

    constructor(name, age) {
        this.#name = name;
        this.#age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.#name} and I am ${this.#age} years old.`);
    }

    static #create(name, age) {
        return new Person(name, age);
    }
}


const person1 = Person.#create('Alice', 25);
person1.sayHello(); // Hello, my name is Alice and I am 25 years old.

1. Person 类定义了一个私有属性 #name 和 #age，并通过构造函数初始化。
2. sayHello 方法可以访问私有属性 #name 和 #age。
3. Person.#create 方法是一个静态私有方法，用来创建 Person 类的实例。
4. person1 是 Person.#create 方法的返回值，是一个 Person 类的实例。
5. person1.sayHello() 调用了实例方法，打印了对象的信息。

参考

• Class - MDN
• Classes - JavaScript | MDN