JavaScript 对象属性访问器详解：Getter 与 Setter 的妙用

JavaScript 对象属性访问器详解：Getter 与 Setter 的妙用

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info

前言

在 JavaScript 中，对象属性分为两种类型：数据属性和访问器属性。本文将深入探讨访问器属性（accessor properties）的概念和使用方法，帮助开发者更好地理解和运用这一重要特性。

数据属性与访问器属性

数据属性是我们最常用的对象属性类型，它直接存储值。而访问器属性则不同，它不直接存储值，而是通过 getter 和 setter 方法来定义属性的读取和设置行为。

访问器属性的特点：

• 看起来像普通属性
• 实际上是执行函数
• 提供对属性访问的精细控制

基本语法

访问器属性在对象字面量中使用 get 和 set 关键字定义：

let obj = {
  get propName() {
    // 读取属性时执行的代码
    return this._prop;
  },
  
  set propName(value) {
    // 设置属性时执行的代码
    this._prop = value;
  }
};

实际应用示例

计算属性示例

考虑一个用户对象，包含 name 和 surname，我们需要一个动态计算的 fullName 属性：

let user = {
  name: "John",
  surname: "Smith",
  
  get fullName() {
    return `${this.name} ${this.surname}`;
  },
  
  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

console.log(user.fullName); // "John Smith"
user.fullName = "Alice Cooper";
console.log(user.name); // "Alice"
console.log(user.surname); // "Cooper"

数据验证示例

访问器属性非常适合用于数据验证：

let user = {
  get name() {
    return this._name;
  },
  
  set name(value) {
    if (value.length < 4) {
      console.error("Name must be at least 4 characters long");
      return;
    }
    this._name = value;
  }
};

user.name = "Pete"; // 正常设置
user.name = "Sam";  // 输出错误信息

使用 Object.defineProperty 定义访问器

除了对象字面量，我们还可以使用 Object.defineProperty 方法来定义访问器属性：

let user = {
  name: "John",
  surname: "Smith"
};

Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.name} ${this.surname}`;
  },
  
  set(value) {
    [this.name, this.surname] = value.split(" ");
  },
  
  enumerable: true
});

console.log(user.fullName); // "John Smith"

访问器描述符

访问器属性的描述符与数据属性不同：

• get：读取属性时调用的函数
• set：设置属性时调用的函数
• enumerable：是否可枚举
• configurable：是否可配置

重要限制：一个属性不能同时是访问器属性和数据属性，即不能同时定义 get/set 和 value。

高级应用场景

向后兼容

访问器属性非常适合用于维护代码的向后兼容性。例如，当我们需要改变数据存储方式时：

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;
  
  // 为旧代码提供 age 属性的访问
  Object.defineProperty(this, "age", {
    get() {
      return new Date().getFullYear() - this.birthday.getFullYear();
    }
  });
}

let john = new User("John", new Date(1992, 6, 1));
console.log(john.age); // 计算出的年龄

私有属性约定

虽然 JavaScript 没有真正的私有属性，但开发者通常使用下划线前缀表示内部属性：

let user = {
  get name() {
    return this._name;
  },
  
  set name(value) {
    this._name = value;
  }
};

最佳实践

1. 命名约定：使用下划线前缀表示内部属性
2. 单一职责：保持 getter 和 setter 简单
3. 性能考虑：避免在 getter 中进行复杂计算
4. 错误处理：在 setter 中进行数据验证

总结

访问器属性是 JavaScript 中强大的特性，它允许我们：

• 创建计算属性
• 实现数据验证
• 维护向后兼容性
• 控制属性访问行为

掌握 getter 和 setter 的使用，可以让你的代码更加灵活和健壮。在实际开发中，合理运用访问器属性可以显著提高代码的可维护性和可扩展性。

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info