JavaScript基础知识：对象属性配置

一、属性标志和属性描述符

1. 属性标志

1. 对象属性所具有的标志有：

1）value ： 获取对象属性的值；

2）writable — 如果为 true，则值可以被修改，否则它是只可读的。
3）enumerable — 如果为 true，则会被在循环中列出，否则不会被列出。
4）configurable — 如果为 true，则此特性可以被删除，这些属性也可以被修改，否则不可以

后三个通常不会出现，因为常规创建对象的时候，三者默认为true，但我们也可以随时更改它们，

2. 属性描述符

1. 获取对象属性标志=语法如下：

let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);

语法说明：
obj：需要从中获取信息的对象；
propertyName：属性的名称；

 let user = {
 	name:'john'
 }
 
 let mytest = Object.getOwnPropertyDescriptor(user,'name');
 console.log(mytest);

2. 修改对象属性标志语法如下：

Object.defineProperty(obj, propertyName, descriptor);

语法说明：
==obj 和 propertyName ==：要应用描述符的对象及其属性；
descriptor：要应用的属性描述符对象；

具体使用：
如果对象属性已存在，会更新其值；否则会根据给定的值和标志，创建新的属性，这样一来，没有提供的标志则会被定为false

 let user = {
 	name:'john'
 }
 
 Object.defineProperty(user,'name',{value:'Kanno'});
 Object.defineProperty(user,'age',{value:'24'});
 let mytest = Object.getOwnPropertyDescriptor(user,'name');
 let mytest2 = Object.getOwnPropertyDescriptor(user,'age');
 console.log(mytest );
 console.log(mytest2 );

3. 只读
   可以通过设置 writable 标志来设置属性的值 是否可重新赋值

let user = {
  name: "John"
};

Object.defineProperty(user, "name", {
  writable: false
});

user.name = "Pete"; // Error: Cannot assign to read only property 'name'

二、属性的 getter 和 setter

1. getter 和 setter

let obj = {
  get propName() {
    // 当读取 obj.propName 时，getter 起作用
  },

  set propName(value) {
    // 当执行 obj.propName = value 操作时，setter 起作用
  }
};

2. 访问器描述符

访问属性 与 数据属性 的描述符不同；
访问属性 没有 value 和 writable， 但是有 ** get** 和 set 函数

所以访问器描述符可能有：

• get —— 一个没有参数的函数，在读取属性时工作，
• set —— 带有一个参数的函数，当属性被设置时调用，
• enumerable —— 与数据属性的相同，
• configurable —— 与数据属性的相同。

3. 使用

Getter/setter 可以用作“真实”属性值的包装器，以便对它们进行更多的控制。

案例 1 ： 禁止太短的 user 的 name，我们可以创建一个 setter name，并将值存储在一个单独的属性 _name 中：

let user = {
  get name() {
    return this._name;
  },

  set name(value) {
    if (value.length < 4) {
      alert("Name is too short, need at least 4 characters");
      return;
    }
    this._name = value;
  }
};

user.name = "Pete";
alert(user.name); // Pete

user.name = ""; // Name 太短了……

所以，name 被存储在 _name 属性中，并通过 getter 和 setter 进行访问。
从技术上讲，外部代码可以使用 user.name 直接访问 name。但是，这儿有一个众所周知的约定，即以下划线 "" 开头的属性是内部属性，不应该从对象外部进行访问。

案例 2 ： 访问器允许随时通过使用 getter 和 setter 替换“正常的”数据属性，来控制和调整这些属性的行为

1）一开始我们使用数据属性 name 和 age 来实现 user 对象：

function User(name, age) {
  this.name = name;
  this.age = age;
}

let john = new User("John", 25);

alert( john.age ); // 25

2）但是现在我们决定存储 birthday，而不是age了

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;
}

let john = new User("John", new Date(1992, 6, 1));

2）现在问题来了：那些仍使用 age 属性的旧代码，万一很多地方用，不方便改呢，换句话说就是 == 我还想留着 age==， 可以通过为age 添加一个getter 解决

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;

  // 年龄是根据当前日期和生日计算得出的
  Object.defineProperty(this, "age", {
    get() {
      let todayYear = new Date().getFullYear();
      return todayYear - this.birthday.getFullYear();
    }
  });
}

let john = new User("John", new Date(1992, 6, 1));

console.log(john.age);      // 29
console.log(john.birthday);    //Wed Jul 01 1992 00:00:00 GMT+0800 (中国标准时间)