js 實現vue的雙向資料繫結

JDZ發表於2018-11-21
JSVue

1、Object.defineProperty(obj,prop,descriptor)

vue.js的雙向資料繫結通過Object.defineProperty() 方法實現的。俗稱--屬性攔截器 該方法會直接在一個物件上定義一個新屬性，或者修改一個已經存在的屬性，並返回這個物件。

Object.defineProperty(obj,prop,descriptor) @param:obj:需要定義屬性的物件 prop:需要定義或修改的屬性 descriptor:將被定義或修改屬性的描述符

詳解：物件裡面目前存在的屬性描述符主要有兩種形式：資料描述符和存取描述符。
資料描述符：擁有可寫或不可寫值得屬性
          configurable:當且僅當configurable為true時，改屬性描述符才能夠被改變，也能被刪除；
          enumerable:當其值為true時，該屬性才能夠出現在物件的列舉屬性中，預設為false
          writable:  當且僅當該屬性的值為true時，該屬性才能被賦值運算子改變，預設為false.
          value:     該屬性對應的值，可以是任意有效的javascript的值（數值，物件，函式等），預設為undefined

存取描述符：由一對getter-setter函式功能來描述的屬性
          configurable:當且僅當configurable為true時，改屬性描述符才能夠被改變，也能被刪除；
          enumerable:當其值為true時，該屬性才能夠出現在物件的列舉屬性中，預設為false
          get: 給屬性提供getter的方法，如果沒有 getter 則為undefined。當我們讀取某個屬性的時候，其實是在物件內部呼叫了該 方法，此方法必須要有return語句。該方法返回值被用作屬性值。預設為 undefined 
          set：設定屬性值的方法， 如果沒有 setter 則為 undefined。該方法將接受唯一引數，並將該引數的新值分配給該屬性。預設為 undefined。也就是說，當我們設定某個屬性的時候，實際上是在物件的內部呼叫了該方法



2、Object物件有一個freeze的方法，用於實現物件屬性和方法的不可更改

          const arr = [1,2,3,4];
          Object.freeze(arr);//變數arr不可更改
          arr.push(5);//報錯：不能新增屬性

3、Object。definePropperty也可以實現規定變數的不可更改

          const obj = {key:'chris',value:'person'};
          Object.defineProperty(obj,'key'){
              configurable:false,   //不可刪除
              writable:false,     //不可寫
          }
複製程式碼

相關文章