1) 读 obj.name 会自动调用 get#

1
let a = obj.name

这里的 obj.name 不是“直接取字段”，而是 触发 getter：

• JS 引擎会自动调用你定义的 get()
• get() 的返回值，就是 obj.name 这次读取的结果
• 所以 a 会拿到 get() 返回的值

2) 写 obj.name = 'abc' 会自动调用 set#

1
obj.name = 'abc'

这会 触发 setter：

• JS 引擎会自动调用你定义的 set('abc')
• 你可以在 set 里做“校验、转换、通知更新”等一系列处理
• 注意：如果你在 set 里没有把值保存到某个地方（比如内部变量/另一个字段），那之后 get 可能读不到你想要的值

3) “创建 name 的时候就赋值”是什么意思？#

这里要区分两种定义方式：

A. 普通属性（数据属性）#

1
obj.name = 'tom'

这是普通数据属性，没有 get/set，读写就是直接取值/改值。

B. 访问器属性（有 get/set）#

访问器属性本身不存 value，它只是一对函数入口。 所以你不能这样写：

1
Object.defineProperty(obj, 'name', {
2
  value: 'tom',   // ❌ 和 get/set 不能共存
3
  get(){}, set(){}
4
})

如果你想“定义时就有初始值”，正确方式是把值存到别的地方，例如闭包变量或 _name：

闭包变量版（最直观）

1
let innerName = 'tom'
2
Object.defineProperty(obj, 'name', {
3
  get() { return innerName },
4
  set(v) { innerName = v }
5
})

或 用另一个字段存（Vue2 常见）

1
obj._name = 'tom'
2
Object.defineProperty(obj, 'name', {
3
  get() { return this._name },
4
  set(v) { this._name = v }
5
})

4) “name 的值依然要靠 get 才能得到吗？”#

如果 name 是访问器属性（有 get/set）：

• 是的，任何读取 obj.name 的动作都会走 get()
• 你所谓的“值”其实是存放在 innerName 或 obj._name 之类的位置
• get() 只是负责把那个“真实存储的值”返回出来（或者返回一个计算结果）

一句话：

• 定义了 getter/setter 后，obj.name 就变成“函数调用的语法糖”：读=调 get，写=调 set。
• 初始值要存到别处（闭包/_name），否则 getter 没东西可返回。

函数签名（3 个参数）#

1
Object.defineProperty(target, propertyKey, descriptor)

参数 1：target#

• 要被“定义属性”的那个对象
• 例：const obj = {}; Object.defineProperty(obj, ...)

参数 2：propertyKey#

• 属性名（字符串或 Symbol）
• 例：'name'、Symbol('id')

参数 3：descriptor（属性描述符对象）#

决定这个属性：

• 值是什么/怎么取值（value 或 get）
• 能不能改（writable / 有没有 set）
• 能不能遍历出来（enumerable）
• 能不能再次被 redefine / 能不能 delete（configurable）

descriptor 分两大类（重点）#

descriptor 只能二选一：

A. 数据属性（data descriptor）#

用 value + writable 描述“存储值的属性”：

1
Object.defineProperty(obj, 'a', {
2
  value: 1,
3
  writable: true,
4
  enumerable: true,
5
  configurable: true
6
})

字段含义：

• value：属性值
• writable：能否 obj.a = ... 改值
• enumerable：能否被 Object.keys / for...in 遍历出来
• configurable：能否 delete obj.a、能否再次 defineProperty 改描述符

B. 访问器属性（accessor descriptor）#

用 get + set 描述“读写时执行函数”的属性（Vue2 用这个）：

1
let inner = 1
2
Object.defineProperty(obj, 'a', {
3
  get() { return inner },
4
  set(v) { inner = v },
5
  enumerable: true,
6
  configurable: true
7
})

字段含义：

• get()：读取 obj.a 时调用，返回值就是 obj.a 的结果
• set(v)：给 obj.a = v 赋值时调用
• enumerable / configurable：同上

注意：value/writable 不能和 get/set 同时存在，否则会报错。

默认值（很多人踩坑）#

如果你没写：

• enumerable 默认 false（遍历不到）
• configurable 默认 false（不能 delete、也不能再改描述符）
• 数据属性的 writable 默认 false（不能改） 所以很多时候你 define 完发现：
• Object.keys(obj) 没它 → 因为没设 enumerable:true
• 想再 define 一次改规则失败 → 因为 configurable:false

返回值 & 作用#

• 返回值：返回 target（也就是第一个参数对象）
• 作用：在对象上“精确定义/改造”一个属性

和 Vue2 响应式怎么对应（你现在学的核心）#

Vue2 会对 data 里的每个 key 用 defineProperty 包一层：

• get：谁读取了这个值，就把“谁”记录下来（依赖收集）
• set：值一变，通知所有依赖它的地方更新（派发更新）

如果你把你截图里那段 Vue2 源码（或你笔记里的 defineReactive 那段）贴出来，我可以按它的每个参数、每一行逻辑逐句讲清楚它是怎么把 get/set 接到“更新视图”的。