查詢 Property 的組態

前言

  在先前的 在 Object 中定義 Property 介紹過自定義的 Property ，Property 在定義時要設定 Property 的組態，如可不可寫，定義完後可以查詢嗎?在此把學習的過程做個紀錄。4

內容

  要得到 Property 的組態可以透過 Object.getOwnPropertyDescriptor() ，範例如下

let obj = {
  a : 10
};
Object.defineProperty( obj , 'prop1' ,{
  value : 20
} );
Object.defineProperty( obj , 'prop2' ,{
  value : 30,
  writable:true
} );
//
descriptorA = Object.getOwnPropertyDescriptor(obj, 'a');
console.log( descriptorA.value );//10
console.log( descriptorA.writable );//true
descriptorA.writable = false;
obj.a = 100;
console.log( obj.a );//100
//
descriptorProp1 = Object.getOwnPropertyDescriptor(obj, 'prop1');
console.log( descriptorProp1.value );//20
console.log( descriptorProp1.writable );//false
//
descriptorProp2 = Object.getOwnPropertyDescriptor(obj, 'prop2');
console.log( descriptorProp2.value );//30
console.log( descriptorProp2.writable );//true

透過 Object.getOwnPropertyDescriptor() 可以的到 Desciptor ，透過讀取該物件的 Property 就可以知道 Property 的組態 ，範例的 a 是一般的 Property，從 value 與 writable 讀出來的值如預期，可以透過 Desciptor  讀取組態，那可以透過 Desciptor  改變組態嗎?範例透過改變 Desciptor  的 writable 來實驗，結果是"不行"!接著實驗自定義的 Property ，prop1 與 porp2 皆如預期。

參考資料

[ developer.mozilla.org ] Object.getOwnPropertyDescriptor()

相關文章與資料

在 Object 中定義 Property

 檢查是否為自定義的 Property

前言

  在之前的 在 Object 中定義 Property 裡介紹了自定義 Property ，這樣物件裡就會分一般的 Property 與 自定義的 Property ，能夠區分出來嗎?在此把學習的過程做個紀錄。

內容

  範例如下

let obj = {
  a : 10,
  b : 20,
};
Object.defineProperty( obj , 'prop' ,{
  value : 42,
  writable:true
} );
//
console.log( Object.keys(obj) );//["a", "b"]
for(let name in obj){
  console.log(name);
}
//
// "a"
// "b"
//
console.log( Object.getOwnPropertyNames(obj) );//["a", "b", "prop"]
//
console.log( obj.hasOwnProperty('prop') );//true
//
function checkIsDefineProperty( o , name){
  return Object.getOwnPropertyNames(o).includes( name ) && 
    !Object.keys(o).includes(name);
}
//
console.log( checkIsDefineProperty( obj,'a') );//false
console.log( checkIsDefineProperty( obj,'prop') );//true

查了一下發現 JavaScript 本身不直接提供檢查是否為自定義的 Property 的方法，不過可以透過其他方法的結果來得知，在 Object.keys() 與 for ... in 得到的結果都不包含自定義的 Property ，但透過 Object.getOwnPerpertyNames() 可以得到，不過裡面會同時包含一般的 Property，順帶提一下 Object.getOwnProperty() 也可以檢查到自定義的 Property 。綜合以上後就可以檢查是否為自定義的 Property ，只要確定 Property 在 Object.getOwnPerpertyNames() 裡且"不"在 Object.keys() 裡就可以確定是否為自定義的 Property 。

參考資料

[ developer.mozilla.org ] Object.defineProperty()

相關文章與資料

在 Object 中定義 Property

 在自定義的 Property 裡使用 getter 與 setter

前言

  在先前的 在 Object 中定義 Property 裡直接透過賦值來設定 Property ，但在 Class 使用 Property 時是可以透過 getter 與 setter 來存取 Property ，自定義的 Property 其實也可用 getter 與 setter ，在此把學習的過程做個紀錄。

內容

  範例如下

const o = {};
//
let value = 38;
Object.defineProperty(o, "a", {
  get() {
    console.log('get value!');
    return value;
  },
  set(newValue) {
    console.log('set value!');
    value = newValue;
  }
});
o.a = 42;
console.log(o.a); // 42

用起來跟在 Class 時很像，都是定義 get() 與 set() ，要注意的是之前要做"寫"的動作的時候必須設定 writable 為 true 來達成，但有使用 set() 的時候就可以不用設定就可直接完成寫的動作。

參考資料

[ developer.mozilla.org ] Object.defineProperty()

相關文章與資料

在 Object 中定義 Property

 在 Object 一次定義多個 Property

前言

  在先前的 在 Object 中定義 Property 介紹了在 Object 裡定義 Property 的方法，但一次只能定義一個 Property ，而 JavaScript 有提供一次定義多個 Property 的方法，在此把學習的過程做個紀錄。

內容

  要一次定義多個 Property 就透過 Object.deifneProperties() ，範例如下

let obj = {};
Object.defineProperties( obj , {
  prop1 : {
    value : 10,
    writable : true
  },
  prop2 : {
    value : 'hello'
  }
} );
//
obj.prop1 = 1024;
console.log( obj.prop1 );//1024
console.log( obj.prop2 );//"hello"

Object.deifneProperties() 用起來和 Object.deifneProperty() 很像，差別是參數的輸入方式，Object.deifneProperty()  要把名稱與內容分開輸入，但 Object.deifneProperties() 輸入時就把名稱與內容包成 JSON 輸入即可，而且還可以一次輸入多個 Proptery ，範例示範一次定義 prop1 與 prop2 兩個 Property ，要記得內容如果不表明代表唯讀，這點與 Object.deifneProperty() 是一樣的。

參考資料

[ developer.mozilla.org ] Object.defineProperties()

相關文章與資料

在 Object 中定義 Property