当前位置：首页 > news >正文

JavaScript中监听对象的操作方式

news 来源：原创 2024/11/15 14:45:33

文章目录

前言
一、对象
- 1. 声明语法
- 2. 声明语法
- 3. 二者唯一区别
二、Object.defineProperty
三、属性描述符
- 1. 数据描述符
- 2. 存取描述符
- 3. 错误操作导致报错
总结

前言

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

一、对象

对象可以通过两种形式定义，声明形式和构造形式

1. 声明语法

var myObj = {
 key: value
 //...
}

2. 声明语法

var myObj = new Object()
myObj.key = value

3. 二者唯一区别

在声明形式中，可以添加多个键 / 值对，但是在构造形式中必须逐个添加属性

构造形式：
在这里插入图片描述

二、Object.defineProperty

由上面的例子可以看出，无论是通过声明形式或构造形式创建对象，该对象都可以枚举（即通过 for...in 或 Object.keys 方法获取到该对象的属性值）且属性值可以后续更改

但是在某些特定的场景下，我们定义完对象之后，在后续操作不让更改其属性值或者无法枚举，这种应该怎么操作呢？

于是 Object.defineProperty() 来了

在这里插入图片描述

三、属性描述符

目前属性描述符有两种主要形式：数据描述符和存取描述符
数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的
存取描述符是由 getter 函数和 setter 函数所描述的属性
一个描述符只能是这两者其中之一；不能同时是两者

1. 数据描述符

有了属性描述符，可以更加细腻的控制属性的不同操作，它们分别为：

configurable //属性值是否可以改变
writable //是否能写入
enumerable //支持枚举

属性描述符通常和 Object.defineProperty 一起定义属性

2. 存取描述符

存取描述符由一对getter - setter 函数功能来描述的属性

name: {
	get: function() { ... },
	set: function(newVal) { ... },
	enumerable: true,
	configurable: true
}

var obj = {}

Object.defineProperty(obj, 'name', {
	configurable: true,
	enumerable: true,
	get: function() {
		console.log('get')
		return this.value
	},
	set: function(newVal) {
		console.log('set')
		this.value = newVal
	}
})

// 赋值会调用 set 方法
obj.name = '猪八戒'

// 取值会调用 get 方法
obj.name

3. 错误操作导致报错

在这里插入图片描述

TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute

转载

这个错误是因为：Object.defineProperty(object, propertyName, descriptor) 定义新属性时，descriptor 中同时有访问器(getter/setter) 与 value/writable 属性。

如果一个描述符同时拥有 value 或 writable 和 get 或 set 键，则会产生一个异常

测试代码

var obj = {}

// value和 get 只能同时用一个
Object.defineProperty(obj, 'name', {
	value: '孙悟空',
	get: function() {
		console.log('get')
		return this.value
	}
})

// writable和set只能同时用一个
Object.defineProperty(obj, 'name', {
	writable: true,
	set: function(newValue) {
		console.log('set')
	}
})