Object 的靜態方法之 defineProperties 以及資料劫持效果
阿新 • • 發佈:2018-11-10
再提一下什麼是靜態方法:
靜態方法:在類身上的方法,
動態方法:在例項身上的方法
Object.defineProperties(obj, props)
obj:被新增屬性的物件
props:新增或更新的屬性物件
給物件定義屬性,
如果存在該屬性,則用新定義的屬性更新已存在的屬性,
如果不存在該屬性,則新增該屬性。
如果是新新增的屬性,一定要設定是否可列舉,不然為false
enumerable(是否可列舉):預設為false
writable(是否可寫):預設為false
configurable:是否可delete
Object.defineProperty()
在物件上定義新屬性,或修改物件現有屬性,並返回該物件。
Object.defineProperty(obj, 屬性名字, {設定屬性})
例子1:
1 let obj = { 2 name:'xx', 3 num:0 4 }; 5 Object.defineProperties(obj,{ 6 name:{ 7 value:'yy', 8 writable: false,//不可寫 9 enumerable: false,//不可遍歷(列舉) 10 configurable:false//不可刪除 11 }, 12 age:{13 value:20, 14 enumerable: true 15 } 16 }); 17 18 obj.age = 30; 19 console.log(obj.age);//預設不可寫,所以此處依然是 20 20 delete obj.name;//此處刪了一個不可刪除的屬性 21 console.log(obj.name);//當然能顯示 yy
例子2:資料劫持 效果
1 let obj = { 2 num:4 3 }; 4let n = 2; 5 Object.defineProperty(obj,'num',{ 6 get:function(){ 7 /*資料劫持*/ 8 //當你獲取這個屬性的時候,會呼叫 9 n += 2; 10 return n; 11 } 12 }); 13 console.log(obj.num < 5 && obj.num > 5);//true 14 /*num即小於5,又大於,就是應為,第一次判斷obj.num時num=(n+=2)=4,符合了第一個條件,此時的n=4。 15 讀到第二個判斷的時候,再次出發函式,num再次=(n+=2)=8,又符合了第二個判斷條件,所以出現了true*/