可以说defineProperty是被mvvm框架激活的,虽然es5就有了但说实话了解和用的人不多下边我们来具体聊聊先从defineProperty开始说起defineproperty 操作object属性//defineproperty 有个定义object属性的功能,应该没几个人用,因为相对于obj,a = 1这种方式简直不能再难用。//通常我们定义obj属性let obj = { a:1}obj.b = 2obj[‘c’] = 3console.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双向绑定实现。稍后跟上。。。