JavaScript中class类介绍

在JavaScript中，class 关键字自ES6（ECMAScript 2015）起被引入，作为基于原型的继承的更清晰、更易于理解的语法糖。它允许你通过类（class）和构造函数（constructor）来创建对象，并通过类的方法（methods）和属性（properties）来定义对象的行为和状态。以下是对class的详细介绍和各种示例说明。

基本语法

class ClassName {  
  constructor(props) {  
    // 构造函数，实例创建时自动调用  
    this.property = props;  
  }  
  
  methodName(args) {  
    // 方法，可以访问类的属性和其他方法  
    // ...  
  }  
  
  get propertyName() {  
    // getter，访问属性时使用  
    // ...  
  }  
  
  set propertyName(value) {  
    // setter，设置属性值时使用  
    // ...  
  }  
  
  // 可以使用 static 关键字定义静态方法  
  static staticMethodName(args) {  
    // 静态方法，不需要实例化类就可以调用  
    // ...  
  }  
}

示例

示例 1: 基本类和实例

class Person {  
  constructor(name, age) {  
    this.name = name;  
    this.age = age;  
  }  
  
  greet() {  
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);  
  }  
}  
  
const person1 = new Person('Alice', 30);  
person1.greet(); // 输出: Hello, my name is Alice and I am 30 years old.

示例 2: Getter 和 Setter

class User {  
  constructor(name) {  
    this._name = name;  
  }  
  
  get name() {  
    return this._name.toUpperCase();  
  }  
  
  set name(value) {  
    if (value.length < 3) {  
      throw new Error('Name must be at least 3 characters long');  
    }  
    this._name = value;  
  }  
}  
  
const user = new User('bob');  
console.log(user.name); // 输出: BOB  
  
user.name = 'al'; // 抛出错误  
user.name = 'Alice';  
console.log(user.name); // 输出: ALICE

示例 3: 静态方法

class MathUtils {  
  static add(a, b) {  
    return a + b;  
  }  
  
  static multiply(a, b) {  
    return a * b;  
  }  
}  
  
console.log(MathUtils.add(2, 3)); // 输出: 5  
console.log(MathUtils.multiply(2, 3)); // 输出: 6

示例 4: 继承

class Animal {  
  constructor(name) {  
    this.name = name;  
  }  
  
  speak() {  
    console.log(`${this.name} makes a noise.`);  
  }  
}  
  
class Dog extends Animal {  
  speak() {  
    console.log(`${this.name} barks.`);  
  }  
}  
  
const myDog = new Dog('Buddy');  
myDog.speak(); // 输出: Buddy barks.

在上面的示例中，Dog 类通过 extends 关键字继承了 Animal 类的属性和方法，并且重写了 speak 方法以提供特定于狗的行为。

示例 5: 多态

多态性允许我们以统一的接口来处理不同的对象类型。在JavaScript中，多态性通常通过方法的重写和函数的参数多态性（即函数可以接受不同类型的参数）来实现。

然而，由于JavaScript的动态类型和原型继承机制，多态性在JavaScript中表现得更加自然和灵活。我们不需要显式地声明接口或类型，而是可以基于对象的实际类型来调用方法。

class Shape {  
  draw() {  
    console.log('Drawing a shape...');  
  }  
}  
  
class Circle extends Shape {  
  draw() {  
    console.log('Drawing a circle...');  
  }  
}  
  
class Square extends Shape {  
  draw() {  
    console.log('Drawing a square...');  
  }  
}  
  
function drawShape(shape) {  
  shape.draw(); // 这里体现了多态性：draw方法的具体实现取决于shape的实际类型  
}  
  
const circle = new Circle();  
const square = new Square();  
  
drawShape(circle); // 输出: Drawing a circle...  
drawShape(square); // 输出: Drawing a square...

在这个例子中，drawShape函数接受一个Shape类型的参数，但由于多态性，它可以接受Circle或Square的实例，并调用它们各自的draw方法。这就是多态性在JavaScript中的体现。

这些示例展示了JavaScript中class的基本用法，包括如何定义类、实例化对象、使用getter和setter、定义静态方法以及如何通过继承来扩展类的功能。这些特性使得JavaScript成为一种强大且灵活的面向对象编程语言。