对象属性的控制

属性是直接定义在对象内部，或者直接添加到对象内部；但是这样来做的时候就不能对这个属性进行一些限制，比如：属性是否可以通过delete删除；属性是否在for-in遍历的时候被遍历出来

如果想要对一个属性进行比较精准的操作控制，那么可以使用属性描述符

• 通过属性描述符可以精准的添加或修改对象的属性
• 属性描述符需要使用Object.defineProperty来对属性进行添加或者修改

Object.defineProperty

Object.defindProperty方法会直接在一个对象上定义一个新的属性，或者修改一个对象的现有属性，并返回此对象

Object.defineProperty(obj, prop, description)

参数说明

• obj代表要定义的属性的对象
• prop表示要定义或者修改的属性的名称或者Symbol
• description表示要定义或者修改的属性描述符

返回值

• 被传递给函数的对象

属性描述符分类

属性描述符的分类有两种

• 数据属性描述符
• 存取属性描述符

数据属性描述符

• Configurable：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符
  • 当直接在一个对象上定义某个属性时，这个属性的Configurable为true
  • 当通过属性描述符定义一个属性时，这个属性的Configurable默认为false

var obj = {
  name: "zs",
  age: 18,
};
Object.defineProperty(obj, "name", {
  configurable: false, // 告诉js引擎，obj的name属性不可以被删除
});
delete obj.name;
// 上面通过configurable控制name属性不可以被修改配置，因此这里的操作也是不可以的
Object.defineProperty(obj, "name", {
  enumerable: false,
});

• Enumerable：表示属性是否可以通过for-in或者Object.keys()返回该属性
  • 直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true；
  • 通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false
• Writable：表示是否可以修改属性的值，控制属性值只读
  • 直接在一个对象上定义某个属性时，这个属性的[[Writable]]为true
  • 通过属性描述符定义一个属性时，这个属性的[[Writable]]默认为false
• value：属性的value值，读取属性时会返回该值，修改属性时，会对其进行修改
  • 默认情况下这个值是undefined

Object.defineProperty(obj, "name", {
  configurable: false, // 告诉js引擎，obj的name属性不可以被删除
  enumerable: false, // 告诉js引擎，obj对象的name属性不可枚举，不能通过(for-in, Object.keys())遍历出来
  writable: false, // 告诉js引擎，obj对象的name属性不可写入(只读属性readonly)
  value: 'ls' // 告诉js引擎，name属性返回这个值
});

存取属性描述符

存取属性描述符有如下四个特性

• Configurable：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符
  • 和数据属性描述符是一致的
• Enumerable：表示属性是否可以通过for-in或者Object.keys()返回该属性
  • 和数据属性描述符是一致的
• get：获取属性时会执行的函数。默认为undefined
• set：设置属性时会执行的函数。默认为undefined

// vue2响应式原理
var obj = {
  name: "zs",
};
var _name = "";
Object.defineProperty(obj, "name", {
  configurable: true,
  enumerable: false,
  set: function (value) {
    // 一旦name属性被修改，这个函数就会被回调，可以实现监听的效果
    console.log("set方法被调用", value);
    _name = value;
  },
  get: function () {
    console.log("get方法被调用");
    return _name;
  },
});
obj.name = "ls";
console.log(obj.name); // 如果上面没有get这个回调函数，将返回undefined

同时定义多个属性

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

var obj = {
  _age: 18,
};
Object.defineProperties(obj, {
  name: {
    writable: true,
    value: "ls",
  },
  age: {
    get: function () {
      return this._age;
    },
  },
});
console.log(obj)

对象方法补充

获取对象的属性描述符

• getOwnPropertyDescriptor 获取对象中需要指定属性的描述信息
• getOwnPropertyDescriptors 一次性获取对象中所有属性的描述信息

var obj = {
  name: "zs",
  age: 18,
};
// 获取对象的属性描述符
console.log(Object.getOwnPropertyDescriptor(obj, "name"));
console.log(Object.getOwnPropertyDescriptors(obj));

禁止对象新的扩展

• preventExtensions
• 给一个对象添加新的属性会失败(在严格模式下会报错)

var obj = {
  name: "zs",
  age: 18,
};
Object.preventExtensions(obj);
obj.address = "北京";
console.log(obj) // address这个属性就不能添加到obj对象中

密封对象，不允许配置和删除属性

• seal
  • 实际是调用preventExtensions
  • 并且将现有属性的configurable: false

var obj = {
  name: "zs",
  age: 18,
};
Object.seal(obj);
delete obj.name
console.log(obj) // name属性不会删除

冻结对象，不允许修改现有属性

• freeze
• 实际上是调用seal
• 并且将现有属性的writable: false

var obj = {
  name: "zs",
  age: 18,
};
Object.freeze(obj);
obj.name = ls''
console.log(obj) // name属性值不会被修改