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);