js 实现 set get

在JavaScript中，set 和 get 是两种特殊的函数，它们通常用于定义对象属性的存取器（accessor properties）。这些存取器允许你在获取（get）或设置（set）属性值时执行自定义逻辑。

基础概念

• Getter（获取器）: 当尝试读取属性值时自动调用的函数。
• Setter（设置器）: 当尝试写入属性值时自动调用的函数。

优势

1. 封装: 可以隐藏对象内部的状态，只通过特定的接口暴露必要的功能。
2. 验证: 在设置属性值时可以进行验证，确保数据的有效性。
3. 计算属性: 可以基于其他属性动态计算得出属性值。

类型

• 属性存取器: 使用 get 和 set 关键字定义的属性。
• 方法存取器: 可以通过普通函数实现，但通常使用属性存取器语法更为简洁。

应用场景

• 数据验证: 在设置属性值之前进行检查。
• 日志记录: 记录属性值的变化。
• 计算属性: 根据其他属性动态计算当前属性的值。

示例代码

const person = {
  firstName: 'John',
  lastName: 'Doe',
  
  // Getter for fullName
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  
  // Setter for fullName
  set fullName(value) {
    const parts = value.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1] || '';
  }
};

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

person.fullName = 'Jane Smith';
console.log(person.firstName); // 输出: Jane
console.log(person.lastName);  // 输出: Smith

遇到的问题及解决方法

问题1: Getter 和 Setter 不触发

原因: 可能是因为直接修改了对象的底层属性，而不是通过存取器。

解决方法: 确保总是通过存取器来访问和修改属性。

问题2: Setter 中的逻辑错误

原因: 在设置器中可能包含了错误的逻辑，导致属性值没有正确更新。

解决方法: 仔细检查 setter 中的逻辑，并添加必要的调试信息来追踪问题。

问题3: Getter 返回 undefined

原因: 可能是因为 getter 函数中没有返回任何值。

解决方法: 确保 getter 函数中有明确的返回语句。

总结

使用 set 和 get 可以让我们在JavaScript对象上创建更加灵活和强大的属性。它们不仅提供了数据封装的能力，还允许我们在属性值变化时执行额外的逻辑，如验证和日志记录。正确使用这些特性可以大大提高代码的可维护性和健壮性。