Object.defineProperty

1. Object.defineProperty

Object.defineProperty()方法会直接在一个对象上定义个新属性，或者修改一个对象的现有属性，并返回此对象。该方法允许精确地添加或修改对象的属性。

Object.defineProperty(obj, prop, descriptor)

obj：即为作用的对象

prop：即为对象上的某个属性

descriptor：属性描述符，是个对象

// 举例
let obj = {
    name: 'fct'
}
// 为 obj 对象增加属性 age，并设置具体约束
Object.defineProperty(obj, 'age', {
    // ....
})

1.1 属性描述符

属性描述符有两种主要形式：数据描述符和存取描述符。

数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。

存取描述符是由 getter 函数和 setter 函数所描述的属性。

一个描述符只能是这两者其中之一；不能同时是两者。

// 不能同时是两者。只能以下
Object.defineProperty(obj, 'age', {
    enumerable: false,
    configurable: false,
    
    writable: false,
    value: null
})
// 或
Object.defineProperty(obj, 'age', {
    enumerable: false,
    configurable: false,
    
	get() { return bValue; },
  	set(newValue) { bValue = newValue; }
})

1.1.1 共享可选键值

• configurable

  默认为 false。当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。

• enumerable

  默认为 false。当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。

1.1.1 数据描述符

• value

  默认为 undefined。该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。

• writable

  默认为 false。当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符改变。

代码展示：

let obj = {
  // 字面量形式，属性描述符值均为 true
  name: 'fct'
};

// 为 obj 对象增加属性 age，并设置具体约束
Object.defineProperty(obj, 'age', {
  // 设置 age 属性值
  value: 18,
  // 使 age属性可以被删除，也可以被重新配置属性描述符
  configurable: true,
  // 使 age 能够被枚举
  enumerable: true,
  // 使 age 能够修改属性值
  writable: true
});

console.log(obj); // { name: 'fct', age: 18 }
obj.age = 21;
console.log(obj.age); // 21

Object.defineProperty(obj, 'age', {
  // 设置 age 属性值
  value: 20,
  configurable: false,
  // 不设置其他属性，均默认 false
  // enumerable: false,
  // writable: false
});

1.1.2 存取描述符

get

属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。
默认为 undefined。

set

属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。
默认为 undefined。

代码案例展示：

let obj = {
  name: 'fct',
  _address: '成都市'	
};
// 私有属性，不暴露
Object.defineProperty(obj, '_address', {
  enumerable: false,
  configurable: false
});
// 设置暴露属性 address 映射 私有属性 _address
Object.defineProperty(obj, 'address', {
  enumerable: true,
  configurable: true,
  set(value) {
    this._address = value;
  },
  get() {
    return this._address;
  }
});

console.log(obj); // { name: 'fct', address: [Getter/Setter] }
console.log(obj.address); // 成都市
obj.address = '北京市';
console.log(obj.address); // 北京市

// 还可以监听当前属性被获取了几次，被设置了几次值
Object.defineProperty(obj, 'name', {
  enumerable: true,
  configurable: true,
  set(value) {
    console.log("name被赋值");
  },
  get() {
    console.log("name被获取");
    return "name被获取";
  }
});
obj.name = 'xxx'; // 输出 name被赋值
const name = obj.name; // 输出 name被获取

2. Object.defineProperties

Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

Object.defineProperties(obj, props)

obj

定义或修改属性的对象。

props

要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种：数据描述符和访问器描述符。

// 举例
let obj = {
  _age: 18,
  // set age(value) {
  //   this._age = value;
  // },
  // get age() {
  //   return this._age;
  // }
};

Object.defineProperties(obj, {
  name: {
    enumerable: true,
    configurable: true,
    writable: true,
    value: "fct"
  },
  age: {
    enumerable: false,
    configurable: false,
    set(value) {
      this._age = value;
    },
    get() {
      return this._age;
    }
  }
});

console.log(obj.name);  // fct
console.log(obj.age); // 18
obj.age = 21;
console.log(obj.age); // 21