JavaScript -- 理解對象的屬性

備註：本文長期修改

目錄

1. 屬性描述符

   1. 數據屬性: 修改屬性的一些特性
   2. 存取屬性: 設置或獲取對象的某個屬性的值。

2. 操做對象元屬性

   1. Object.defineProperty(): 設置或修改單個屬性的特性
   2. Object.defineProperties(): 設置或修改多個屬性的特性
3. 讀取對象元屬性
   1. Object.getOwnPropertyDescriptor(): 讀取屬性的特性，取得給定屬性的描述符
   2. Object.getOwnPropertyDescriptors(): 讀取屬性的特性，取得給定屬性的描述符

屬性描述符即屬性的屬性

1.1 數據屬性

說明：當修改或定義對象的某個屬性的時候，給這個屬性添加一些特性。

特性名稱	描述	默認值
value	設置屬性的值	undefined
writable	設置是否可修改值	true
enumerable	表示可否經過 for-in 或 obj.keys()循環返回屬性。	true
configurable	表示可否經過 delete 刪除屬性從而從新定義屬性 可否修改屬性的特性 可否把屬性修改成存取屬性	true

var obj = {
  test: 'hello',
};
//默認狀況下
var desc = Object.getOwnPropertyDescriptor(obj, 'test');
console.log(desc);
// desc = {
//   configurable: true,
//   enumerable: true,
//   value: 'hello',
//   writable: true,
// }

使用 對象字面量 建立的屬性，writable、enumerable 和 configurable 特性默認爲 true。

1.2 存取屬性

說明：設置或獲取對象的某個屬性的值。

特性名稱	描述	默認值
Get	在讀取屬性時調用的函數	undefined
Set	在寫入屬性時調用的函數	true
enumerable	屬性是否能夠被枚舉（使用 for...in 或 Object.keys()）	true
configurable	表示可否經過 delete 刪除屬性從而從新定義屬性 可否修改屬性的特性 可否把屬性修改成存取屬性(目標屬性是否能夠再次設置特性)	true

var obj = {
  $n: 5,
  get next() {
    return this.$n++;
  },
  set next(n) {
    if (n >= this.$n) this.$n += n;
    else throw new Error('新的值必須大於當前值');
  },
};
obj.next = 6
console.log(obj.$n);

注意：當使用了 getter 或 setter 方法，不容許使用 writable 和 value 這兩個屬性

操做-屬性描述對象

2.1 Object.defineProperty()

說明：此方法只能定義一個屬性

語法：

Object.defineProperty(obj, prop, descriptor)

參數列表：

obj：必需。目標對象
prop：必需。需定義或修改的屬性的名字
descriptor：必需。目標屬性所擁有的特性

返回值：

傳入函數的對象。即第一個參數obj

示例

var obj = {};

Object.defineProperty(obj, 'name', {
  get: function() {
    return this._name; //在 get 和 set 中使用訪問屬性必須加 "_"
  },
  set: function(val) {
    if (Array.isArray(val)) {
      this._name = val;
    } else {
      this._name = '不是數組不能賦值';
    }
  },
  enumerable: true, // 表示可枚舉的
  configurable: true, // 是否可刪除屬性
});

// Object {get: function, set: function, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(obj, 'name'));

obj.name = '111';
console.log(obj.name);

2.2 Object.defineProperties()

說明：此方法用來定義多個屬性。

示例

var obj = {};

Object.defineProperties(obj, {
  name: {
    value: '周華健',
    writable: true,
  },
  age: {
    value: 30,
    writable: true,
  },
  sex: {
    get: function() {
      return this._sex;
    },
    set: function(val) {
      if (val === 1) {
        this._sex = '男';
      } else {
        this._sex = '女';
      }
    },
  },
});

obj.sex = 0;

console.log(obj.sex); //女

讀取對象屬性的信息

說明：讀取屬性的特性，取得給定屬性的描述符

參數：

屬性所在的對象和要讀取其描述符的屬性名稱

返回值：

//存取屬性
Object { configurable 、 enumerable 、 get 和 set}

//數據屬性
Object {configurable 、 enumerable 、 writable 和 value}

示例

var obj = {
  name: 'Timo',
};

obj.sex = 'woman';

// 獲取單個屬性的描述符
var desc = Object.getOwnPropertyDescriptor(obj, 'sex');

// 獲取多個屬性的描述符
var descs = Object.getOwnPropertyDescriptors(obj);

console.log(desc);
console.log(descs);