題記：很多古老的框架或者為了兼容老版本的瀏覽器都是通過set的方法或者臟檢查來通知訂閱者。隨著技術(shù)的發(fā)展最新的框架為了實現(xiàn)綁定通過Object.defineProperty來訂閱對象的改變，其中Object.observe是ES7規(guī)范提案中的，不確定會不會被干掉。

Object.defineProperty

  Object.defineProperty(object, propertyname, descriptor)

參數(shù)

object: 定義的對象
propertyname：參數(shù)名稱
descriptor：定義的描述信息

descriptor

資料說writable默認值為false，但是當(dāng)不設(shè)置這個參數(shù)的時候，value是可以改變的，持懷疑態(tài)度，求解

  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;
        }
  });

注：下面設(shè)置會拋出異常

  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)

參數(shù)

object: 定義的對象
props: 添加的屬性， key和 value 分別Object.defineProperty 中的第二和第三個參數(shù)。

Object.observe

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

參數(shù)

object: 定義的對象
callback：參數(shù)修改后的回掉
acceptList：設(shè)置訂閱屬性的操作類型：["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"],當(dāng)為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}