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

巴特西

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

最新文章

热门文章