共计 1612 个字符，预计需要花费 5 分钟才能阅读完成。
可以说 defineProperty 是被 mvvm 框架激活的，虽然 es5 就有了但说实话了解和用的人不多
下边我们来具体聊聊先从 defineProperty 开始说起
defineproperty 操作 object 属性
//defineproperty 有个定义 object 属性的功能，应该没几个人用，因为相对于 obj,a = 1 这种方式简直不能再难用。
// 通常我们定义 obj 属性
let obj = {
a:1
}
obj.b = 2
obj[‘c’] = 3
console.log(obj)//{a: 1, b: 2,c: 3}
Object.defineProperty(obj,’d’,{
value: 4
})
console.log(obj)//{a: 1, b: 2,c: 3,d:4} //defineProperty 可以定义对象属性
// 也可以修改
Object.defineProperty(obj,’b’,{
value: 5
})
console.log(obj)//{a: 1, b: 5, c: 3, d: 4}
// 对你没看错 defineProperty 有这个功能，不知可以定义新的属性还可以修改，这么逆天难用的功能为什么还要造出来？说这个有什么用？别急往下看
descriptor 详解
defineProperty 接收三个参数
object（必须有 操作的对象本身 这个很容易理解不传它操作谁？）
propertyname (必须有 属性名 添加修改属性得有属性名)
descriptor（必须有 官方说的我理解不了，我理解的是 属性描述 1、简单点就是 设置属性的值 value，2、是否可操作属性值 writable，3、是否可修改配置 configurable 如果值为 false descriptor 内的属性都不可操作）4、是否可枚举 enumerable
*descriptor 内配置可有可无，value 默认 undefind，其余默认为 false
先做了介绍我们下边来证明下
writable
// 栗子还是这个栗子
let obj = {
a: 1
}
Object.defineProperty(obj, ‘b’, {
value: 2,
writable: false// 不可修改
})
obj.b = 3
console.log(obj) //{a: 1, b: 2} 还真是不可以
// 难道是姿势不对？
Object.defineProperty(obj, ‘b’, {
value: 3
})
console.log(obj)//{a: 1, b: 2} 一样的效果 和姿势无关。
configurable
//configurable 这个比较厉害 控制 descriptor 内属性都不可改变不知道是不是真的
// 还是这个栗子
let obj = {
a: 1
}
Object.defineProperty(obj, ‘b’, {
value: 2,
//writable: false// 不可修改
configurable: false
})
obj.b = 5
console.log(obj)//[1,2]
enumerable
对否可枚举
let obj = {
a: 1
}
Object.defineProperty(obj, ‘b’, {
value: 2,
//writable: false// 不可修改
//configurable: false
enumerable: false
})
//obj.b = 5
console.log(Object.keys(obj))//[“a”]
接了下来说到重点：set 和 get 这也是 vue3.0 前 observe 的实现原理
let obj = {
a: 1
}
let newValue = 45
Object.defineProperty(obj, ‘b’, {
get(value) {
console.log(‘ 获取 ’)
newVlaue = value
},
set() {
console.log(‘ 设置 ’)
return newValue
}
})
obj.b = 6 // 设置
obj.b // 获取
** 写到这突然写不下去了，没有实际的应用，所以我决定延伸一篇 vue 双向绑定实现。稍后跟上。。。
