1. 程式人生 > >Object 的靜態方法之 defineProperties 以及數據劫持效果

Object 的靜態方法之 defineProperties 以及數據劫持效果

-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 以及數據劫持效果