JavaScript 類別：初學者指南

你好，未來的 JavaScript 巫師們！今天，我們將踏上一段令人興奮的旅程，探索 JavaScript 類別的世界。別擔心如果你之前從未寫過一行代碼 —— 我將成為你的友好指南，我們會一步步前進。在這個教學的結束時，你將能夠像專家一樣創建自己的類別！

JavaScript - Classes

JavaScript 類別是什麼？

想像你正在建造一個虛擬動物園。你可能不會想為每個動物個別描述，對吧？這就是類別派上用場的地方。類別就像是創建物件的藍圖。它定義了該類型的所有物件應該具有哪些屬性和行為。

讓我們從一個簡單的例子開始：

class Animal {
constructor(name, species) {
this.name = name;
this.species = species;
}

makeSound() {
console.log("這個動物發出了聲音");
}
}

在這個例子中，Animal是我們的類別。這就像是在說："我們動物園中的每個動物都將有一個名字、一個種類，以及發出聲音的能力。"

定義 JavaScript 類別

在 JavaScript 中定義類別，我們使用 class 關鍵字，然後跟隨類別的名稱。類別名稱通常以大寫字母開頭 —— 這不是必需的，但這是一個常見的慣例，有助於區分類別和其他類型的代碼。

constructor() 方法

constructor() 方法是一個特殊的創建和初始化用類別創建的物件的方法。當我們從這個類別創建一個新物件時，它會自動被調用。

class Book {
constructor(title, author, year) {
this.title = title;
this.author = author;
this.year = year;
}
}

在這裡，title、author 和 year 是每個 Book 物件將具有的屬性。this 關鍵字指的是正在被創建的物件。

創建 JavaScript 物件

現在，我們有了我們的類別，來創建一些物件吧！

let myBook = new Book("了不起的蓋茨比", "F. 斯科特·菲茨傑拉德", 1925);
console.log(myBook.title); // 輸出：了不起的蓋茨比

new 關鍵字用於創建我們 Book 類別的新實例。這就像是在說："嘿，JavaScript，請根據這個 Book 藍圖為我創造一本新書！"

JavaScript 類別方法

方法是屬於類別的函數。它們定義了類別物件可以執行的行為。

class Dog {
constructor(name) {
this.name = name;
}

bark() {
console.log(`${this.name} 說：汪汪！`);
}

fetch(item) {
console.log(`${this.name} 抓到了 ${item}`);
}
}

let myDog = new Dog("巴迪");
myDog.bark(); // 輸出：巴迪 說：汪汪！
myDog.fetch("球"); // 輸出：巴迪 抓到了 球

在這個例子中，bark() 和 fetch() 是 Dog 類別的方法。我們創建的每個 Dog 物件都將具有這些能力。

JavaScript 類別的類型

JavaScript 支援兩種主要的類別類型：

宣告：這是我們至今一直在使用的。
```
class Rectangle {
// 類別體
}
```
表達式：類別也可以在表達式中定義。
```
let Rectangle = class {
// 類別體
};
```

兩者都達到相同的效果，但類別宣告更為常見且易於閱讀。

JavaScript 類別提升

與函數宣告不同，類別宣告不會被提升。這意味著在您的代碼中，您不能在類別定義之前使用它。

// 這將會拋出一個錯誤
let p = new Rectangle(); // 參考錯誤

class Rectangle {}

總是在使用它們之前定義你的類別！

與類別一起使用嚴格模式

這裡有一個有趣的知識：類別的體总是執行在嚴格模式下。這意味著什麼呢？這就像有一個嚴格的老師不讓你馬虎代碼。例如：

class StrictClass {
method() {
undeclaredVariable = 5; // 這將會拋出一個錯誤
}
}

在嚴格模式下，你必須在使用前聲明你的變量。這有助於捕獲常見的編碼失誤並保持代碼的乾淨！

類別方法表

這裡有一個方便的表格，列出了一些常見的與類別相關的方法：

方法	描述
`constructor()`	初始化類別的新實例
`static`	為類別定義一個靜態方法
`extends`	創建另一個類別的子類別
`super`	調用父類別的構造函數
`get`	定義一個 getter 方法
`set`	定義一個 setter 方法

結論

恭喜你！你剛剛踏出了進入 JavaScript 類別世界的第一步。記住，就像學習任何新技能一樣，熟能生巧。嘗試創建你自己的類別 —— 也許是一個有 startEngine() 和 drive() 方法的 Car 類別，或者是一個有 useSpecialPower() 方法的 Superhero 類別。

類別是 JavaScript 中的強大工具，讓你可以創建有組織、可重用的代碼。它們就像是編程的樂高積木 —— 狀獨自的時候很簡單，但當它們組合在一起時，能夠建造出令人驚奇的事物。

持續編程，持續學習，在你意識到之前，你將能夠輕鬆地構建複雜的應用程序。快樂編程，未來的開發者！

Credits: Image by storyset