什么是類？

• 在 JavaScript 中，類（class）是用于創(chuàng)建對象的模板或藍(lán)圖，提供了一種更直觀的方式來定義對象的屬性和行為。類允許你定義對象的結(jié)構(gòu)和功能，并通過實(shí)例化類來創(chuàng)建具有相同結(jié)構(gòu)的多個對象。
• 類在 JavaScript 中是隨著 ES6（ECMAScript 2015）引入的，雖然它本質(zhì)上是語法糖（更容易閱讀的語法），但底層仍然利用了 JavaScript 原本基于原型的繼承機(jī)制。

為什么定義類？

• 類提供了一種組織代碼的方式，尤其適合面向?qū)ο缶幊蹋∣OP）的場景。
• 它使代碼更加模塊化、可復(fù)用、可擴(kuò)展。
• 通過類，可以輕松地創(chuàng)建多個對象實(shí)例并管理它們的屬性和行為。

如何定義一個類？

以下是 JavaScript 中定義類的語法：

class 類名 {
    // 構(gòu)造函數(shù)（定義類的屬性）
    constructor(參數(shù)1, 參數(shù)2, ...) {
        this.屬性1 = 參數(shù)1;
        this.屬性2 = 參數(shù)2;
    }

    // 方法（定義類的行為）
    方法名() {
        // 方法邏輯
    }

    // 靜態(tài)方法（直接通過類調(diào)用，無需實(shí)例化）
    static 靜態(tài)方法名() {
        // 方法邏輯
    }
}

// 創(chuàng)建類的實(shí)例
const 實(shí)例 = new 類名(參數(shù)1, 參數(shù)2);

類的用途

• 創(chuàng)建對象的模板：類提供了一種結(jié)構(gòu)化的方式來定義對象的屬性和方法。通過類，可以方便地創(chuàng)建具有相同屬性和行為的多個對象。
• 代碼復(fù)用：類支持繼承（extends），可以通過繼承實(shí)現(xiàn)代碼復(fù)用。
• 模塊化設(shè)計(jì)：通過類組織代碼，使代碼更加清晰、易于維護(hù)。
• 面向?qū)ο缶幊蹋∣OP）：類是 OOP 的核心概念，提供了封裝、繼承、多態(tài)等特性，使代碼更加抽象化和模塊化。
• 用于表示現(xiàn)實(shí)世界中的實(shí)體（如用戶、訂單、產(chǎn)品）
• 用于封裝特定功能或邏輯
• 用于組織和復(fù)用代碼

類中可以包含什么？

1、構(gòu)造函數(shù)（constructor）

• 用于初始化對象的屬性。
• 每個類只能有一個構(gòu)造函數(shù)。
• 構(gòu)造函數(shù)在創(chuàng)建對象時自動調(diào)用。

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

2、實(shí)例屬性

• 在構(gòu)造函數(shù)中通過 this 關(guān)鍵字定義的屬性。
• 每個實(shí)例都有獨(dú)立的實(shí)例屬性。

  class Person {
      constructor(name, age) {
          this.name = name; // 實(shí)例屬性
          this.age = age;   // 實(shí)例屬性
      }
  }

3、實(shí)例方法

• 定義在類中的方法，供實(shí)例調(diào)用。
• 實(shí)例方法的 this 指向調(diào)用它的實(shí)例。

  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、靜態(tài)方法（static）

• 使用 static 關(guān)鍵字定義的方法，直接通過類調(diào)用，無需實(shí)例化。
• 靜態(tài)方法通常用于工具類函數(shù)或無需依賴實(shí)例的數(shù)據(jù)。

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

5、靜態(tài)屬性（實(shí)驗(yàn)特性）

• 使用 static 定義的屬性，直接屬于類，而不是實(shí)例。
• 通常用于存儲類的共享數(shù)據(jù)。

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

6、繼承（extends）

• 通過繼承，可以創(chuàng)建一個基于另一個類的新類。
• 子類會繼承父類的屬性和方法。

  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、私有字段和方法（#）

• 私有字段和方法以 # 開頭，只能在類的內(nèi)部訪問。

  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); // 報(bào)錯: 私有字段無法從外部訪問

完整實(shí)例

以下是一個完整的類的示例：

class Car {
    static totalCars = 0; // 靜態(tài)屬性

    constructor(brand, model, year) {
        this.brand = brand; // 實(shí)例屬性
        this.model = model;
        this.year = year;
        Car.totalCars++; // 增加總數(shù)
    }

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

    // 靜態(tài)方法
    static getTotalCars() {
        return Car.totalCars;
    }
}

// 創(chuàng)建實(shí)例
const car1 = new Car("Toyota", "Corolla", 2020);
const car2 = new Car("Honda", "Civic", 2022);

// 調(diào)用實(shí)例方法
car1.describe(); // 輸出: Toyota Corolla (2020)
car2.describe(); // 輸出: Honda Civic (2022)

// 調(diào)用靜態(tài)方法
console.log(Car.getTotalCars()); // 輸出: 2

總結(jié)

到此這篇關(guān)于javascript語言中類(class)的文章就介紹到這了,更多相關(guān)js中的類class內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論