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

Object 的靜態方法之 defineProperties 以及資料劫持效果

再提一下什麼是靜態方法:
  靜態方法:在類身上的方法,
  動態方法:在例項身上的方法
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*/