JavaScript教程：访问器属性（getter / setter、存取器）-马育民老师

# 介绍

本文介绍 **访问器属性（Accessor Properties）**，也常被叫做 **getter / setter（存取器）**。

这是 **ES5+ JavaScript 原生语法**，不是框架语法！Vue3 响应式、Vue2 数据劫持、对象封装都大量用它。

---

### 名称

1. **最标准：访问器属性**（MDN 官方叫法）
2. **最常用：getter / setter**（开发圈通用叫法）
3. 也可以叫：**存取器属性**

---

# 示例

```javascript
// 定义一个私有变量（模拟内部数据）
let value = '初始值'

// 定义一个带有 访问器属性（getter/setter）的对象
const obj = {
  // getter：获取值时自动执行
  get value() {
    console.log('🔍 有人读取了 value：', value)
    // 这里可以做：依赖收集、日志、计算、权限判断
    return value
  },

// setter：设置值时自动执行
  set value(newVal) {
    console.log('✏️ value 被修改为：', newVal)
    value = newVal
    // 这里可以做：触发更新、数据校验、监听变化
  }
}

// 测试 getter：自动调用 get value()
console.log("值：",obj.value)

// 测试 setter：自动调用 set value()
obj.value = '新的值'

console.log("值：",obj.value)
```

---

### 概念
- **getter（`get 属性名()`）**
  当你**读取对象属性**时自动执行，用来**拦截取值**。

- **setter（`set 属性名()`）**
  当你**修改对象属性**时自动执行，用来**拦截赋值**。

- 合起来叫：**访问器属性 / getter/setter**

### 作用
- 监听数据的读取和修改
- 数据劫持（Vue 响应式核心原理）
- 数据校验
- 计算属性
- 私有变量保护

### 语法规则
- `get` 不能接收参数
- `set` 只能接收**一个参数**（新值）
- 访问器属性**不是普通方法**，不用加 `()` 调用

# 应用场景

### 场景1：监听变量变化（知道数据什么时候被改、什么时候被读）
普通变量：改了就改了，完全没反应。
存取器属性：
- 读取变量时，自动执行 `get`
- 修改变量时，自动执行 `set`

```js
let innerNum = 0
const obj = {
  get num() {
    console.log("数据被读取了");
    return innerNum
  },
  set num(v) {
    console.log("数据被修改了");
    innerNum = v
  }
}
```
**作用**：随时随地监控数据的读写行为。

---

### 场景2：赋值拦截 + 数据校验（禁止非法数据）
修改值之前，先做判断，不符合规则直接拒绝。

```js
let innerAge = 18
const user = {
  get age() {
    return innerAge
  },
  set age(val) {
    // 只允许 0~120 的数字
    if (typeof val !== "number" || val < 0 || val > 120) {
      console.log("输入的年龄不合法");
      return
    }
    innerAge = val
  }
}
```
**作用**：防止乱填数据，保证数据规范。

---

### 场景3：自动加工数据（读取时自动格式化）
不修改原始数据，读取的时候自动处理格式。

```js
let innerPrice = 99
const goods = {
  get price() {
    // 自动拼接货币符号
    return `¥${innerPrice}`
  },
  set price(v) {
    innerPrice = v
  }
}
```
**作用**：原始数据存简单格式，展示时自动美化。

---

### 场景4：自动联动修改（改一个，自动变另一个）
修改一个属性，自动同步更新关联数据。

```js
let _width = 10
let _height = 20
const rect = {
  get area() {
    return _width * _height
  },
  set width(v) {
    _width = v
  }
}
```
**作用**：不用手动计算，关联数据自动同步。

---

### 场景5：封装内部变量，防止乱改
把真实变量隐藏起来，外部不能直接修改，只能通过 `set` 统一修改。
避免外部随意篡改核心数据，代码更安全、好维护。

# 总结
1. **标准名称**：**访问器属性**
2. **常用叫法**：**getter/setter（存取器）**
3. 这是 **JS 原生语法**，不是框架语法
4. 是 Vue、React 等框架**响应式原理的基础**

应用场景总结：

1. **数据监听**：捕获数据的读取和修改行为；
2. **数据校验**：拦截错误、非法的赋值内容；
3. **格式处理**：读取数据时自动格式化、加工内容；
4. **数据联动**：一个数据修改，自动更新关联数据；
5. **数据封装**：保护内部变量，统一管控修改入口。

原文出处：http://malaoshi.top/show_1GW3DMhCI1sX.html