Object 的靜態方法之 defineProperties 以及數據劫持效果
阿新 • • 發佈:2018-11-10
-s 靜態 prope 什麽 con 再次 以及 div 劫持
再提一下什麽是靜態方法:
靜態方法:在類身上的方法,
動態方法:在實例身上的方法
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 }; 4 let 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*/
Object 的靜態方法之 defineProperties 以及數據劫持效果