Javascript观察者模式（Object.defineProperty、Reflect和Proxy实现）

什么是观察者模式？
答：在数据发生改变时，对应的处理函数自动执行。函数自动观察数据对象，一旦对象有变化，函数就会自动执行。

参考《原生JavaScript实现观察者模式》（https://blog.csdn.net/lm278858445/article/details/78287492），注释了代码，如下：
ES5：Object.defineProperty

    let friend={}
    //那篇博客没有定义name，所以编译器会报错
    let age="jin" //定义 name 属性及 set 和 get 方法 //存取描述符（get，set） //数据描述符（value，writable） //Object.defineProperty(obj, prop, descriptor) Object.defineProperty(friend,"age",{ //当且仅当该属性的enumerable为true时， // 该属性才能够出现在对象的枚举属性中。默认为 false。 enumerable:true, //当且仅当该属性的 configurable 为 true 时， // 该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。 // 默认为 false。 configurable:true, get:function () { return age }, set:function (newValue) { //调用改变时的函数 // 当对象的属性改变时，会执行 set 方法 console.log("age属性从"+age+"转变为"+newValue) age=newValue } }) friend.age="chen" friend.age="yu" console.info('friend',friend) 

关于「defineProperty」的详细解释，请参考（https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty）

---

ES6：使用set方法实现

//ES6
    //使用set方法实现
    //注意，定义类 首字母必须大写
    let age="ccc" class Friend{ constructor(age){ this.age=age } set age(newValue){ console.log("age属性从"+age+"转变为"+newValue) age=newValue } } let friend=new Friend("aaa") friend.age="bbb" console.log(friend) 

 

 

---

ES6：使用Reflect和Proxy实现

    class Friend{
      constructor(age){ this.age=age } } let friend=new Friend("chen") //proxy 代理 let changeValueProxy=new Proxy(friend,{ // set(target,property,value,receiver){ set(target,property,value,receiver){ if(property==="age"){ console.log(`age从${target[property]}转变成${value}`) } // Reflect.set方法设置target对象的name属性等于value。 //如本例是 age，则设置 friend（target） 的 age 属性（property） //为 value //如果不写这个，则 friend 的 age 值依然是 chen Reflect.set(target,property,value,receiver) //这样写也可以 // Reflect.set(friend,"age",value,receiver) } }) changeValueProxy.age="jin" console.log(friend) 

 

 

原文：https://www.jianshu.com/p/b7babe28ec4a

转载于:https://www.cnblogs.com/ckAng/p/10876189.html