对属性操作的控制
在前面我们的属性都是直接定义在对象内部，或者直接添加到对象内部的：
- 但是这样来做的时候我们就不能对这个属性进行一些限制：比如这个属性是否是可以通过delete删除的？这个属性是否在for-in遍历的时候被遍历出来呢？
如果我们想要对一个属性进行比较精准的操作控制，那么我们就可以使用属性描述符。
- 通过属性描述符可以精准的添加或修改对象的属性；
- 属性描述符需要使用
Object.defineProperty来对属性进行添加或者修改；
Object.defineProperty
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
可接收三个参数：
- obj要定义属性的对象；
- prop要定义或修改的属性的名称或 Symbol；
- descriptor要定义或修改的属性描述符；
返回值：
- 被传递给函数的对象
属性描述符分类
属性描述符的类型有两种：
- 数据属性（Data Properties）描述符（Descriptor）；
- 存取属性（Accessor访问器 Properties）描述符（Descriptor）；
数据属性描述符
数据数据描述符有如下四个特性：
[[Configurable]]：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；
- 当我们直接在一个对象上定义某个属性时，这个属性的 [[Configurable]] 为true；
- 当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为false；
[[Enumerable]]：表示属性是否可以通过for-in或者Object.keys()返回该属性；
- 当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true；
- 当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false；
[[Writable]]：表示是否可以修改属性的值；
- 当我们直接在一个对象上定义某个属性时，这个属性的[[Writable]]为true；
- 当我们通过属性描述符定义一个属性时，这个属性的[[Writable]]默认为false；
[[value]]：属性的value值，读取属性时会返回该值，修改属性时，会对其进行修改；
- 默认情况下这个值是undefined；
数据属性描述符测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
var obj = {
name: "why", // configurable:true
age: 18,
};
Object.defineProperty(obj, "name", {
configurable: false, // 告诉js引擎,obj对象的name属性不可删除
enumerable: false, // 告诉js引擎,obj对象的name属性不可枚举
writable: false, // 告诉js引擎,obj对象的name属性不可写入(只读属性 readonly)
value: "coderF", // 告诉js引擎,返回这个value
});
delete obj.name;
console.log(obj);
Object.defineProperty(obj, "address", {}); // 默认configurable:false
delete obj.address;
console.log(obj);
console.log(Object.keys(obj));
obj.name = "rich";
console.log(obj.name);
</script>
</body>
</html>
存取属性描述符
数据数据描述符有如下四个特性：
[[Configurable]]：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；
- 和数据属性描述符是一致的；
- 当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为true；
- 当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为false；
[[Enumerable]]：表示属性是否可以通过for-in或者Object.keys()返回该属性；
- 和数据属性描述符是一致的；
- 当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true；
- 当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false；
[[get]]：获取属性时会执行的函数。默认为undefined
[[set]]：设置属性时会执行的函数。默认为undefined
存储属性描述符测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// vue2响应式原理
var obj = {
name: "what",
};
// 对 obj对象中的name 添加描述符(存取)
var _name = ""
Object.defineProperty(obj, "name", {
configurable: true,
enumerable: false,
set: function (value) {
console.log("set方法被调用了", value);
_name = value
},
get: function () {
console.log('get 方法被调用了')
return _name
},
});
obj.name = "rick";
obj.name = "okay";
// 获取值
console.log(obj.name)
</script>
</body>
</html>
同时定义多个属性
Object.defineProperties() 方法直接在一个对象上定义 多个 新的属性或修改现有属性，并且返回该对象。
// 新增的方法
Object.defineProperties(obj, {
name: {
configurable:true,
enumerable:true,
writable:false
},
age:{
configurable:false
},
height:{
writable:false
}
});
对象方法补充
获取对象的属性描述符：
- getOwnPropertyDescriptor
- getOwnPropertyDescriptors
禁止对象扩展新属性：preventExtensions
- 给一个对象添加新的属性会失败（在严格模式下会报错）；
密封对象，不允许配置和删除属性：seal
- 实际是调用preventExtensions
- 并且将现有属性的configurable:false
冻结对象，不允许修改现有属性： freeze
- 实际上是调用seal
- 并且将现有属性的writable: false
var obj = {
name: "what",
age: 16,
};
// 1.获取属性描述符
console.log(Object.getOwnPropertyDescriptor(obj, "name"));
console.log(Object.getOwnPropertyDescriptors(obj));
// 2.阻止对象的扩展
Object.preventExtensions(obj);
obj.address = "广州市";
console.log(obj);
// 3.密封对象(不能进行配置)
Object.seal(obj);
delete obj.name;
console.log(obj);
// 冻结对象(不能进行写入)
Object.freeze(obj);
obj.name = "rick";
console.log(obj);
Q.E.D.