理解defineProperty

   //1,使用defineProperty进行绑定let obj = {// name: '小小香'}//为属性值改变属性let oldValue = 'hyx';Object.defineProperty(obj, 'name', {// writable: true,configurable: true,enumerable: true,//默认情况下,通过defineProperty新增的属性值是不能更改的,不能遍历,不能删除//设置get set访问值set(newValue) {if (newValue !== oldValue) {oldValue = newValue;console.log("set方法被执行了");}},get() {console.log("get方法被执行了");return oldValue;}})//添加get set// obj.name = '汪苏泷';// delete obj.name;// for (const key in obj) {//     if (obj.hasOwnProperty(key)) {//         const element = obj[key];//         console.log(element);//     }// }

实现监听所有属性的变化,事实监听

//快速监听所有属性的变化class Observer {constructor(obj) {this.observe(obj); //监听数据的变化}observe(obj) {//给对象的所有属性添加get,set方法if (obj && typeof obj == 'object') {for (let key in obj) {this.defineRecative(obj, key, obj[key])}}}//obj对象 key需要get/set设置的属性名 value通过get/set的值defineRecative(obj, key, value) {//如果属性的取值也是一个对象,那么给这个对象也添加get/setthis.observe(value);Object.defineProperty(obj, key, {configurable: true,enumerable: true,//默认情况下,通过defineProperty新增的属性值是不能更改的,不能遍历,不能删除//设置get set访问值set: (newValue) => {if (value !== newValue) {//如果属性的赋值也是一个对象,那么给这个对象也添加get/setthis.observe(newValue);value = newValue;console.log("监听到数据变化 set");}},get() {return value;}})}}let obj2 = {name: '汪苏泷'}new Observer(obj2)console.log(obj2);

注意里面递归调用了this.observe
测试 添加name的值为一个对象,则修改对象里面的属性的时候,set监听到数据的变化