JavaScript - 物件存取器

歡迎，有志於成為程序員的各位！今天，我們將深入探索JavaScript物件存取器的精彩世界。如果你是編程新手，別擔心；我會一步步地引導你了解這個概念，就像我這些年來對無數學生所做的一樣。所以，來一杯咖啡（或你喜歡的飲料），讓我們一起踏上這次令人興奮的旅程！

JavaScript - Object Accessors

物件存取器屬性

在深入探討存取器的細節之前，讓我們先快速複習一下物件。在JavaScript中，物件就像是容器，它們包含相關的數據和功能。可以把它們想像成現實世界中的物件數字版。例如，一個汽車物件可能會有顏色、品牌和速度等屬性。

現在，存取器屬性是一種特殊的屬性，它們允許我們以更控制的方式獲取或設置值。它們就像是我們物件數據的看門人。讓我們通過一些例子進一步探索這個概念。

基本物件範例

let car = {
brand: "Toyota",
model: "Camry",
year: 2022
};

console.log(car.brand); // 輸出：Toyota

在這個例子中，我們直接訪問了brand屬性。但是，如果我們想要對我們如何訪問或修改這些屬性有更多的控制，該怎麼辦？這就是存取器的用武之地！

JavaScript 讀取器（Getters）

讀取器是獲取特定屬性值的方法。它們允許我們在飛行中計算值，而不是簡單地返回存儲的值。讓我們看看如何使用讀取器：

let person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
};

console.log(person.fullName); // 輸出：John Doe

在這個例子中，fullName是一個讀取器。它計算並返回全名，通過組合firstName和lastName。注意我們是如何像訪問屬性（person.fullName）一樣使用它，而不是像調用方法（person.fullName()）那樣。

JavaScript 設置器（Setters）

設置器是讀取器的對應部分。它們設置特定屬性的值，當試圖更改屬性時，允許我們執行代碼。以下是一個例子：

let thermostat = {
_temperature: 22, // �慣例：下劃線表示"私有"變量
get temperature() {
return this._temperature;
},
set temperature(value) {
if (value > 30) {
console.log("天氣太熱！");
} else if (value < 10) {
console.log("天氣太冷！");
} else {
this._temperature = value;
}
}
};

thermostat.temperature = 25; // 設置溫度為25
console.log(thermostat.temperature); // 輸出：25

thermostat.temperature = 35; // 輸出：天氣太熱！
console.log(thermostat.temperature); // 輸出：25 (未變)

在這個例子中，我們創建了一個具有溫度讀取器和設置器的調節器物件。設置器在設置新溫度之前會檢查其是否在可接受的範圍內。

JavaScript 物件方法與讀取器/設置器的比較

你可能會想，"我們可以直接使用普通方法，為什麼要用讀取器和設置器呢？" 好問題！讓我們比較一下：

let rectangle = {
width: 5,
height: 3,
// 方法
calculateArea: function() {
return this.width * this.height;
},
// 讀取器
get area() {
return this.width * this.height;
}
};

console.log(rectangle.calculateArea()); // 輸出：15
console.log(rectangle.area); // 輸出：15

calculateArea()和area都給我們相同的結果，但 getter area 看起來和感覺起來更像是一個屬性。它更直觀，並且在我們處理計算屬性時可以使代碼更乾淨。

數據品質和安全性

讀取器和設置器不僅是方便，它們也是維護數據品質和安全性的強大工具。它們允許我們：

在設置之前驗證數據
在飛行中計算值
控制對內部屬性的訪問

讓我們看一個演示這些優點的例子：

let bankAccount = {
_balance: 1000, // "_" 總規則表示"私有"屬性
get balance() {
return `$${this._balance}`;
},
set balance(value) {
if (typeof value === 'number' && value >= 0) {
this._balance = value;
} else {
console.log("無效的餘額輸入");
}
}
};

console.log(bankAccount.balance); // 輸出：$1000
bankAccount.balance = 1500;
console.log(bankAccount.balance); // 輸出：$1500
bankAccount.balance = -500; // 輸出：無效的餘額輸入
console.log(bankAccount.balance); // 輸出：$1500 (未變)

在這個例子中，我們確保餘額永遠是非負數，並在訪問時將其格式化為貨幣。

使用Object.defineProperty()定義讀取器/設置器

有時候，我們可能想要為現有的物件添加讀取器和設置器。我們可以使用Object.defineProperty()來做到這點。以下是如何操作的：

let car = {
brand: "Toyota",
model: "Camry"
};

Object.defineProperty(car, 'fullName', {
get: function() {
return `${this.brand} ${this.model}`;
},
set: function(value) {
[this.brand, this.model] = value.split(' ');
}
});

console.log(car.fullName); // 輸出：Toyota Camry
car.fullName = "Honda Civic";
console.log(car.brand); // 輸出：Honda
console.log(car.model); // 輸出：Civic

這種方法在我們處理非自己創建的物件或想要動態添加存取器時特別有用。

使用讀取器和設置器的理由

總結來說，以下是我們使用讀取器和設置器的主要原因：

原因	描述
數據封裝	控制對內部屬性的訪問
計算屬性	在飛行中計算值
數據驗證	在設置值之前確保數據完整性
向後兼容	無需更改現有代碼即可添加新功能
清晰語法	讀取計算屬性就像訪問普通屬性一樣

記住，編程不僅僅是寫出能夠正常運行的代碼，還要使代碼清潔、可維護和安全。讀取器和設置器是實現這些目標的強大工具。

這就是JavaScript物件存取器的旅程。我希望這份指南對你來說既啟發又有趣。記住，實踐才能熟能生巧，所以不要猶豫，在自己的代碼中試驗這些概念。快樂編程！

Credits: Image by storyset