美文网首页程序员前端
订阅JavaScript对象改变

订阅JavaScript对象改变

作者: Jetsly | 来源:发表于2016-05-20 11:59 被阅读1169次

    题记:很多古老的框架或者为了兼容老版本的浏览器都是通过set的方法或者脏检查来通知订阅者。随着技术的发展最新的框架为了实现绑定通过Object.defineProperty来订阅对象的改变,其中Object.observe是ES7规范提案中的,不确定会不会被干掉。


    Object.defineProperty

      Object.defineProperty(object, propertyname, descriptor)
    
    参数

    object: 定义的对象
    propertyname:参数名称
    descriptor:定义的描述信息

    descriptor
    参数的键 描述 默认值
    configurable 属性能否被删除或者重新定义 false
    enumerable 遍历对象的时候属性是否可见 false
    value 属性值,当设置后不能设置getset undefind
    writable 属性能否改变
    get 当获取属性的时候触发 undefind
    set 当设置属性的时候触发 undefind

    资料说writable默认值为false,但是当不设置这个参数的时候,value是可以改变的,持怀疑态度,求解

      var user={};
      Object.defineProperty(user, 'name', {
            get:()=>{
                console.log(`get value:${this.name}`)
                return this.name;
            },
            set:value=>{
                console.log(`set value:${value}`)
                this.name=value;
            }
      });
    

    注:下面设置会抛出异常

      var user={};
      Object.defineProperty(user, 'name', {
            value:'johe',
            get:()=>{
                console.log(`get value:${this.name}`)
                return this.name;
            },
            set:value=>{
                console.log(`set value:${value}`)
                this.name=value;
            }
      });
      //Uncaught TypeError: Invalid property descriptor. 
      //Cannot both specify accessors and a value or writable attribute, #<Object>
    

    Object.defineProperties

    Object.defineProperties(object, props)
    
    参数

    object: 定义的对象
    props: 添加的属性, keyvalue 分别Object.defineProperty 中的第二和第三个参数。

    Object.observe

      Object.observe(object, callback, acceptList)
      Object.unobserve(object,callback)
    
    参数

    object: 定义的对象
    callback:参数修改后的回掉
    acceptList:设置订阅属性的操作类型:["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"],当为null的时候是全部

    var user={};
    Object.observe(user,info=>{console.log(info)});
    
    user.baz=2;
    //{"type":"add","object":{},"name":"baz"},
    
    user.baz=3;
    //{"type":"update","object":{},"name":"baz","oldValue":2}
    
    delete user.baz;
    //{"type":"delete","object":{},"name":"baz","oldValue":3}

    相关文章

      网友评论

        本文标题:订阅JavaScript对象改变

        本文链接:https://www.haomeiwen.com/subject/uxfnrttx.html