JavaScript属性描述符【待补充】

前言

很多学习过vue的同学，在学习vue响应式数据（或者双向绑定）的原理时，都接触过get，set，Object.defineProperty这句个函数，并且大概知道它们的用法。但是一提到属性描述符，大家就很陌生了。今天详细的给大家讲解一下什么事属性描述符。

首先，属性描述符一共有6种

• value：设置属性值，默认值为 undefined。
• writable：设置属性值是否可写，默认值为 true。
• enumerable：设置属性是否可枚举.比如，是否允许使用 for/in 语句遍历访问，默认为 true。
• configurable：设置是否可设置属性特性，默认为 true。如果为 false，你将无法修改或者删除该属性的值。
• get：取值函数，当访问该属性时，该方法会被执行，默认为 undefined。
• set：存值函数，当属性值修改时，触发执行该方法，默认为 undefined。

当一个属性描述符没有没有get和set时，它是个数据描述符。当它没有value和writable时，它是个存取描述符。如果一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。

	configurable	enumerable	value	writable	get	set
数据描述符	可以	可以	可以	可以	不可以	不可以
存取描述符	可以	可以	不可以	不可以	可以	可以

示例1：

下面示例演示了使用 value 读写属性值的基本用法。

var obj = {}; //定义空对象
Object.defineProperty(obj, "age", { value: 18 });
console.log(obj.age);
console.log(Object.getOwnPropertyDescriptor(obj, "age").value); //返回18

示例2：

下面示例演示了使用 writable 属性禁止修改属性 age。在正常模式下，如果 writable 为 false，重写属性值不会报错，但是操作失败，而在严格模式下则会抛出异常。

  var obj = {}; //定义空对象

  Object.defineProperty(obj, "age", {
    value: 18,
    writable: false, //禁止修改属性值
  });

  obj.age = 28; //由于禁止修改，此时修改失败

  console.log(obj.age); //结果仍然是18

  console.log(Object.getOwnPropertyDescriptor(obj, "age").value); //返回18

示例3

configurable 可以禁止修改属性描述符，当其值为 false 时，value、writable、enumerable 和 configurable 禁止修改，同时禁止删除属性。

在下面示例中，当设置属性 age 禁止修改配置后，下面操作都是不允许的。

      var obj = {}; //定义空对象

      var obj = Object.defineProperty({}, "age", {
        configurable: false, // 禁止配置(换而言之，无法修改属性描述符)
      });
      obj.age = 28; //由于禁止修改，此时修改失败
      console.log(obj.x); //undefined
      console.log(Object.getOwnPropertyDescriptor(obj, "age").value); //undefined
      Object.defineProperty(obj, "age", { value: 2 }); //抛出异常
      Object.defineProperty(obj, "age", { writable: true }); //抛出异常
      Object.defineProperty(obj, "age", { enumerable: true }); //抛出异常
      Object.defineProperty(obj, "age", { configurable: true }); //抛出异常