JavaScript 高级技巧：Getter/Setter 的妙用与实战

一、什么是getter和setter？

在JavaScript中，getter和setter是特殊的属性存取器（accessor properties），允许开发者通过函数控制对象属性的读取和赋值行为。它们并非直接操作属性值，而是通过“中间层”实现逻辑封装，使得代码更灵活且易于维护。

• Getter：当读取属性时触发，无需加括号调用，例如 obj.prop。
• Setter：当赋值属性时触发，例如 obj.prop = value。

二、 如何定义 Getter 和 Setter？

我们可以使用 Object.defineProperty() 方法或 ES6 的简洁语法来定义 getter 和 setter。以下是两种方法的示例：

使用 Object.defineProperty()

const person = {};

Object.defineProperty(person, 'name', {
    get: function() {
        return this._name;
    },
    set: function(value) {
        this._name = value;
    }
});

person.name = 'Alice'; // 调用 setter
console.log(person.name); // 调用 getter，输出 'Alice'

使用 ES6 简洁语法

class Person {
    constructor(name) {
        this._name = name;
    }

    get name() {
        return this._name;
    }

    set name(value) {
        this._name = value;
    }
}

const person = new Person('Bob');
person.name = 'Charlie'; // 调用 setter
console.log(person.name); // 调用 getter，输出 'Charlie'

三、为什么需要getter和setter？

1. 数据验证与安全性
通过setter可以在赋值前添加验证逻辑，防止非法数据污染对象。例如：

set age(value) {
  if (typeof value !== 'number' || value < 0) 
    throw Error("年龄必须是非负数！");
  this._age = value;
}

2. 封装与计算属性
Getter可以动态计算属性值，例如根据width和height自动计算area：

get area() {
  return this.width * this.height;
}

3. 懒加载：在访问某个属性时，可以延迟计算或加载数据。