介绍
本文介绍 访问器属性（Accessor Properties），也常被叫做 getter / setter（存取器）。
这是 ES5+ JavaScript 原生语法，不是框架语法！Vue3 响应式、Vue2 数据劫持、对象封装都大量用它。
名称
- 最标准：访问器属性（MDN 官方叫法）
- 最常用：getter / setter（开发圈通用叫法）
- 也可以叫：存取器属性
示例
// 定义一个私有变量（模拟内部数据）
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
let innerNum = 0
const obj = {
get num() {
console.log("数据被读取了");
return innerNum
},
set num(v) {
console.log("数据被修改了");
innerNum = v
}
}
作用：随时随地监控数据的读写行为。
场景2：赋值拦截 + 数据校验（禁止非法数据）
修改值之前，先做判断，不符合规则直接拒绝。
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：自动加工数据（读取时自动格式化）
不修改原始数据，读取的时候自动处理格式。
let innerPrice = 99
const goods = {
get price() {
// 自动拼接货币符号
return `¥${innerPrice}`
},
set price(v) {
innerPrice = v
}
}
作用：原始数据存简单格式，展示时自动美化。
场景4：自动联动修改（改一个，自动变另一个）
修改一个属性，自动同步更新关联数据。
let _width = 10
let _height = 20
const rect = {
get area() {
return _width * _height
},
set width(v) {
_width = v
}
}
作用：不用手动计算，关联数据自动同步。
场景5：封装内部变量，防止乱改
把真实变量隐藏起来，外部不能直接修改，只能通过 set 统一修改。
避免外部随意篡改核心数据，代码更安全、好维护。
总结
- 标准名称：访问器属性
- 常用叫法：getter/setter（存取器）
- 这是 JS 原生语法，不是框架语法
- 是 Vue、React 等框架响应式原理的基础
应用场景总结：
- 数据监听：捕获数据的读取和修改行为；
- 数据校验：拦截错误、非法的赋值内容；
- 格式处理：读取数据时自动格式化、加工内容；
- 数据联动：一个数据修改，自动更新关联数据；
- 数据封装：保护内部变量，统一管控修改入口。