解析JavaScript对象属性的奥秘：数据属性与访问器属性的博弈

2023-12-21 12:22:22

在JavaScript的世界里，对象无处不在，它们像一个个容器，存储着各种各样的数据和属性。而这些属性也并非千篇一律，它们可以分为两种截然不同的类型：数据属性和访问器属性。

揭开数据属性的神秘面纱

数据属性，顾名思义，就是可以存储和检索数据的属性。它们就像一个个普通的变量，只不过它们属于某个对象。我们可以通过点运算符(.)或中括号([])来访问数据属性。

const person = {
  name: 'John Doe',
  age: 30
};

// 访问数据属性
console.log(person.name); // John Doe
console.log(person['age']); // 30

数据属性还有一个重要的特点：它们是可写的。我们可以通过赋值运算符(=)来修改数据属性的值。

person.name = 'Jane Doe';
console.log(person.name); // Jane Doe

探索访问器属性的奇妙世界

访问器属性则是一种更高级的属性类型。它们允许我们定义getter和setter方法来控制属性的访问和修改。getter方法用于获取属性值，而setter方法用于设置属性值。

const person = {
  _name: 'John Doe', // 私有属性

  // getter方法
  get name() {
    return this._name;
  },

  // setter方法
  set name(value) {
    this._name = value;
  }
};

// 访问访问器属性
console.log(person.name); // John Doe

// 修改访问器属性
person.name = 'Jane Doe';
console.log(person.name); // Jane Doe