iT邦幫忙

2024 iThome 鐵人賽

DAY 15
0
JavaScript

JavaScript 基礎:端開發的第一步系列 第 15

物件導向基礎

  • 分享至 

  • xImage
  •  

第十五天:物件導向基礎

**物件導向編程(OOP, Object-Oriented Programming)**是一種將程式設計組織成「物件」的方式,而物件可以封裝資料(屬性)和行為(方法)。

1. 什麼是物件?

在 JavaScript 中,物件(Object) 是鍵值對的集合,可以用來存儲多個相關的資料和函數。物件的屬性可以是任何資料類型,方法則是物件的行為,用函數來表示。

範例:
let person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello, my name is " + this.name);
}
};

console.log(person.name); // 輸出 "John"
person.greet(); // 輸出 "Hello, my name is John"

在這裡,person 是一個物件,擁有 name 和 age 這兩個屬性,以及 greet 這個方法。

2. 使用建構函數(Constructor Functions)

在 OOP 中,建構函數(Constructor Functions) 用來創建具有相同結構的物件。我們可以通過它來「建構」新物件。通常,我們會使用 this 關鍵字來定義物件的屬性。

範例:
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log("Hello, my name is " + this.name);
};
}

let person1 = new Person("Alice", 25);
let person2 = new Person("Bob", 40);

person1.greet(); // 輸出 "Hello, my name is Alice"
person2.greet(); // 輸出 "Hello, my name is Bob"

這裡我們通過 Person 建構函數創建了兩個物件,person1 和 person2,每個物件都擁有自己的 name 和 age 屬性。

3. 使用 class 語法

ES6 引入了 class 語法,讓我們能夠更直觀地定義物件和其行為。這是一種簡化的寫法,但實際上仍然基於 JavaScript 的原型(prototype)系統。

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

greet() {
console.log("Hello, my name is " + this.name);
}
}

let person1 = new Person("Charlie", 35);
person1.greet(); // 輸出 "Hello, my name is Charlie"

在這裡,class 語法讓我們定義物件的方式更加簡潔,並且與其他物件導向語言(如 Java、C++)更加相似。

4. 繼承(Inheritance)

繼承是一個 OOP 中的重要概念,允許一個類別繼承另一個類別的屬性和方法,從而減少重複代碼。JavaScript 中可以使用 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.");
}
}

let dog = new Dog("Rex");
dog.speak(); // 輸出 "Rex barks."

這裡,Dog 繼承了 Animal 的屬性和方法,但我們重寫了 speak 方法,讓它具有狗吠的行為。


上一篇
回呼函數
下一篇
物件與陣列的結合
系列文
JavaScript 基礎:端開發的第一步30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言