订阅JavaScript对象改变

题记:很多古老的框架或者为了兼容老版本的浏览器都是通过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.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对象改变)