Javascript入門-Day8:物件導向

閱讀時間約 11 分鐘

類別(Class)

在 JavaScript 中,ES6 引入了類別(Class)的概念,使得在 JavaScript 中定義和使用類別更加方便。類別定義了對象的特徵(屬性)和行為(方法)。

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

speak() {
console.log(this.name + ' makes a noise.');
}
}

let animal = new Animal('Cat');
animal.speak(); // Cat makes a noise.

建構子(Constructor)

建構子(Constructor)是一個特殊的方法,在創建類的新實例時自動調用。它用於初始化新對象的狀態。

在 JavaScript 中,類的建構子方法名稱固定為 constructor。當使用 new 關鍵字創建類的新實例時,constructor 方法將被自動調用。

以下是一個簡單的 JavaScript 類,演示了如何定義和使用建構子:

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

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

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

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

在這個例子中,Person 類有一個帶有兩個參數的建構子,用於初始化 nameage 屬性。當創建 Person 的新實例時,constructor 方法會自動被調用,並設置對應的屬性值。

值得注意的是,在 JavaScript 中,如果一個類沒有定義自己的建構子,則會隱式地繼承父類的建構子。如果一個類需要進行初始化操作,則應該定義自己的建構子,否則將使用默認的建構子。

公開(Public)

公開成員可以被外部代碼訪問和使用。在 JavaScript 中,所有的成員默認都是公開的,因為 JavaScript 的對象是動態的,可以隨時更改和擴展。

class MyClass {
constructor() {
this.publicField = "public";
}

publicMethod() {
console.log("This is a public method.");
}
}

let obj = new MyClass();
console.log(obj.publicField); // public
obj.publicMethod(); // This is a public method.

私有(Private)

私有成員只能在類的內部訪問,外部代碼無法直接訪問。在 JavaScript 中,可以使用閉包(Closure)來實現私有成員。

class MyClass {
constructor() {
let privateField = "private";

this.getPrivateField = function() {
return privateField;
};
}
}

let obj = new MyClass();
console.log(obj.privateField); // undefined,私有成員無法直接訪問
console.log(obj.getPrivateField()); // private

受保護(Protected)

受保護成員只能在類的內部和子類中訪問,外部代碼無法直接訪問。在 JavaScript 中,可以使用命名慣例來表示受保護成員,但實際上沒有強制性的機制來限制對它們的訪問。

class MyBaseClass {
constructor() {
this._protectedField = "protected";
}
}

class MySubClass extends MyBaseClass {
getProtectedField() {
return this._protectedField;
}
}

let obj = new MySubClass();
console.log(obj._protectedField); // undefined,受保護成員無法直接訪問
console.log(obj.getProtectedField()); // protected

儘管 JavaScript 沒有原生支持訪問修飾符,但通過上述技巧和慣例,開發者仍然能夠模擬類似的行為。

繼承(Inheritance)

JavaScript 支援原型繼承,通過 extends 關鍵字實現繼承。

class Dog extends Animal {
speak() {
console.log(this.name + ' barks.');
}
}

let dog = new Dog('Buddy');
dog.speak(); // Buddy barks.

多型(Polymorphism)

多型是指相同的方法名稱在不同的類別中有不同的實現。在 JavaScript 中,函數重載和方法重載並不是語言的一部分,但可以通過函數的動態特性實現多態。

class Animal {
speak() {
console.log('Animal makes a noise.');
}
}

class Dog extends Animal {
speak() {
console.log('Dog barks.');
}
}

class Cat extends Animal {
speak() {
console.log('Cat meows.');
}
}

let animals = [new Dog(), new Cat()];

animals.forEach(animal => {
animal.speak();
});

封裝(Encapsulation)

封裝是指將數據和方法綁定在一起形成一個單一的單元,並防止外部直接訪問對象的內部狀態。

在 JavaScript 中,封裝可以通過閉包(Closure)、模組化和特定的設計模式(如模組模式和單例模式)來實現。

介面(Interface)

JavaScript 不直接支援介面(Interface)的概念,但可以通過對象結構、註釋和文檔來模擬介面。

class Shape {
constructor() {
if (this.constructor === Shape) {
throw new Error("Abstract classes can't be instantiated.");
}
}

draw() {
throw new Error("Method 'draw()' must be implemented.");
}
}

class Circle extends Shape {
draw() {
console.log('Drawing Circle');
}
}

let circle = new Circle();
circle.draw(); // Drawing Circle

抽象類別(Abstract Class)

JavaScript 不直接支援抽象類別的概念,但可以通過將方法實作為空方法或拋出異常來模擬抽象類別。

靜態類別(Static Class)

JavaScript 不直接支援靜態類別的概念,但可以通過將靜態方法添加到類別上來模擬靜態類別。

class MathUtil {
static add(x, y) {
return x + y;
}

static subtract(x, y) {
return x - y;
}
}

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

列舉(Enumerations)

JavaScript 不直接支援列舉的概念,但可以通過使用常量對象、符號和枚舉模式來模擬列舉。

const Colors = {
RED: 'RED',
GREEN: 'GREEN',
BLUE: 'BLUE'
};

console.log(Colors.RED); // RED

委派(Delegates)

JavaScript 不提供類似 C# 或 Java 中的委派(Delegates)概念。但可以通過函數指針、回呼函數和箭頭函數來實現類似的功能。

Lambda 表達式

Lambda 表達式在 JavaScript 中通常指箭頭函數,它提供了一種簡潔的語法來定義匿名函數。

let add = (a, b) => a + b;
console.log(add(3, 4)); // 7

泛型(Generics)

JavaScript 不提供類似 C# 或 Java 中的泛型(Generics)概念。但可以通過對函數的參數或返回值進行類型檢查和轉換,以達到類似泛型的效果。

反射(Reflection)

JavaScript 不提供內置的反射(Reflection)機制,但可以通過一些內置函數和庫來實現對對象結構和屬性的檢查和操作。

    13會員
    111內容數
    日後將分享關於我的經驗(日常、工作、技術),並期待未來能創造屬於我的宇宙。
    留言0
    查看全部
    發表第一個留言支持創作者!
    Michael楊 的其他內容
    本章節旨在介紹JavaScript中函數的基本結構和使用方法,包括函數聲明、函數表達式、箭頭函數和匿名函數的定義方式,以及函數的呼叫、參數使用和返回值的處理方式。透過了解這些函數的基本概念和用法,可以幫助讀者更靈活地編寫和理解JavaScript代碼。
    本章節主要介紹了JavaScript中的流程控制,包括條件語句(如if、else if、else和三元運算子)和循環結構(如for迴圈、while迴圈等)。同時,也提供了如何使用break、continue和label來控制迴圈的執行。
    了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
    這些章節的目的是為了介紹JavaScript中的各種數據類型,包括基礎類型和物件類型,以及如何將數據從一種類型轉換為另一種類型。此外,還介紹了如何創建自定義類型,以及如何使用JavaScript中的陣列、集合和字典。
    本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
    在本章節中,我們將學習JavaScript的基本語法,包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
    本章節旨在介紹JavaScript中函數的基本結構和使用方法,包括函數聲明、函數表達式、箭頭函數和匿名函數的定義方式,以及函數的呼叫、參數使用和返回值的處理方式。透過了解這些函數的基本概念和用法,可以幫助讀者更靈活地編寫和理解JavaScript代碼。
    本章節主要介紹了JavaScript中的流程控制,包括條件語句(如if、else if、else和三元運算子)和循環結構(如for迴圈、while迴圈等)。同時,也提供了如何使用break、continue和label來控制迴圈的執行。
    了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
    這些章節的目的是為了介紹JavaScript中的各種數據類型,包括基礎類型和物件類型,以及如何將數據從一種類型轉換為另一種類型。此外,還介紹了如何創建自定義類型,以及如何使用JavaScript中的陣列、集合和字典。
    本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
    在本章節中,我們將學習JavaScript的基本語法,包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
    你可能也想看
    Google News 追蹤
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    前言: 雖然前面有些定義還沒有完整的解釋,但還是後面再說吧, 誰想一直看理論啊(摔本子)
    前言: 前一篇講了 JS 的定義,這裡來談談能用它來做什麼, 希望能限制在 500 字以內(這是我看文章的極限,超過字數就會開始分心(?))
    前言: 一直想要把自己的學習筆記整理整理,至少在寫下筆記的時候,也能釐清觀念。 結果拖延到現在,終於要提筆了,不知道能堅持多久(???)。
    Thumbnail
    JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
    Thumbnail
    類別 (class) 是在 ES6 中引入,用來作為建立新物件的模板。它可以將程式碼封裝起來。
    Thumbnail
    在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
    Thumbnail
    專案產生大量又瑣碎的作業做處理,眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來,提供給別人做Excel公式的資料表進行作業。
    Thumbnail
    JavaScript 的關鍵價值 JavaScript 是一種強大且廣泛使用的編程語言,具有許多價值和應用。以下整理 JavaScript 的關鍵價值: 客戶端網頁開發、跨平台開發: JavaScript 是種瀏覽器的語言,可實現動態網頁效果,並通過操作 HTML 和 CSS,使網頁互動性提昇,提供
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    前言: 雖然前面有些定義還沒有完整的解釋,但還是後面再說吧, 誰想一直看理論啊(摔本子)
    前言: 前一篇講了 JS 的定義,這裡來談談能用它來做什麼, 希望能限制在 500 字以內(這是我看文章的極限,超過字數就會開始分心(?))
    前言: 一直想要把自己的學習筆記整理整理,至少在寫下筆記的時候,也能釐清觀念。 結果拖延到現在,終於要提筆了,不知道能堅持多久(???)。
    Thumbnail
    JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
    Thumbnail
    類別 (class) 是在 ES6 中引入,用來作為建立新物件的模板。它可以將程式碼封裝起來。
    Thumbnail
    在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
    Thumbnail
    專案產生大量又瑣碎的作業做處理,眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來,提供給別人做Excel公式的資料表進行作業。
    Thumbnail
    JavaScript 的關鍵價值 JavaScript 是一種強大且廣泛使用的編程語言,具有許多價值和應用。以下整理 JavaScript 的關鍵價值: 客戶端網頁開發、跨平台開發: JavaScript 是種瀏覽器的語言,可實現動態網頁效果,並通過操作 HTML 和 CSS,使網頁互動性提昇,提供