JS对象属性的属性类型：数据属性和访问器属性
2023-11-25 14:14:58
在探索Vue.js底层实现的奇妙旅程中，我发现JS对象中的属性不仅表面上看起来是简单的键值对，还拥有一个鲜为人知的秘密——它们分为两种类型：数据属性和访问器属性。为了深入理解这种属性类型划分，让我们一起揭开JS对象属性的隐藏面纱。
数据属性：简单明了，一目了然
数据属性是JS对象属性中最常见、最基本的一种类型。就像它的名字所暗示的那样，数据属性简单明了，一目了然，就像一张白纸，上面清晰地写着属性的名称和值。数据属性的创建方式非常简单，直接使用等号赋值就可以了，例如：
const person = {
name: "John",
age: 30,
};
在这个例子中，person对象有两个数据属性：name和age。name属性的值是字符串"John"，age属性的值是数字30。要访问这些数据属性的值，我们只需要使用点号运算符（.）就可以了，例如：
console.log(person.name); // 输出："John"
console.log(person.age); // 输出：30
访问器属性：灵活多变，功能强大
访问器属性是JS对象属性中的一种高级类型，它允许我们对属性值的读取和写入操作进行更精细的控制。访问器属性是由一对getter函数和setter函数组成的，getter函数负责获取属性值，setter函数负责设置属性值。访问器属性的创建方式如下：
const person = {
get fullName() {
return this.firstName + " " + this.lastName;
},
set fullName(value) {
const parts = value.split(" ");
this.firstName = parts[0];
this.lastName = parts[1];
},
};
在这个例子中，person对象有一个访问器属性fullName，它由getter函数和setter函数组成。getter函数负责获取fullName属性的值，它会将firstName和lastName属性的值组合起来，返回一个完整的姓名。setter函数负责设置fullName属性的值，它会将传入的值拆分成firstName和lastName，然后分别赋值给这两个属性。
要访问访问器属性的值，我们仍然可以使用点号运算符（.），例如：
console.log(person.fullName); // 输出："John Doe"
要设置访问器属性的值，我们也使用点号运算符（.），后面跟上等号和新的值，例如：
person.fullName = "Jane Smith";
console.log(person.fullName); // 输出："Jane Smith"
数据属性与访问器属性的比较
数据属性和访问器属性在很多方面都有所不同，这里列举了几个关键的区别：
- 创建方式： 数据属性使用等号赋值创建，访问器属性使用get和set创建。
- 访问方式： 数据属性可以通过点号运算符直接访问，访问器属性可以通过点号运算符访问getter函数和setter函数。
- 控制能力： 数据属性对属性值的读取和写入没有特殊的控制，访问器属性可以通过getter函数和setter函数对属性值的读取和写入进行更精细的控制。
理解访问器属性的意义
访问器属性虽然比数据属性更复杂，但它在某些场景下非常有用。例如，我们可以使用访问器属性来：
- 验证属性值： 在setter函数中，我们可以对传入的值进行验证，如果值不合法，我们可以抛出错误或执行其他操作。
- 计算属性值： 在getter函数中，我们可以根据其他属性的值计算出属性值，从而实现属性值的动态计算。
- 隐藏属性值： 我们可以使用访问器属性来隐藏属性值，从而防止外部代码直接访问这些值。
结语
JS对象属性的属性类型不仅限于数据属性和访问器属性，还有其他一些不太常用的类型，例如Symbol属性。然而，数据属性和访问器属性是最常用的两种属性类型，也是我们最需要掌握的。通过理解这两种属性类型的区别和用途，我们可以编写出更灵活、更强大的代码。
