必修知识:属性描述符,属性冻结等等。

26 阅读2分钟

前言

本文主要是对象的属性描述符以及属性的冻结,封闭等用法。

属性的来源

  • 静态属性,如:Object.assign
  • 原型属性,如:Object.prototype.toString
  • 实例属性,如: function Person (name){ this.name = name}

属性描述符

如何定义属性

  • Object.defineProperty
  • Object.defineProperties
const obj = {name:'土豆奥利奥'};
Object.defineProperty(obj, "age", {
	value: 3
});
**const** des = Object.getOwnPropertyDescriptor(obj,"name");
console.log("name:",des)

const des2 = Object.getOwnPropertyDescriptor(obj,"age");
console.log("age:",des2)

console.log(obj)

image.png

这里有两个需要注意的点:

  1. 使用defineProperty定义的属性默认是不能被更改,枚举和配置的
  2. 直接在对象内部定义的属性是可以被更改,枚举和配置的。
  3. 打印obj,只能看到在对象内部定义的属性,而defineProperty定义的属性看不到。

属性描述符有哪些

  1. configurable: 可配置
  2. enumerable: 是否可枚举
  3. value : 值
  4. writable : 是否可被更改
  5. get:访问器函数
  6. set:访问器函数

数据属性:value + writable + configurable + enumerable

**访问器属性:get + set + configurable + enumerable **

注意事项

  • 属性描述符只能从true改为false,不能从false改为true.
const obj = {};

Object.defineProperty(obj, "name", {
  writable: true,
  configurable: true,
});

// 读取信息
console.log(Object.getOwnPropertyDescriptor(obj, "name"));

// // 尝试修改描述符信息
Object.defineProperty(obj, "name", {
  writable: false,
  configurable: false,
});

// 读取信息
console.log(Object.getOwnPropertyDescriptor(obj, "name"));

image.png

 const obj = {};

 Object.defineProperty(obj, "name", {
   configurable: false,
   writable: false
 });
 
 // 尝试修改描述符信息
Object.defineProperty(obj, "name", {
   writable: true
 });
 
 // 读取信息
 console.log(Object.getOwnPropertyDescriptor(obj, "name"));

image.png

对象的可扩展 - Object.preventExtensions

  • Object.preventExtensions:对象变的不可扩展,也就是永远不能再添加新的属性
  • Object.isExtensible:判断一个对象是否是可扩展

用法:

var obj = { name: "土豆" };
var obj1 = { name: "奥利奥" }

Object.preventExtensions(obj);

// 不可以,添加新属性
obj.age = 3;
obj1.age=3

console.log("土豆:", obj);

// 可以删除
delete obj.name; 
console.log("土豆:",obj);

console.log(Object.isExtensible(obj));
console.log(Object.isExtensible(obj1));

注意点:

  • 将一个对象设置为不可扩展之后,不能再添加新属性,但是还是可以删除属性的。 image.png

对象的封闭-Object.seal

  • 阻止添加新属性 + 属性标记为不可配置
  • Object.isSealed:检查一个对象是否被密封
const object1 = {
    property1: 42
};

Object.seal(object1);

// 不可以 添加属性
object1.property2 = 22;
console.log(object1.property2);

// 不可以 删除属性
delete object1.property1;
console.log(object1.property1);

console.log(Object.getOwnPropertyDescriptor(object1, "property1"));

image.png

对象的冻结 - Object.freeze

  • Object.freeze:不加新属性 + 不可配置 + 不能修改值
  • Object.isFrozen:检查一个对象是否被冻结
const obj = {
    prop: 42
};
  
Object.freeze(obj);
  
// 添加
obj.prop2 = 'prop2';
// 修改值
obj.prop = 33;
// 删除
delete obj.prop;

Object.defineProperty(obj, 'prop', {
    value: 10
})

console.log(obj.prop);
console.log(obj.prop2);
console.log(Object.isFrozen(obj))

image.png

总结

如有错误之处,请大家留言指出,谢谢大家!