談Object.definedProperty()中的getter與setter個人理解就先介紹一下Object.definedProperty()
Object.definedProperty()方法會直接在一個對象上定義一個新屬性,或者修改一個對象的現有屬性,並返回此對象。在vue2.x中用來實現數據雙向綁定
語法:
Object.defineProperty(obj, prop, descriptor)
obj 在其上定義或修改屬性的對象。
props 要定義其可枚舉屬性或修改的屬性描述符的對象。對象中存在的屬性描述符主要有兩種:數據描述符和訪問器描述符(更多詳情,請參閱Object.defineProperty())。描述符具有以下鍵:
configurable 為true時 當且僅當該屬性描述符的類型可以被改變並且該屬性可以從對應對象中刪除。默認為 false
enumerable 為為true時 當且僅當在枚舉(for in 或者 Object.keys())相應對象上的屬性時該屬性顯現。默認為 false
value 與屬性關聯的值。可以是任何有效的JavaScript值(數字,對象,函數等)。默認為 undefined.
writable 為true時,當且僅當與該屬性相關聯的值可以用assignment operator改變時。默認為 false
get 作為該屬性的 getter 函數,如果沒有 getter 則為undefined。函數返回值將被用作屬性的值。默認為 undefined
set 作為屬性的 setter 函數,如果沒有 setter 則為undefined。函數將僅接受參數賦值給該屬性的新值。默認為 undefined
var arr = {}; Object.defineProperty(arr,"a",{ get(){ return --this._a }, set(newVal){ this._a = newVal } }) arr.a = 10; console.log(arr.a); // 9
以上例為例設置一個對象一個參數來介紹set與get工作原理;
當數組arr中沒有屬性a時,通過賦值arr.a=10;函數先觸發set函數,形參newVal 現在就是10 ,在把newVal賦值給一個內部的變量,一般以下划線_加上屬性名稱 “_a”,當你使用arr.a來調用數據時,這時候就到達get函數,return 出定義的"_a",當然你也可以進一步操作在return 。