属性描述符

小白要努力变强

已于 2024-04-28 18:29:32 修改

阅读量268

点赞数 9

文章标签： javascript 前端开发语言

于 2024-04-22 21:54:46 首次发布

本文链接：https://blog.csdn.net/WHITEBLAKE/article/details/138092454

版权

本文介绍了JavaScript中对象属性描述符的使用，包括如何通过`Object.getOwnPropertyDescriptor`和`Object.defineProperty`设置读写权限。探讨了使用get和set函数的灵活性以及ES6中的语法糖。同时，对比了Object.freeze和Object.seal在对象可变性的不同限制。最后提到`Object.defineProperty`在Vue2中实现数据响应式的核心作用。

摘要由CSDN通过智能技术生成

属性描述符

得到属性描述符

var obj = {
	a: 1,
	b: 2
}
var desc = Object.getOwnPropertyDescriptor(obj, 'a')
console.log(desc)

输出：{value: 1, writable: true, enumerable: true, configurable: true}

设置属性描述符

Object.defineProperty(obj, 'a', {
	value: 10,
	writable: false, // 不可重写
	enumerable: false, // 不可遍历
	configurable: false // 不可修改描述符本身
})

用set和get函数更灵活处理，报错处理

var obj = {}
Object.defineProperty(obj, 'a', {
	get: function() {
		return 10
	},
	set: function(val) {
		throw new Error('不可赋值')
	}
})
obj.a = 3
console.log(obj.a)

Uncaught Error: 不可赋值

ES6的语法糖：

class Goods {
	get totalPrice() {
		return this.choose * this.price
	}
	constructor() {
		Object.defineProperty(this, 'price', {
			get: function() {
				return 3
			}
		}),
		Object.defineProperty(this, 'choose', {
			get: function() {
				return 2
			}
		})
	}
}
var g = new Goods()
console.log(g.totalPrice)

看似调用的是属性，其实调用的是函数，需要构造器中传递的信息的属性不能使用语法糖。

Object.freeze vs Object.seal

Object.freeze: 不可写入和不可配置。
被冻结的对象不能再被更改：不能添加新的属性，不能移除现有的属性，不能更改它们的可枚举性、可配置性、可写性或值，对象的原型也不能被重新指定。
对于对象会浅冻结，需要递归进行深冻结。

function deepFreeze(object) {
  // 获取对象的属性名
  const propNames = Reflect.ownKeys(object);

  // 冻结自身前先冻结属性
  for (const name of propNames) {
    const value = object[name];

    if ((value && typeof value === "object") || typeof value === "function") {
      deepFreeze(value);
    }
  }

  return Object.freeze(object);
}

const obj2 = {
  internal: {
    a: null,
  },
};

deepFreeze(obj2);

obj2.internal.a = "anotherValue"; // 非严格模式下会静默失败
obj2.internal.a; // null

Object.seal: 密封一个对象。
密封一个对象会阻止其扩展并且使得现有属性不可配置。密封对象有一组固定的属性：不能添加新属性、不能删除现有属性或更改其可枚举性和可配置性、不能重新分配其原型。只要现有属性的值是可写的，它们仍然可以更改。
相比于Object.freeze，对于可写的属性是可以更改的。

扩展：
Object.defineProperty是Vue2实现数据响应式的基础，通过get函数收集对数据的依赖，通过set函数通知相关依赖作出该数据改变（观察者模式）。