1. 程式人生 > 實用技巧 >JS物件屬性描述

JS物件屬性描述

屬性描述符的結構

  在定義物件, 定義屬性時, 屬性描述符一共有6個

  • value: 設定屬性的值, 預設值為undefined
  • writable: 設定屬性值是否可寫, 預設值為true
  • enumerable: 設定屬性是否可列舉, 即是否允許使用 for/in 語句或 Object.keys() 函式遍歷訪問, 預設值 true
  • configurable: 設定是否可設定屬性特性, 預設為true, 如果為false, 將無法刪除屬性, 不能夠修改屬性值, 也不能修改屬性的屬性的描述符的值
  • get: 取值函式, 預設為undefined
  • set: 存值函式, 預設為undefined

  get和set函式

var obj = {
    _x : 1,  //定義_x屬性
    get x() { return this._x },  //定義x屬性的getter
    set x(value) {  //定義x屬性的setter
        if (typeof value != "number") throw new Error('請輸入數字');
        this._x = value;  //賦值
    }
};
console.log(obj.x);  //1
obj.x = 2;
console.log(obj.x);  //2

操作屬性描述符

屬性描述符是一個內部物件, 無法直接讀寫, 可以通過下面幾個函式進行操作

  • Object.getOwnPropertyDescriptor(): 可以讀出指定物件私有屬性的屬性描述符
  • Object.defineProperty(): 通過定義屬性描述符來定義或修改一個屬性, 然後返回修改後的描述符
  • Object.defineProperties(): 可以同時定義多個屬性描述符
  • Object.getOwnPropertyNames(): 獲取物件的所有私有屬性
  • Object.keys(): 獲取物件的所有本地可列舉的屬性
  • propertyIsEnumerable(): 物件例項方法, 直接呼叫, 判斷指定的屬性是否可列舉

控制物件狀態

  • Object.preventExtensions: 阻止為物件新增新的屬性
  • Object.seal: 阻止為物件新增新的屬性, 同事也無法刪除就屬性. 等價於屬性描述符的 configurable 屬性設為false, 該方法不影響修改某個屬性的值
  • Object.freeze: 阻止為一個物件新增新屬性, 刪除就屬性, 修改屬性值
  • Object.isExtensible: 檢查一個物件是否允許新增新的屬性
  • Object.isFrozen: 檢查一個物件是否使用了Object.freeze 方法