一文详解javascript语言中的类(class)

什么是类？

• 在 JavaScript 中，类（class）是用于创建对象的模板或蓝图，提供了一种更直观的方式来定义对象的属性和行为。类允许你定义对象的结构和功能，并通过实例化类来创建具有相同结构的多个对象。
• 类在 JavaScript 中是随着 ES6（ECMAScript 2015）引入的，虽然它本质上是语法糖（更容易阅读的语法），但底层仍然利用了 JavaScript 原本基于原型的继承机制。

为什么定义类？

• 类提供了一种组织代码的方式，尤其适合面向对象编程（OOP）的场景。
• 它使代码更加模块化、可复用、可扩展。
• 通过类，可以轻松地创建多个对象实例并管理它们的属性和行为。

如何定义一个类？

以下是 JavaScript 中定义类的语法：

class 类名 {
    // 构造函数（定义类的属性）
    constructor(参数1, 参数2, ...) {
        this.属性1 = 参数1;
        this.属性2 = 参数2;
    }

    // 方法（定义类的行为）
    方法名() {
        // 方法逻辑
    }

    // 静态方法（直接通过类调用，无需实例化）
    static 静态方法名() {
        // 方法逻辑
    }
}

// 创建类的实例
const 实例 = new 类名(参数1, 参数2);

类的用途

• 创建对象的模板：类提供了一种结构化的方式来定义对象的属性和方法。通过类，可以方便地创建具有相同属性和行为的多个对象。
• 代码复用：类支持继承（extends），可以通过继承实现代码复用。
• 模块化设计：通过类组织代码，使代码更加清晰、易于维护。
• 面向对象编程（OOP）：类是 OOP 的核心概念，提供了封装、继承、多态等特性，使代码更加抽象化和模块化。
• 用于表示现实世界中的实体（如用户、订单、产品）
• 用于封装特定功能或逻辑
• 用于组织和复用代码

类中可以包含什么？

1、构造函数（constructor）

• 用于初始化对象的属性。
• 每个类只能有一个构造函数。
• 构造函数在创建对象时自动调用。

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

2、实例属性

• 在构造函数中通过 this 关键字定义的属性。
• 每个实例都有独立的实例属性。

  class Person {
      constructor(name, age) {
          this.name = name; // 实例属性
          this.age = age;   // 实例属性
      }
  }

3、实例方法

• 定义在类中的方法，供实例调用。
• 实例方法的 this 指向调用它的实例。

  class Person {
      constructor(name) {
          this.name = name;
      }
  
      greet() {
          console.log(`Hello, my name is ${this.name}`);
      }
  }
  
  const p = new Person("Alice");
  p.greet(); // 输出: Hello, my name is Alice

4、静态方法（static）

• 使用 static 关键字定义的方法，直接通过类调用，无需实例化。
• 静态方法通常用于工具类函数或无需依赖实例的数据。

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

5、静态属性（实验特性）

• 使用 static 定义的属性，直接属于类，而不是实例。
• 通常用于存储类的共享数据。

  class Counter {
      static count = 0;
  
      static increment() {
          this.count++;
      }
  }
  
  Counter.increment();
  console.log(Counter.count); // 输出: 1

6、继承（extends）

• 通过继承，可以创建一个基于另一个类的新类。
• 子类会继承父类的属性和方法。

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

7、私有字段和方法（#）

• 私有字段和方法以 # 开头，只能在类的内部访问。

  class BankAccount {
      #balance = 0;
  
      deposit(amount) {
          if (amount > 0) {
              this.#balance += amount;
          }
      }
  
      getBalance() {
          return this.#balance;
      }
  }
  
  const account = new BankAccount();
  account.deposit(100);
  console.log(account.getBalance()); // 输出: 100
  console.log(account.#balance); // 报错: 私有字段无法从外部访问

完整实例

以下是一个完整的类的示例：

class Car {
    static totalCars = 0; // 静态属性

    constructor(brand, model, year) {
        this.brand = brand; // 实例属性
        this.model = model;
        this.year = year;
        Car.totalCars++; // 增加总数
    }

    // 实例方法
    describe() {
        console.log(`${this.brand} ${this.model} (${this.year})`);
    }

    // 静态方法
    static getTotalCars() {
        return Car.totalCars;
    }
}

// 创建实例
const car1 = new Car("Toyota", "Corolla", 2020);
const car2 = new Car("Honda", "Civic", 2022);

// 调用实例方法
car1.describe(); // 输出: Toyota Corolla (2020)
car2.describe(); // 输出: Honda Civic (2022)

// 调用静态方法
console.log(Car.getTotalCars()); // 输出: 2

总结

到此这篇关于javascript语言中类(class)的文章就介绍到这了,更多相关js中的类class内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论