详解js对象中属性的两种类型之数据属性和访问器属性

下面将详细讲解“详解js对象中属性的两种类型之数据属性和访问器属性”的完整攻略。

1. 什么是属性

在Javascript中，一个对象是由多个属性构成的。属性是一个键值对，键是一个字符串，值可以是任何JavaScript数据类型，包括基本类型和对象类型。

2. JavaScript对象中属性的两种类型

JavaScript中，对象的属性可以分为两种类型，分别是数据属性和访问器属性。

2.1 数据属性

数据属性是JavaScript对象中最常见的属性类型。它们包含一个key-value结构，其中key是属性名称，value是属性值。数据属性可以有以下4个描述其行为的特性：

1. configurable：该属性是否可删除和修改描述符。默认为true。
2. writable：该属性是否可写入。默认为true。
3. enumerable：该属性是否可被枚举。默认为true。
4. value：该属性的值。

下面是两个数据属性的示例说明：

let obj = {
  name: '张三',
  age: 25
};

// 获取属性的值
console.log(obj.name); // 输出：'张三'

// 修改属性的值
obj.age = 26;

// 新增属性
obj.sex = '男';

2.2 访问器属性

访问器属性是另一种类型的属性，它不包含值本身，而是提供了一些操作属性值的方法。访问器属性有以下2个特性：

1. configurable：该属性是否可删除和修改描述符。默认为true。
2. enumerable：该属性是否可被枚举。默认为true。

访问器属性有以下两个方法：

• get方法：获取属性的值。
• set方法：设置属性的值。

下面是两个访问器属性的示例说明：

let obj = {
  firstName: '张',
  lastName: '三',
  get fullName () {
    return this.firstName + this.lastName;
  },
  set fullName (val) {
    let arr = val.split('');
    this.firstName = arr[0];
    this.lastName = arr[1];
  }
};

// 获取 fullName 属性的值
console.log(obj.fullName); // 输出：'张三'

// 设置 fullName 属性的值
obj.fullName = '李四';

// 获取 firstName 和 lastName 属性的值
console.log(obj.firstName); // 输出：'李'
console.log(obj.lastName); // 输出：'四'

3. 总结

JavaScript对象中的属性可以分为数据属性和访问器属性两种类型。数据属性包含一个key-value结构，而访问器属性提供了一些操作属性值的方法。了解这两种属性类型的区别，可以更好地理解JavaScript中对象属性的设计思想，进而更好地处理JavaScript中的对象和属性。