JavaScript - 对象访问器

欢迎，有抱负的程序员们！今天，我们将深入探索JavaScript对象访问器的迷人世界。如果你是编程新手，不用担心；我会一步一步地引导你理解这个概念，就像我过去几年里教过无数学生一样。所以，拿起一杯咖啡（或者你最喜欢的饮料），让我们一起踏上这段激动人心的旅程！

JavaScript - Object Accessors

对象访问器属性

在我们深入了解访问器的细节之前，让我们先快速回顾一下对象。在JavaScript中，对象就像容器一样，存储相关的数据和功能。可以把它们看作是现实世界对象的数字版本。例如，一个汽车对象可能有颜色、品牌和速度这样的属性。

现在，访问器属性是一种特殊的属性，它们允许我们以更受控的方式获取或设置值。它们就像我们对象数据的守门人。让我们通过一些例子来进一步探索这个概念。

基本对象示例

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

console.log(car.brand); // 输出: Toyota

在这个例子中，我们直接访问了brand属性。但是，如果我们想要对如何访问或修改这些属性有更多的控制呢？这就是访问器的用武之地！

JavaScript getters

Getters是获取特定属性值的方法。它们允许我们即时计算值，而不仅仅是返回存储的值。让我们看看如何使用getter：

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

console.log(person.fullName); // 输出: John Doe

在这个例子中，fullName是一个getter。它通过组合firstName和lastName来计算并返回全名。注意我们如何像使用属性（person.fullName）一样使用它，而不是像调用方法（person.fullName()）一样。

JavaScript setters

Setters是getters的对立面。它们设置特定属性的值，允许我们在尝试更改属性时执行代码。以下是一个例子：

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 (未改变)

在这个例子中，我们创建了一个带有温度getter和setter的恒温器对象。setter在设置新温度之前检查其是否在可接受范围内。

JavaScript 对象方法与Getters/Setters

你可能会想，“既然我们可以使用普通方法，为什么还要用getters和setters？”这是个好问题！让我们来比较一下：

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

console.log(rectangle.calculateArea()); // 输出: 15
console.log(rectangle.area); // 输出: 15

calculateArea()和area都给我们相同的结果，但getter area看起来和感觉更像一个属性。它更加直观，可以使我们的代码更干净，尤其是在处理计算属性时。

数据质量和安全性

Getters和setters不仅仅是方便；它们还是维护数据质量和安全性的强大工具。它们允许我们：

在设置之前验证数据
即时计算值
控制对内部属性的访问

让我们看一个展示这些好处的例子：

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()定义getters/setters

有时，我们可能想要向现有对象添加getters和setters。我们可以使用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

这种方法在处理不是你自己创建的对象或者当你想要动态添加访问器时特别有用。

使用getters和setters的原因

总结一下，以下是使用getters和setters的主要原因：

原因	描述
数据封装	控制对内部属性的访问
计算属性	即时计算值
数据验证	在设置值之前确保数据完整性
向后兼容	添加新功能而不改变现有代码
清晰的语法	像访问普通属性一样访问计算属性

记住，编程不仅仅是编写功能性的代码，还要编写清晰、可维护和安全的代码。Getters和setters是达成这些目标的强大工具。

那么，伙计们！我们已经一起穿越了JavaScript对象访问器的领域。我希望这个指南对你来说既富有启发性又有趣。记住，熟能生巧，所以不要犹豫，在你自己的代码中尝试这些概念。祝编码愉快！

Credits: Image by storyset